2017-02-02 16 views
0

Это мой код:Как передать переменную из щелкнули элемента DialogBox

$(function(){ 
 
    $("#dialogLoad").dialog({ 
 
\t  autoOpen: false, 
 
       modal: true, 
 
       title: 'DATE REELLE CHARGEMENT', 
 
       width: 300, 
 
       buttons: { 
 
        OK: function() { 
 
        event.preventDefault(); 
 
        var regdate = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$/; 
 
        //alert($('#dateReelleChargement').val()); 
 
        if(!regdate.test($('#dateReelleChargement').val())) 
 
        {      
 
         $('#errLoad').text("La date doit être au format jj/mm/aaaa"); 
 
        } 
 
        else 
 
        { 
 
         //Here AJAX 
 
         alert("Here i would like to display loaded_383") 
 
         $(this).dialog("close"); 
 
        } 
 
        } 
 
       }, 
 
      }); 
 
      $(".loaded").click(function() { 
 
       $("#dialogLoad").dialog("open"); 
 
      }); 
 
     });
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> 
 
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 

 
<div><a id="loaded_383" class="loaded" href="#">Test</a></div> 
 
    
 
<div id ="dialogLoad"> 
 
    <p>Vous devez entrer une date de chargement réel</p> 
 
    <input type="hidden" autofocus="autofocus" /> 
 
    <input id="dateReelleChargement" type="text" /><br /><br /> 
 
    <div id="errLoad" style="color: red;"></div> 
 
</div>

Для моего запроса AJAX, мне потребуется идентификатор щелкнутыми элемента:

$(".loaded") 

Как это сделать, чтобы передать переменную:

$(this).attr('id) 

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

Большое вам спасибо.

+0

Пожалуйста, нажмите на кнопку '<>' и создать [mcve] – mplungjan

+0

Вы можете найти мое отредактированное сообщение с примером. – Kuartz

ответ

1

Вот лучшее решение без использования глобальной переменной. Вы можете установить .data() в диалоговом окне и передать свои данные через это. Надеюсь это поможет.

$(function(){ 
 
    $("#dialogLoad").dialog({ 
 
\t  autoOpen: false, 
 
       modal: true, 
 
       title: 'DATE REELLE CHARGEMENT', 
 
       width: 300, 
 
       buttons: { 
 
        OK: function() { 
 
        event.preventDefault(); 
 
        var regdate = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$/; 
 
        //alert($('#dateReelleChargement').val()); 
 
        if(!regdate.test($('#dateReelleChargement').val())) 
 
        {      
 
         $('#errLoad').text("La date doit être au format jj/mm/aaaa"); 
 
        } 
 
        else 
 
        { 
 
         //Here AJAX 
 
         alert($(this).data('passedID')); 
 
         alert("Here i would like to display loaded_383") 
 
         $(this).dialog("close"); 
 
        } 
 
        } 
 
       }, 
 
      }); 
 
      $(".loaded").click(function() { 
 
       $("#dialogLoad") 
 
        .data('passedID', $(this).attr('id')) 
 
        .dialog("open"); 
 
      }); 
 
     });
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> 
 
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 

 
<div><a id="loaded_383" class="loaded" href="#">Test</a></div> 
 
    
 
<div id ="dialogLoad"> 
 
    <p>Vous devez entrer une date de chargement réel</p> 
 
    <input type="hidden" autofocus="autofocus" /> 
 
    <input id="dateReelleChargement" type="text" /><br /><br /> 
 
    <div id="errLoad" style="color: red;"></div> 
 
</div>

+0

Отличное решение! Большое вам спасибо! – Kuartz

+0

Всегда рад помочь ... –

0

Не могли бы вы просто сохранить идентификатор переменной. Таким образом, вы не должны зависеть от этого объекта.

вместо:

alert($(this).attr('id')); 

попробовать:

var id = $(this).attr('id'); 

Затем использовать его, когда вы получите код Ajax. В худшем случае вы даже можете сделать переменную глобальной.

+0

Если я храню id в переменной, тогда я должен установить эту переменную как общедоступную. Потому что переменная остается в своей функции ... Более того, как я могу сделать ее общедоступной, когда мне нужно ее значение при нажатии? (элементы с тем же классом многочисленны! – Kuartz

1

Вы можете просто определить переменную за пределами $ (function() {...}) и использовать ее внутри.

var id; 
 
$(function(){ 
 
    $("#dialogLoad").dialog({ 
 
\t  autoOpen: false, 
 
       modal: true, 
 
       title: 'DATE REELLE CHARGEMENT', 
 
       width: 300, 
 
       buttons: { 
 
        OK: function() { 
 
        event.preventDefault(); 
 
        var regdate = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$/; 
 
        //alert($('#dateReelleChargement').val()); 
 
        if(!regdate.test($('#dateReelleChargement').val())) 
 
        {      
 
         $('#errLoad').text("La date doit être au format jj/mm/aaaa"); 
 
        } 
 
        else 
 
        { 
 
         //Here AJAX 
 
         alert(id); 
 
         alert("Here i would like to display loaded_383") 
 
         $(this).dialog("close"); 
 
        } 
 
        } 
 
       }, 
 
      }); 
 
      $(".loaded").click(function() { 
 
       id = $(this).attr('id'); 
 
       $("#dialogLoad").dialog("open"); 
 
      }); 
 
     });
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> 
 
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 

 
<div><a id="loaded_383" class="loaded" href="#">Test</a></div> 
 
    
 
<div id ="dialogLoad"> 
 
    <p>Vous devez entrer une date de chargement réel</p> 
 
    <input type="hidden" autofocus="autofocus" /> 
 
    <input id="dateReelleChargement" type="text" /><br /><br /> 
 
    <div id="errLoad" style="color: red;"></div> 
 
</div>

+0

Хорошо ... Я об этом подумал ... Спасибо за вашу помощь. – Kuartz