Question

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

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

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

信息在数据库中，将根据$id I'查询它们，并传入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>

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

Answer 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;

?>

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

1 个答案: