Here is the code that works well for me. I need to execute two different server-side functions, and they can't run at the same time as I have separated them.
- Default.aspx/AddCart
- btnUpdate Click Event
The issue I'm facing is that the alert box pops up and the loading div (#overlay) disappears before the btnUpdate Click Event completes. I don't want the alert message box to appear and I want the loading div to stay visible until the Click Event is fully completed.
$("#overlay").show();
$.ajax({
type: "POST",
url: "Default.aspx/AddCart",
data: "{id: " + selectValue + ", qty:" + qq + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
document.getElementById("<%= btnUpdate.ClientID %>").click();
alert("Added to Shopping Cart !");
$("#overlay").hide();
},
error: function (r) {
alert(r.responseText);
$("#overlay").hide();
},
failure: function (r) {
alert(r.responseText);
$("#overlay").hide();
}
});