[英]Pass php variable to jquery and use it to display data in jquery dialog
我正在努力寻找一种在jquery对话框中动态显示mysql / php查询数据的方法。 简而言之,我有一个带有mysql结果的html表。 每个tr的结果旁边的anchor标记中都有一个图标,带有相应的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表最后一行的结果,无论我点击哪个图标。 这是我的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从锚标记传递到查询,然后打开具有相应结果的对话框?
您始终可以使用JQuery从标记中获取href,然后解析您的word_id的字符串,但是更简单的方法是使用word_id为标记分配ID属性。 就像
echo '<a id="' . $row['word_id'] .'".....
然后在您的点击处理程序中使用JQuery来获取ID,例如event.target.id
,但请确保将ID分配给一个变量,该变量的作用域为ajax数据部分。
$(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。 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.