0

With no experience with javascript, I was able to open a Google map using the example shown here http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html. In order to use the same script for a different map on the same page, I changed some of the parameters on the second script to differentiate it from the first.

Here's the code for the first script...

<a href="" onclick="return showDialog()">Get first map!</a>

<div id="dialog_a" title="First Map">
    <iframe id="iframe_a" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

<script type="text/javascript">

function showDialog(){
   $("#dialog_a").dialog("open");
   $("#iframe_a").attr("src","https://www.google.com/maps/embed/v1/place?q=409%20Bullard%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}
$(document).ready(function() {
   $("#dialog_a").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});
</script>

Here's the second script...

<a href="" onclick="return showDialog()">Get second map!</a>

<div id="dialog_b" title="Second Map">
    <iframe id="iframe_b" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

<script type="text/javascript">

function showDialog(){
   $("#dialog_b").dialog("open");
   $("#iframe_b").attr("src","https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}
$(document).ready(function() {
   $("#dialog_b").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});
</script>

The second code is executing and not the first. I understand why this is happening but I haven't been able to figure out (or find a similar example on stack overflow) how to differentiate one script from the other to avoid this conflict.

My guess is that I must either make the function or showDialog() unique for each script but I haven't been able to figure out how to go about this.

Here's an online example...

http://johncrockford.com/test/

2
  • And why exactly is happening, according to your understanding?
    – Inox
    Nov 18, 2014 at 18:54
  • I believe it is happening because the second script is the last on the page and that is the one executing. Nov 18, 2014 at 19:02

2 Answers 2

0

Each anchor tag is executing a function which you have defined twice. The priority is on the function defined nearest the end in the markup.

Easiest solution would be simply to give the functions different names, however, you could refactor them into one:

function showDialog(dialogId, iframeId, url){
   $(dialogId).dialog("open");

   $(iframeId).attr("src", url);
   return false;
}

showDialog("#dialog_b", "#iframe_b", "https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
0

The variables showDialog equal why and shows you an error and the function $ (document) .ready (function () you just have to call it once and within makes all you want if not otherwise induce the web page will show slow

sorry for my English use google translate to especificarte as to solve

I hope, I can help you with something

function showDialogA(){
   $("#dialog_a").dialog("open");
   $("#iframe_a").attr("src","https://www.google.com/maps/embed/v1/place?q=409%20Bullard%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}


function showDialogB(){
   $("#dialog_b").dialog("open");
   $("#iframe_b").attr("src","https://www.google.com/maps/embed/v1/place?q=401%20Clovis%20Avenue%2C%20Clovis%2C%20CA%2C%20United%20States&key=AIzaSyBNO4HD3H0XP_DnX_V8AHPrtpUPK5WrDgc");
   return false;
}

$(document).ready(function() {
   $("#dialog_a").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });

    $("#dialog_b").dialog({
           autoOpen: false,
           modal: true,
           height: 500,
           width: 500
       });
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<a href="" onclick="return showDialogA()">Get first map!</a>

<div id="dialog_a" title="First Map">
    <iframe id="iframe_a" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>



<br /><br /><br /><br />

<a href="" onclick="return showDialogB()">Get second map!</a>

<div id="dialog_b" title="Second Map">
    <iframe id="iframe_b" width="100%" height="100%"
    marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto"
    title="Dialog Title"></iframe>
</div>

1
  • Yes, this works. My earlier attempts to name the function in each code snippet were wrong. I was trying to name the function in this manner: showDialog ("dialog_a"). Nov 18, 2014 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.