ASP.NET: how to commit postback only after client ajax is complete

Question

I have a button encoded as such:

<asp:Button ID="save_all_filt" runat="server" Text="All data for filtered subjects"
                ClientIDMode="Static" OnClientClick="a= saveAllFilt();  return a; "
                OnClick="save_all_filt_Click" />

saveAllFilt is a function that invokes usual JQuery ajax call. Something like this:

  function saveAllFilt() {
   jQuery.ajax({
    async: false,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    type: "POST",
    url: contentURL,
    data: dataarray,
    success: function (msg) {
        // Some processing here. ONLY WHEN IT IS DONE, I NEED TO HAVE POSTBACK.
    },
    error: function (data) {

    }
});         // end of ajax call.

}

I want such a thing: the onClick should proceed only after ajax call is complete. How I can do that?

Answer 1

You can remove the OnClick attribute from the button and return false in the OnClientClick attribute like:

<asp:Button ID="save_all_filt" runat="server" Text="All data for filtered subjects"
            ClientIDMode="Static" OnClientClick="saveAllFilt(); return false;" />

and set a hidden button with that OnClick attribute like:

<asp:Button ID="hdnButton" runat="server" Text="" Visible="False" 
            ClientIDMode="Static" OnClick="save_all_filt_Click" />

and in the success method of your ajax call click that button like:

success: function (msg) {
    // Some processing here. ONLY WHEN IT IS DONE, I NEED TO HAVE POSTBACK.
    $('#hdnButton').click();
}, 

Answer 2

it is quite easy. Call your postback method in success function. Chekout the following code.

change your markup

<asp:Button ID="save_all_filt" runat="server" Text="All data for filtered subjects"
ClientIDMode="Static" OnClientClick="a=saveAllFilt();  return false;"
OnClick="save_all_filt_Click" />

change your java script code

function saveAllFilt() {
   jQuery.ajax({
    async: false,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    type: "POST",
    url: contentURL,
    data: dataarray,
    success: function (msg) {
        // Some processing here.Now do the post postback
        <%=Page.ClientScript.GetPostBackEventReference(save_all_filt,"") %>

    },
    error: function (data) {

    }
});   

Your idea seems pretty strange to me.Why you are trying to call ajax before postback.

Answer 3

You're not far from getting it right.

Instead of:

<asp:Button ID="save_all_filt" runat="server" Text="All data for filtered subjects" ClientIDMode="Static" OnClientClick="a= saveAllFilt(); return a; " OnClick="save_all_filt_Click" />

Try:

<asp:Button ID="save_all_filt" runat="server" Text="All data for filtered subjects" ClientIDMode="Static" OnClientClick="return saveAllFilt()" OnClick="save_all_filt_Click" />

The difference is that instead of OnClientClick="a= saveAllFilt(); return a;" just do OnClientClick="return saveAllFilt()"

Answer 4

If return true is not working inside the ajax success function. use __postback fucntion inside the ajax success function.

this will commit postback only after the ajax call complete.

Answer 5

In the function call,

 OnClientClick="return saveAllFilt()";

In Ajax,

return true for if the ajax call is success and return false for every other cases.

Answer 6

Try to return true after your code in your .ajax() calls's success attribute. The priority is always this way :

• The client -side
• Server side

Only if the client returns true the server click will initiate.

function saveAllFilt() {
  jQuery.ajax({
     async: false,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    type: "POST",
    url: contentURL,
    data: dataarray,
    success: function (msg) {
       // Some processing here. ONLY WHEN IT IS DONE, I NEED TO HAVE POSTBACK.
       return true;
   },
   error: function (data) {
       return false;
   }
 });
}

Also, remove the onclick attribute - an non-performant attribute in HTML (in my opinion) and use jquery's on() .