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 plete. How I can do that?

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 plete. How I can do that?

• javascript
• jquery
• asp
• ajax

6 Answers 6

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();
}, 

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.

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()"

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

this will mit postback only after the ajax call plete.

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().

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.