如何将变量从单击的元素传递到 DialogBox

Question

这是我的代码：

$(function(){
    $( "#dialogLoad" ).dialog({
        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 请求，我需要点击元素的 ID :

$(".loaded")

如何传递变量:

$(this).attr('id)

对话框中的参数？事实上，'this' 无法在第一个函数中工作，因为它涉及对话框而不是我单击的元素。

非常感谢。

Answer 1

你能不能把 id 存储到一个变量中。这样你就不必依赖 'this' 对象。

而不是：

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

尝试：

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

然后当你到达ajax代码时使用它。在最坏的情况下，您甚至可以将变量设为全局变量。

Answer 2

您可以在 $(function() { ... }) 外部定义一个变量并在内部使用它。

var id;
$(function(){
    $( "#dialogLoad" ).dialog({
        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>

Answer 3

这里有一个不使用全局变量的更好的解决方案。您可以在对话框中设置 .data() 并通过它传递数据。希望这有帮助。

$(function(){
    $( "#dialogLoad" ).dialog({
        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>

如何将变量从单击的元素传递到 DialogBox

How to pass a variable from clicked element to DialogBox

jquery

ajax

jquery-ui-dialog