Question

有几天，我无法弄清楚如何为以下问题设计解决方案：我有很多项目（大约1300个）存储在数据库中，每个项目都有自己的＆＃34; id＆＃34;，some＆＃34;名称＆＃34;第三个属性＆＃34;启用＆＃34;。

我想在同一页面上显示用户链接到（所有）对话框。然后，对话框应显示＆＃34; name＆＃34;并允许用户选择确定/取消（即启用/不启动）。（更改＆＃34;启用＆＃34;是通过文件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');

其中＆＃39; content_generator.php＆＃39;获取给定的id并输出相应的文本，＆＃34; .load（）＆＃34;插入对话框。

选项2基于Sam here

给出的答案

Answer 2

您要做的是称为动态内容加载。我的最后一个例子是通过插入必要的数据（作为JSON）并直接在页面上生成内容来实现的。

下一种方法可能不适合您尝试的操作，但稍后可能会有用。

我们使用外部页面为我们提供内容，而不是检索数据并在页面上生成内容。这通过仅提供所需内容来减少服务器负载，并且可以增加用户交互性（因为页面在向用户显示之前不必加载所有信息）。有关AJAX的更多信息，请参见[此处] [1]。

优点：将内容生成与用户访问的页面分开。如果您需要在网站上的其他地方显示相同/类似的内容，该怎么办？此方法允许您为多个用例重用代码。

您甚至可以将其与之前的方法结合使用。只需使用一个单独的PHP文件来生成对话框内容和链接（而不是每次单击，如下所示），它将被调用并加载到$（document）.ready（）

每次点击示例：

生成每次点击的内容

单独的PHP文件 - dialog_text_generator.php：

<?
  //DON'T ACTUALLY DO THIS. ALWAYS SANITIZE DATA AND AVOID USING mysql_ prefixed
  //functions (use mysqli or PDO). 
  //This is just to illustrate getting data from the DB
  $item_id = $_REQUEST['item_id'];
  $query = "SELECT * FROM `stuff` WHERE item_id = $item_id";
  $query_results = mysql_query($query, $db_connection);

  $num_matches = count($query_results);
  $text = array();
  for($i = 0; $i < $num_matches; $i++) {
    $current_item = $query_results[$i];

    //Print out content
    //replace 'name' with whatever field your DB table uses to store the item name
    if($current_item['name'] == '') { 
      echo "<p>Number $item_id does not have any name.</p>";
    } else {
      echo "<p>The name of number ".$item_id." is ".$current_item['name']."</p>";
    }
  }
?>

主页中的Javascript：

<script>
$('.link_dialog').click(function() { 
      //On user clicking the link
      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

      //autoOpen set to false so this doesn't open yet, we're just defining the buttons here
      $('#dialog').dialog({
        autoOpen: false, 
        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');
          }
        }
      }); 

      //Load content from PHP file into dialog div and open the dialog
      //Obviously use the actual path to dialog_text_generator.php
      jQuery('#dialog').load('dialog_text_generator.php?item_id='+link_id).dialog('open');

      return false;
    });

</script>

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

2 个答案: