jquery动态对话框

Question

我对jquery很新颖，我试图打开一系列打开对话框的链接的对话框，但即时通讯努力实现这一点，我一直在寻找3天，但每一个帖子，我发现是从这里看起来技术性很强，几乎没有任何解释。

我的目标是从数据库中输出行，并将行ID分配给像这样的按钮。

<div id="dialog"> 
    <div class="content"></div> 
</div> 
<button id="opener" onClick="showDialog(1)">Oview details</button> 

查看详情 查看详情

我希望能够从这个事件ID传递到一个jQuery对话框。 因此，我试图包含一个函数内的主对话框代码，并传递eventID作为参数，这似乎并没有工作。

function showDialog(eventId) 
{ 
$(document).ready() 
{ 
    $(function() { 
     $("#dialog").dialog({ 
      autoOpen: false, 
      height: $(window).height() - 50, 
      width: $(window).width() - 50, 
      show: { 
       effect: "blind", 
       duration: 400, 
      }, 

      hide: { 
       effect: "explode", 
       duration: 400 
      }, 

      //pass the event Id to process and load the content into the div named content. 
      open: function (event, ui) { 
       $('#content').load("process.php?id=" eventId); 
       ; 

      } 
      buttons: { 
          "Accept Event": function() { 
          $(this).dialog("close"); 
          }, 
          Cancel: function() { 
          $(this).dialog("close"); 
          } 
          } 

     }); 
     $("#opener").click(function() { 
      //Show the div named dialog upon clicking of item id opener. 
      $("#dialog").dialog('open'); 

     }); 
    }); 

} 
} 

我能够在一个简单的确认（）Javascript框中实现这一点，但真的很喜欢Jquery对话框的样式和效果。

，即时通讯发送此信息是

process.php

<?php 
print_r($_GET); 
switch($_GET['id']) 
{ 
    case 1: 
     echo "number 1 was passed to dialog"; 
     break; 

    case 2: 
     echo "Number 2 was passed to dialog"; 
     break; 

    default: 
     echo "Unknown Dialog Value!!"; 


} 

任何人都可以请详细说明实现这一目标的最佳途径的页面？

非常感谢所有花时间阅读这篇长篇文章的人。

Answer 1

首先，将document.ready处理函数放入函数中是个不错的主意。 $(document).ready() {和$(function() {也是一样的东西，所以你有一个document.ready处理程序在document.ready处理程序，这是没有必要的。

重新安排你的代码看起来像这样：

$(document).ready() { 
    function showDialog(eventId) { 
     // Place your function logic here 
     $("#dialog").dialog({... 
    } 
} 

而且你希望你点击监听器是showDialog功能之外，但document.ready内。您现在的方式是，处理程序只会在showDialog运行一次后应用，因此您必须点击#opener两次以打开对话框。