-1

Updated code, trying to change the imo number with an onclick but vesslefinder just ignores everything in the onclick. Any advivce? Even when I hard code the imo it doesn't work.

The <a> 'button' link:

<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a>

script:

<script>     
$(document).on('click', '#button_mssi_imo', function( event )
{
    alert('Button Clicked');
    var imo_data = $(this).text();

    // splits the string to get the imo
    var imo_data_split = imo_data.split("!")[0];

    var width="700";
    var height="500";
    var zoom="3";
    var imo = imo_data_split;
    var click_to_activate=false;
});
</script>       
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>

I am trying to append some JavaScript into a div when a button is clicked (To use vesselfinder). I can manage to append the start of the script, but the second I start to add var it comes back with the unrecognised expressionmessage.

Could anyone please help me to what I am doing wrong? I have also tried everything on one line that results in the same error:

Jake
  • 141
  • 3
  • 12
  • That is not how you add text to an element.... Why are you not just setting the variables? – epascarello May 15 '17 at 13:19
  • 4
    That code simply makes no sense whatsoever. You cannot add a ` – Pointy May 15 '17 at 13:19
  • It is not a duplicate of "how to write a script" it is more complex than that. He wants to decide where vesselfinder puts the iFrame. – mplungjan May 15 '17 at 13:25
  • @Pointy I was basing it from [this](http://stackoverflow.com/a/9413772/5841456), since theres a whole database off the imo to go through (This would be seen on a modal). – Jake May 15 '17 at 13:31

1 Answers1

1

Here is what I think you wanted based on the code I get from https://www.vesselfinder.com/nl/embed

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var myWrite = document.write, html=[]; 
document.write=function(str) { // redefine document.write to intercept
  html.push(str);
}
$(function() {
  $("#myDiv").html(html.join("")); // load into the div of your choice
});
</script>
<script type="text/javascript">
  var width="700";
  var height="500";
  var zoom="3";
  var click_to_activate=false;
</script>
<script type="text/javascript"
 src="https://www.vesselfinder.com/aismap.js">
</script>

<div id="myDiv"></div>

Loading on click (does not work on SO) 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
function writeVessel(imo) {
    var script = [];
    script.push('<script>');
    script.push('var imo = "' + imo + '";');
    script.push('var width="700";');
    script.push('var height="500";');
    script.push('var zoom="3";');
    script.push('var click_to_activate=false;');
    script.push('<\/script>');
    script.push('<script src="https://www.vesselfinder.com/aismap.js"><\/script>');
    console.log(script.join("\n"))
    var iFrame = window.myIframe; // $("#myIframe")[0];
    iFrame.document.write(script.join("\n"));
    iFrame.document.close();
}
$(function() {
  $(document).on('click', '.button_mssi_imo', function(e) {
    e.preventDefault(); // cancel click
    var imo = $(this).text().split("!")[0];
    writeVessel(imo);
  });
});
</script>

</head>
<body>
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a><br />
<iframe id="myIframe" name="myIframe" width="800" height="800" src="about:blank"></iframe>
</body>
</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236