0

我试图从内部关闭一个 Jquery 对话框，但它不起作用。

我已经使用了我能找到的所有关闭变体，但没有一个工作。

该对话框是从主页调用的。当我按下对话框上的提交按钮时，会发布一个表单（这一切都很好），但关闭事件不会触发。

        $(document).ready(function() {

            $("#eventForm").submit(function(e) {

                alert("HELLO");
                //Cancel the link behavior
                e.preventDefault();

                if(document.eventForm.title.value == ""){
                    alert("<?php echo $lang['titlemissing'] ?>");
                    return;
                }


                if(document.eventForm.activity.value == ""){
                    alert("<?php echo $lang['activitymissing'] ?>");
                    return;
                }

                var url = "calendar/eventsubmit.php<?php echo $qstr ?>";


                 $.post(
                 "calendar/eventsubmit.php<?php echo $qstr ?>",
                 $(this).serialize(),
                    function(data){
                          alert("closing");  
                           }   
                  );   
                  // NONE of the work ???
                  $(this).closest('.ui-dialog').dialog('close'); 
                  $(this).closest('#dialog').dialog('close');
                  $(this).closest('.ui-dialog-content').dialog('close');
                  $(this).dialog('destroy');
                  $(this).dialog('close');
                  $(this).closest('#dialog').close();
          $('#dialog').dialog('close');


            });
        });

DOM 确实包含 ui-dialog 和 ui-dialog-content 元素。

<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" role="dialog" aria-labelledby="ui-dialog-title-dialog" style="z-index: 1004; >
<div class="window ui-dialog-content ui-widget-content" id="dialog" style="min-height: 0px; width: auto; display: block; height: 105px;">

编辑

经过大量的调整，它现在可以工作了。重点是，我没有包含 jquery-custom css。相反，我使用了我自己的 css，其中还有一个 ui-dialog 元素。我不确定这是否是解决此问题的方法。但这是我最好的猜测。

这是最终代码。

<script>
        // submit the event (add, update)
        $(document).ready(function() {

            $("#eventForm").submit(function(e) {

                //Cancel the link behavior
                e.preventDefault();

                if(document.eventForm.title.value == ""){
                    alert("<?php echo $lang['titlemissing'] ?>");
                    return;
                }

                if(document.eventForm.activity != undefined){

                    if(document.eventForm.activity.value == ""){
                    alert("<?php echo $lang['activitymissing'] ?>");
                    return;
                    }
                }       

                 $.post(
                 "calendar/eventsubmit.php<?php echo $qstr ?>",
                 $(this).serialize()); 

                 //close current dialog
                $(this).closest('.ui-dialog-content').dialog('close');
                // show OK

                $("#dialog").load("calendar/actionsuccess.php", function(){
                        $('#dialog').dialog({
                        title : 'Success',
                        autoResize : true,
                        width: 'auto',
                        close: function(event, ui) { window.location.href = "calendar.php"; }
                        })
                    });

            });
        });
    </script>

谢谢，科恩

4

3 回答 3

1

试试这个它会触发对话框标题中的关闭按钮事件。

这对我来说很好，可以关闭对话框

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}
于 2014-09-12T04:27:34.627 回答
1

如果您将对话框关闭代码放在完成回调中：

function(data) {
    alert("closing");
    // .dialog('close') here  
}

然后this不再引用表单，它将是 jQuery 提供的任何上下文。

您应该创建原件的副本，this然后参考：

var form = this;
...

$.post(..., function(data) {
    ...
    $(form).closest('.ui-dialog-content').dialog('close');
});
于 2012-06-13T09:35:52.013 回答
0

你试过这个

$('.ui-dialog').hide();

于 2012-06-13T09:40:21.693 回答