0

内部からJqueryダイアログを閉じようとしていますが、機能しません。

私は見つけたすべてのクロージングバリアントを使用しましたが、どれも機能しません。

ダイアログはメインページから呼び出されます。ダイアログの送信ボタンを押すと、フォームが投稿されますが（これはすべて正常に機能します）、closeイベントは発生しません。

        $(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-customcssを含めなかったことです。代わりに、ui-dialog要素も含む独自のcssを使用しました。それがこの問題の解決策であるかどうかはわかりませんが。しかし、それは私の最善の推測です。

これが最終的なコードです。

<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 に答える