javascript - 无法从内部关闭 Jquery 对话框

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