jQuery Ajax success not being invoked

Question

Hi,

Here is my code,

$.ajax({
    type: "POST",
    url: action,
    data: params,
    success: function() {
        alert("Success");
    },
    error: function() {
        alert("error occurred");
    }  });

I have a form inside a modal dialog window, on submission i would like to stay inside the dialog rather than return to original window. I have solved this issue elsewhere by surrounding the contents of the dialog with a div, and then calling #div.load("some page") in the success portion.

However, for some reason on this page the success portion does not get executed at all, although the form submits correctly, the dialog closes and the request is resubmitted to the action url of the form. I have tried to make the request asynchronous but that did not help.

I cannot understand why the same code that works on another feature is not working here. Please let me know if you have any ideas.

Thanks, Natasha

Answer 1

Purely a guess, because there's not code enough to tell, but I would say that your ajax function is being triggered by an event that would ordinarily cause the form to post back to the server. Try returning false in the handler that generates the ajax request to stop the default event handling action.

$('input[type=submit]').click( function() {
     $.ajax( ... );
     return false;
});

If this is the case, then the ajax call is being made, but before the success handler can be invoked, the page unloads as a result of the post back.