php変数をjqueryに渡し、jqueryダイアログでデータを表示するために使用します。

Question

jqueryダイアログに動的にmysql/phpクエリデータを表示する方法を見つけようとしています。つまり、私はmysqlの結果を持つhtmlテーブルを持っています。それぞれのtrはその結果の隣に、対応するmysql idを持つアンカータグの中のアイコンを持っています。私はアイコンをクリックすると

echo '<a href="index.php?word_id=' . $row['word_id'] . '" class="clickable"><i class="fa fa-table"></i></a>'; 

、jqueryのは、新しいクエリにIDを渡すと、新しいHTMLテーブルと、適切なMySQLの結果との対話を開く必要があります。

<div id="ui-dialog-first"> 
<?php 
$query = "SELECT alt1.pron AS pron, alt1.word_form AS word1, alt2.word_form AS word2 FROM alter alt1 LEFT JOIN alter alt2 ON alt2.pron = alt1.pron WHERE alt1.word_id = '$word_id'"; 
    $result = mysqli_query($con, $query); 
    if (mysqli_num_rows($result) > 0) { 
     echo "<table class='alter' style='visibility:hidden;'>"; 
     while ($row = mysqli_fetch_array($result)) { 
     echo "<tr><td>" . $row['pron'] . "</td><td>" . $row['word1'] ."</td><td>" . $row['word2'] . "</td></tr>";     
} 
    echo "</table>"; 
    ?> 
</div> 

私は見つけると考えることができるすべてを試してみましたが、jqueryのダイアログが開いたときに私が得るすべてはinital HTMLテーブルの最後の行の結果は、私がCLIKたアイコンを関係なくしています。ここに私のjqueryのコードは、IDの実験なしである：

$(document).ready(function(){ 
    $('.clickable').click(function(event){ 
     event.preventDefault(); 
     $('.ui-dialog-first').dialog({ 
      open: function(){ 
       $(this).dialog('option', { 
       'minWidth': 700, 
       'minHeight': 500, 
       'padding-bottom': 20 
       }); 
       $(this).dialog({ 
        classes: { 
         'ui-dialog-titlebar': 'custom-green' 
        } 
       }); 
      } 
     }); 
     $('.alter').css('visibility', 'visible'); 
     $.ajax({ 
      url: "index.php", 
      method: 'GET', 
      data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"}", 
      success: function(data) 
      { 
       $('.alter').html(data); 
      } 
     }); 
    }); 
}); 

私の質問、クエリにアンカータグからword_idを通過した後、対応する結果とダイアログを開くにはどのような方法がありますか？

Answer 1

いつでもJQueryを使用してタグからhrefを取得し、word_idの文字列を解析することができますが、word_idを使用してタグにid属性を割り当てるほうが簡単です。だから、のような、

echo '<a id="' . $row['word_id'] .'"..... 

はその後、同様のidをつかむためにあなたのクリックハンドラ内event.target.idをjQueryのを使用していますが、その後、Ajaxのデータ部分のためのスコープを持つ変数にIDを割り当ててください。

$(document).ready(function(){ 
$('.clickable').click(function(event){ 
    var word_id = event.target.id; 
    event.preventDefault(); 
    $('.ui-dialog-first').dialog({ 
     open: function(){ 
      $(this).dialog('option', { 
      'minWidth': 700, 
      'minHeight': 500, 
      'padding-bottom': 20 
      }); 
      $(this).dialog({ 
       classes: { 
        'ui-dialog-titlebar': 'custom-green' 
       } 
      }); 
     } 
    }); 
    $('.alter').css('visibility', 'visible'); 
    $.ajax({ 
     url: "index.php", 
     method: 'GET', 
     data: "{pron:" + pron + "word1:" + word1 + "word2:" + word2 +"word_id:" + word_id + "}", 
     success: function(data) 
     { 
      $('.alter').html(data); 
     } 
    }); 
}); 

次に、適切なword_idをバックエンドのクエリに使用できます。希望が役立ちます。