closing the Jquery Dialog On form Submission

Question

$('#srch').click(function(e){
    if ($("#form").validationEngine({returnIsValid:true})) {
          $("#loader").dialog('open');
        $.ajax({
            type: "GET",
            url: "/cdr/abc.php",
            cache: false,
            data: $("#srch").serialize(),
            timeout: 5000,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //ajaxSubmitError(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data) {
                $('#submit-dialog').dialog('close');
            }
            }); 
            e.preventDefault();
    }


});

In The Above Function Iam Not able to navigate to the The Action (php) Page.and The Dialog runs Indefinitely and how should i close the dialog when The Form submits

Answer 1

In my model window I use an AJAX form with MVC, but the solution should work regardless of technology.

<% using (Ajax.BeginForm("Index", "Message", new AjaxOptions { OnBegin = "SubmitMessage", OnSuccess = "CloseDialog" }, new { @id = "Index-Message" })) { %>
    <input type="submit" value="Send" class="Button" />
<% } %>

Then I place this small function in the calling window.

    function CloseDialog() {
        $("#Modal").dialog("close");
    }

Answer 2

you could also close the dialog in the error event.

error: function (XMLHttpRequest, textStatus, errorThrown) {
    $('#submit-dialog').dialog('close');
},

Answer 3

You actually need something like this:

$('#srch').click(function(e){
        var $dialogContent = $("#form");                

        $dialogContent.dialog({
            modal: true,
            title: "Test",
            close: function() {
               $dialogContent.dialog("destroy");
               $dialogContent.hide();
            },
            buttons: {
                save : function() {
                    $.ajax({
                        type: "GET",
                        url: "/cdr/abc.php",
                        cache: false,
                        data: $("#srch").serialize(),
                        timeout: 5000,
                        error: function (XMLHttpRequest, textStatus, errorThrown) { //ajaxSubmitError(XMLHttpRequest, textStatus, errorThrown); },
                        success: function (data) {                              
                            $dialogContent.dialog("close");
                        }
                    });
                },
                cancel : function() {
                    $dialogContent.dialog("close");
              }
           }
        }).show();
    e.preventDefault(); 
}

Any validation you can do within the save function.

Answer 4

Next time you as a question, try some formatting like this...

$("#srch").click(function(e){ 
    if ($("#form").validationEngine({returnIsValid:true})) { 
        $("#loader").dialog('open'); 

        $.ajax({ 
            type: "GET", 
            url: "/cdr/abc.php", 
            cache: false, 
            data: $("#srch").serialize(), 
            timeout: 5000, 
            error: function (XMLHttpRequest, textStatus, errorThrown) { 
                ajaxSubmitError(XMLHttpRequest, textStatus, errorThrown);
            }, 
            success: function (data) { 
                $('#submit-dialog').dialog('close'); 
            } 
        }); 

        e.preventDefault(); 
    }
});