douwaif22244 2016-01-18 10:12
浏览 80

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

I have a set of links which comes from a PHP loop and each link has a onclick() function which contains a number as the argument. 

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

So, when the user clicked on the link, I want a jQuery-ui Dialog to popup and display the information relevant to the particular link.

The information is in the DB and they will be queried according to the $id I', passing in the onclick function.

This is the code for opening the jQuery dialog

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" );
}

This is the code for what's inside the jQuery dialog

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

So, what's the way of doing this ?

  • 写回答

1条回答 默认 最新

  • doutan3463 2016-01-18 10:54
    关注

    You need to retrieve contents from Server using AJAX for the id.

    Try something like :

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

?>
    评论

报告相同问题？

悬赏问题

  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致
  • ¥15 apm2.8飞控罗盘bad health，加速度计校准失败
  • ¥15 求解O-S方程的特征值问题给出边界层布拉休斯平行流的中性曲线
  • ¥15 谁有desed数据集呀
  • ¥20 手写数字识别运行c仿真时，程序报错错误代码sim211-100
  • ¥15 关于#hadoop#的问题
  • ¥15 (标签-Python|关键词-socket)
  • ¥15 keil里为什么main.c定义的函数在it.c调用不了
  • ¥50 切换TabTip键盘的输入法