Конфликтные сценарии диалога jQuery

Question

Не имея опыта работы с javascript, я смог открыть карту Google, используя приведенный здесь пример http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html. Чтобы использовать тот же скрипт для другой карты на той же странице, я изменил некоторые параметры на втором скрипте, чтобы отличить его от первого.

Вот код для первого сценария ...

<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> 

Вот второй сценарий ...

<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> 

Второй выполнения кода, а не первый. Я понимаю, почему это происходит, но я не смог выяснить (или найти аналогичный пример переполнения стека), как отличить один сценарий от другого, чтобы избежать этого конфликта.

Я предполагаю, что я должен либо сделать функцию, либо showDialog() уникальной для каждого скрипта, но я не смог понять, как это сделать.

Вот онлайн пример ...

http://johncrockford.com/test/

Answer 1

Каждый якорь тег выполняет функцию, которую вы определили два раза. Приоритет - это функция, определенная ближе к концу разметки.

простое решение было бы просто дать функций разные имена, однако, вы можете реорганизовать их в одно:

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"); 

Answer 2

Переменные showDialog равны, почему и показывает ошибку и функцию $ (document) .ready (function() вы просто должны называть его один раз и в течение делает все, что вы хотите, если иное не вызывать веб-страница будет отображаться медленно

простите за мой английский использовать Google Translate для especificarte, чтобы решить

Я надеюсь, я могу помочь вам с чем-то

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>