在jquery-dialog()中发送一个php变量

Question

我有一个表格，里面有图像和关于每个图像的信息。在每个图像旁边，我都有一个"添加"按钮，单击该按钮会打开一个id="alignment"的jquery对话框（）。我想发送一个php变量（带有图像名称），这样当你点击"添加"按钮时，我可以调用该变量，图像名称可以显示在对话框中。我的代码是：

  foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');  
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>'); 
  }
$wgOut->addScript('<script type="text/javascript"> 
    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Image",
                //draggable: false,
                resizable: false,
                buttons: {"Okay": function()      {$(this).dialog("close");}},
        });
        $(".imageSetting")
            .click(function() {
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );
</script>'); 
$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');

Answer 1

所以我为您的示例添加了一些代码，但您可以根据需要对其进行调整。基本上，我建议使用jQuery.data()方法来传递您需要的数据。每个按钮都将利用循环中的HTML5数据属性来创建图像名称，作为按钮html的一部分。

接下来，当您单击按钮时，它将获取该值，并将其分配给模态的image-name副本。

我在你的模态中添加了一个开放函数。在该函数中，它将获取图像名称值（我们刚刚分配的值），现在可以使用它将其附加到模态的内容中。（例如，您可以在模态html中的某个位置创建一个<span>，用于放置图像名称…然后使用.html()方法将值"粘贴"到其中）。

foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button data-image-name="' . $upload[0] . '" class="imageSetting">Add</button></td><td>');  
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>'); 
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />'); 
$wgOut->addHtml('</td><td>'); 
$wgOut->addHTML($upload[1]); 
$wgOut->addHTML('x'); 
$wgOut->addHTML($upload[2]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]); 
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>'); 
  }
$wgOut->addScript('<script type="text/javascript"> 
    ( function($) {
        $(document).ready(function() {
        $(function() {          
        $( "#alignment" )
            .dialog({
                autoOpen: false,
                title: "Align Image",
                //draggable: false,
                resizable: false,
                open: function() {
                    var imageName = $("#alignment").data("image-name");
                    // use the jQuery .html() function to put the value of 'imageName'
                    // into your dialog contents. (like #modal-subheader.html(imageName);)
                },
                buttons: {"Okay": function()      {$(this).dialog("close");}},
        });
        $(".imageSetting")
            .click(function() {
            $("alignment").data("image-name", $(this).data("image-name"));
            $( "#alignment" ).dialog("open");
        });
        });     
        }); 
    } ) ( jQuery );
</script>'); 
$wgOut->addHTML('<div id="alignment">'); 
  $out = self::alignment();   
  $wgOut->addHtml($out);
$wgOut->addHTML('</div>');