Question

我是Jquery的新手，我正在尝试打开一个对话框，打开一个对话框，但我正在努力实现这一点，我现在已经搜索了3天，但我找到的每个帖子都来自这里，看起来很技术，几乎没有任何解释。

我的目标是从数据库输出行，并将行id分配给按钮，如此。

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

查看详细信息查看详细信息

我希望能够将eventID从此传递到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');

        });
    });

}
}

我能够在一个简单的confirm（）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两次才能打开对话框。

Jquery动态对话框

1 个答案: