unable to close Jquery Dialog from inside
<p>I'm trying to close a Jquery Dialog from inside, but it doesn't work.</p>

<p>I have used all closing variants I could find but none work.</p>

<p>The dialog is called from a main page. When I press the submit button on the dialog a form is posted (this all works fine) but the close event does not fire.</p>

<pre><code>        $(document).ready(function() {

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

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

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


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

                var url = "calendar/eventsubmit.php&lt;?php echo $qstr ?&gt;";


                 $.post(
                 "calendar/eventsubmit.php&lt;?php echo $qstr ?&gt;",
                 $(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');


            });
        });
</code></pre>

<p>The DOM does contain the ui-dialog and ui-dialog-content elements.</p>

<pre><code>&lt;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; &gt;
&lt;div class="window ui-dialog-content ui-widget-content" id="dialog" style="min-height: 0px; width: auto; display: block; height: 105px;"&gt;
</code></pre>

<p><strong>EDIT</strong></p>

<p>After a lot of tweaking it works now. Point is, I did not include the jquery-custom css. Instead I used my own css with also a ui-dialog element in it. I am not sure though if that is the solution to this problem. But it is my best guess.</p>

<p>This is the final code.</p>

<pre><code>&lt;script&gt;
        // submit the event (add, update)
        $(document).ready(function() {

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

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

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

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

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

                 $.post(
                 "calendar/eventsubmit.php&lt;?php echo $qstr ?&gt;",
                 $(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"; }
                        })
                    });

            });
        });
    &lt;/script&gt;
</code></pre>

<p>Thanks,
Coen</p>
