watermaniak

watermaniak

Embedded javascript inside of a liveview

I’m trying to embed some 3rd party javascript code inside of my LiveView page from Vesselfinder:

<script type="text/javascript">
    // Map appearance
    var width="100%";         // width in pixels or percentage
    var height="300";         // height in pixels
    var names=true;           // always show ship names (defaults to false)
    // Single ship tracking
    var imo="9506291";        // display latest position (by IMO, overrides MMSI)
    var show_track=true;      // display track line (last 24 hours)
</script>
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>

If I just include this in my show.html.heex, this will not work as I have to refresh the page to make the embedded map visible (i.e., if I navigate directly to a page that should show the embedded map, it will show up but if I navigate from another LiveView to the page that’s supposed to show the embedded map, there is no map at all).

As Elixir is the first language I have learned, I have no experience with javascript, but I feel there should be something possible here with the Phoenix Liveview JS Hooks. Is there somebody that can point me in the right direction?

First Post!

tomkonidas

tomkonidas

You can read over JS Interop and also check out this course from Pragmatic Studios if you learn better with video courses. This course touches on JS interop/integration

Where Next?

Popular in Questions Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New

Other popular topics Top

KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36820 110
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement