jqueryダイアログ（）で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()メソッドを使用して、必要なデータを渡すことをお勧めします。各ボタンは、ボタンhtmlの一部としてイメージ名を作成するためにループ内のHTML5データ属性を利用します。

次に、ボタンをクリックすると、その値を取得し、それをモーダルのコピー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>');