无法从内部关闭Jquery Dialog

Question

我正试图从内部关闭一个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>

谢谢，科恩

Answer 1

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

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

那么this不再是指形式，它将是jQuery提供的任何上下文。

您应该创建副本原件this ，然后指的是：

var form = this;
...

$.post(..., function(data) {
    ...
    $(form).closest('.ui-dialog-content').dialog('close');
});

Answer 2

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

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

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

Answer 3

你试过这个吗？

$（ 'UI的对话。'）隐藏（）。