根据 onclick 中的参数显示 jQuery-ui 对话框答案

【问题标题】：Display jQuery-ui dialog based on the argument within onclick根据 onclick 中的参数显示 jQuery-ui 对话框
【发布时间】：2016-01-18 10:12:40
【问题描述】：

我有一组来自 PHP 循环的链接，每个链接都有一个 onclick() 函数，其中包含一个数字作为参数。

echo '<a href="#" id="'.$id.'" onclick="openModel('.$id.')">'.$name.'</a>';

因此，当用户单击链接时，我希望弹出一个 jQuery-ui 对话框并显示与特定链接相关的信息。

信息在DB中，根据$idI'查询，传入onclick函数。

这是打开 jQuery 对话框的代码

function openModel(id){
    var dialog, form;

        dialog = jQuery( "#dialog-form-text-box" ).dialog({
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          buttons: {
            "Done": function() {
              dialog.dialog( "close" );
            }
          },

        });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
    });

   dialog.dialog( "open" );
}

这是 jQuery 对话框中的代码

<div id="dialog-form-text-box" title="Text Box">
    <p id="mini-title"></p>
  <form>
      <input type="text" name="textbox-title" id="textbox-title" value="<?php echo $parsedArr[0]['content']['title'] ?>" placeholder="Title"> <br> <br>
      <textarea name="textbox-desc" id="textbox-desc" placeholder="Description"><?php echo $parsedArr[4]['content']['content'] ?></textarea>
  </form>
</div>

那么，这样做的方法是什么？

【问题讨论】：

您不能为所有这些链接提供一个通用类，检测相同的点击事件并根据传递给函数的 id 显示弹出内容？
附带说明，这里看起来不是您所期望的：id="$id"。您将 ID 设置为 $id，而不是服务器端 $id 变量的值
@A.Wolff, $id 表示 PHP 变量
@JensonMJohn 是的，因为 onclick 功能会触发弹出窗口。内容基于传递的参数 $id。
@TharinduLucky 但在 PHP echo '<a href="#" id="$id" ...>' 中只输出 <a href="#" id="$id" ...>。这不难确认你得到了什么输出

标签： javascript php jquery jquery-ui

【解决方案1】：

您需要使用 AJAX 作为 id 从服务器检索内容。

尝试类似：

<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery UI with Ajax</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
   $(document).ready(function(){
      $(".dialog").on("click", function(){
        var id = $(this).attr("id");
        $.ajax({
            url: "content.php?id="+id,
            success: function(data){
                $("#dialog").html(data);
            }   
        });

        $( "#dialog" ).dialog({
          modal: true,
          buttons: {
            Ok: function() {
              $( this ).dialog( "close" );
            }
          }
        });

      });
   });

  </script>
</head>
<body>

<div id="dialog" title="My Content">
  <!--Your Content-->
</div>

 <h2><a href="#" id="1" class="dialog">Link 1</a></h2>
 <h2><a href="#" id="2" class="dialog">Link 2</a></h2>
 <h2><a href="#" id="3" class="dialog">Link 3</a></h2>
 <h2><a href="#" id="4" class="dialog">Link 4</a></h2>
 <h2><a href="#" id="5" class="dialog">Link 5</a></h2>

</body>
</html>


Content.php

<?php

$id = $_REQUEST['id'];

echo "Data From the server for id ".$id;

?>

【讨论】：