2012-09-04 33 views
0

我想使用Jquery对话框在一个页面上显示注释,该页面有多个从数据库调用的行 - 每行都有一个链接,显示一个应显示相关内容的对话框为那一行。在循环中将值传递给Jquery对话框

对话框工作正常,但我不能让它从链接中获取一个值,因此我可以在对话框显示的div中查询数据库。

当有人点击图片时,我希望它显示该行的注释 - 这是我目前使用的代码。我知道我没有发送一个值,因为我不知道该怎么做 - 我怎样才能得到这个将行ID附加到每行图像上,然后在对话框打开时使它在对话框中可用,以便显示该注释?

<script> 
$(function() { 
     $("#jui-dialog").dialog({ 
    autoOpen: false, 
    title: "Note", 
    modal: true, 
    width: "640", 
    buttons: [{ 
      text: "Close note", 
      click: function() { 
       $(this).dialog("close"); 
      }}] 
}); 
    $("#jui-dialog-mdl-btn").bind("click", function(event) { 
    $("#jui-dialog").dialog("option", {modal: true}).dialog("open"); 
    event.preventDefault(); 
}); 
}); 
</script> 

<while begins> 
<img src="/icons/16/note.png" title="View employee note" alt="View employee note" id="jui-dialog-mdl-btn"> 
<input type="hidden" value="<?=$id?>"> 
<while ends> 



         <div id="jui-dialog"> 
          <div class="dialog-inner"> 
           <?php         
           $query=mysql_query("SELECT content from notes WHERE id='$id'"); 
           $count=mysql_num_rows($query); 
           $row=mysql_fetch_array($query); 
           $note=$row['content']; 
           print $note; 
           ?> 
          </div> 
         </div> 

回答

1

首先:不要在while循环中使用id,因为您不能在同一页上使用两个相同的id。你可以使用课程。 您可以使用您的验证码,:

<img src="/icons/16/note.png" title="View employee note" alt="View employee note" class="jui-dialog-mdl-btn"> 
<input type="hidden" value="<?=$id?>"> 

要得到员工的ID:

$('.jui-dialog-mdl-btn').click(function() { 
     var id = $(this).next('input').val(); 
     //process whatever you like 
}); 

要收到的数据,你想显示,你可以使用一个隐藏的div像这样:

<img src="/icons/16/note.png" title="View employee note" alt="View employee note" class="jui-dialog-mdl-btn"> 
<input type="hidden" value="<?=$id?>"> 
<div class="dialoginfo" style="display:none;"><!--code to show in your dialog--></div> 

然后在jQuery的:

$('.jui-dialog-mdl-btn').click(function() { 
    var id = $(this).next('input').val(); 
    $(this).next('.dialoginfo').dialog(/*options*/); 
    //process whatever you like 
}); 

当然您的实施可能会有所不同,但我希望您在这里有详细的摘录