javascript - 加载对话框内容并传递变量

Question

几天来，我无法弄清楚如何为以下问题设计解决方案:我在数据库中存储了很多项目(大约 1300 个)，每个项目都有自己的“id”，一些“名称”和第三个属性“已启用”。

我想在同一页面上向用户显示(所有)对话框的链接。然后对话框应显示“名称”并允许用户选择“确定”/“取消”(即启用/无操作)。 (“启用”的更改是通过文件 some_file.php 进行的，该文件已经正常工作，不是本问题的主题。)

我发现了类似的问题，例如 this或this但它们中的任何一个都不需要像我的对话框一样在 php 和 javascript 之间传递变量。

我无法解决以下评论中所述的问题:

JavaScript:

$(function(){
  $('#dialog').dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'OK': function() {
                $.ajax({
                    url: 'some_file.php',
                    type: 'POST',
                    data: 'item_id=' + id,// here I need to pass variable, i.e. $line["id"] from the php loop
                });
                $(this).dialog('close');
        }
    }
});
$('.link_dialog').click(function(){
    $('#dialog').dialog('open');
    return false;
  });
});`

html + php:

<?
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
// not sure here how to pass the "text" to some javascript function
    if ($line["name"]=="") {
      text = "Number ".$line["id"]." does not have any name.";
    } else {
      text = "The name of number ".$line["id"]." is ".$line["name"];
    }
}
?>
<a href='#' class='link_dialog'>Dialog 1</a>
<a href='#' class='link_dialog'>Dialog 2</a>
<a href='#' class='link_dialog'>Dialog 3</a>

<div id='dialog' title='Name' style='display: none;'>
    // not sure here how to extract the "text" from javascript function created above
</div>

<强> jsfiddle demo (当然，不起作用)

如果有人明白这一点，我将非常感谢您的帮助。你可以更新我的jsfiddle。

Answer 1

在 PHP 中:

<?
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
    if ($line["name"]=="") {
      $text[$line["id"]] = "Number ".$line["id"]." does not have any name.";
    } else {
      $text[$line["id"]] = "The name of number ".$line["id"]." is ".$line["name"];
    }
}

/***
 * Give each link unique ID (I've used 'dialog-n')
 * Advantage to creating link dynamically: 
 * (what if the number of dialogs changes in the future?)
 * Also suggest that you wrap these in a div
 */
$num_links = count($text);
for($i = 1; $i <= $num_links; $i++) {
    echo "<a href='#' id='dialog-$i' class='link_dialog'>Dialog $i</a>";
}

HTML:

<div id='dialog' title='Name' style='display: none;'>
</div>

在 JavaScript 中:

    var DIALOG_TEXT = <?php echo json_encode($text); ?>; //Pass text via JSON

    $('.link_dialog').click(function() { 
      var link = this;

      //Get link ID
      var link_id = link.attr('id').split('-'); //Split string into array separated by the dash
      link_id = link_id[2]; //Second array element should be the ID number
      var msg_text = DIALOG_TEXT[link_id]; //Retrieve associated text

      //Insert text into dialog div
      $('#dialog').text(msg_text); //Use .html() if you need to insert html

      $('#dialog').dialog({
        buttons: {
          "Cancel": function() {
             $(this).dialog('close');
          },
          "OK": function() {
             $.ajax({
                      url: 'some_file.php',
                      type: 'POST',
                      data: 'item_id=' + link_id, //Use link id number extracted above
                    });
                    $(this).dialog('close');
          }
        }
      }); 
      return false;
    });

我尚未测试上述内容，您可能需要根据您的需要进行修改。

选项 2:

如果您打算动态生成对话框内容(例如仅当用户单击链接时)，您可以执行以下操作

jQuery('#dialog').load('content_generator.php?item_id=**[your id]**').dialog('open'); 

其中“content_generator.php”采用给定的 id 并输出适当的文本，“.load()”将其插入到对话框中。

选项2基于Sam here给出的答案