How to call code-behind method from 'success' in ajax callback?

Question

How to modify below code to use 'success' to call testMethod() in code-behind ? I need to wait for return value from testMesthod() and process it.

$.ajax( { 

    url : 'myPage.aspx/testMethod', 
    type : "POST", 
    contentType : "application/json; charset=utf-8", 
    data : "{'name':'" + aNb + "'}", 
    dataType : "json"

 }).done(function() {
      alert("ok");
 }).fail(function() {
      alert("not ok");
 });

Above code does not work because somehow latest JQuery version (1.10.1) gets overwritten by 1.3.2.

Thank you

You have `[WebMethod]` on the method named `testMethod` in your code-behind? — Garrison Neely, Sep 09 '13 at 22:11

score 0 · Answer 1 · answered Sep 09 '13 at 22:38

You would need to pass the callback function to the function that wraps your $(ajax).

function getData(ajaxQuery, callBack){    
    var ajaxHREF = 'your url';
$.ajax({
    url: ajaxHREF,
    type: "post",
    data: ajaxQuery,         
    beforeSend: function ( xhr ) {
        xhr.overrideMimeType("application/json");
        },
    success: function(response, textStatus, jqXHR){             
            var jsonData = $.parseJSON(response);
        callBack (jsonData);
        },

However, a much better way of doing this is the global success event. It is better because you have all of the properties of the call available to you to enable dynamic processing of the results. Create the global success event inline = $(document).ajaxSuccess this gets called for all jquery ajax success events so you need to differentiate which calls apply to your specific handler (to each global handler).

$(document).ajaxSuccess(function(event, xhr, settings) {
    var query = settings.data;
    var mimeType = settings.mimeType;
    if (query.match(/ameaningfulvalueforthishandler/)){
       if(mimeType.match(/application\/json/)){
            var jsonData = $.parseJSON(xhr.responseText);
            }
       }
    }

Thank you, but do I use 'myPage.aspx/testMethod' in place of callback in function(getData(ajaxQuery, callback) ? testMethod is a code-behind method. — Karen Slon, Sep 10 '13 at 13:18
I need to call webmethod in code-behind: testMethod(). url will 'call' webmethod testMethod(), it's asynchronous, returns into 'success' section. But, I need to Wait for testMethod() to finish and return result and process it. So, how callback helps to wait/get result? function getData(ajaxQuery, callBack){ var ajaxHREF "myPage.aspx/testMethod";$.ajax({ url: ajaxHREF, type: "post", data: ajaxQuery, beforeSend: function ( xhr ) { xhr.overrideMimeType("application/json"); }, success: function(response, textStatus, jqXHR){ var jsonData = $.parseJSON(response); callBack (jsonData); });Thank you — Karen Slon, Sep 10 '13 at 15:02

score 0 · Answer 2 · answered Sep 10 '13 at 14:43

Thank for replies, but I still do not see how callbacl can help me. I need to call webmethod in code-behind: testMethod() Ajax call does it, url = "myPage.aspx/testMethod" will 'call' webmethod testMethod(), but it's asynchronous and returns quickly into 'success' section of ajax call. But, I need to Wait for testMethod() to finish processing, retrieve result returned by testMethod() and process it. Asynchronous ajax will return us into 'success' without waiting for testMethod() to finish, and we will not get any data in response. So, how callback helps me to achieve it?

function getData(ajaxQuery, callBack){

var ajaxHREF = "myPage.aspx/testMethod";

$.ajax({ url: ajaxHREF, type: "post", data: ajaxQuery,
beforeSend: function ( xhr ) { xhr.overrideMimeType("application/json"); }, success: function(response, textStatus, jqXHR){
var jsonData = $.parseJSON(response); callBack (jsonData); });

Thank you

score 0 · Answer 3 · edited May 23 '17 at 12:20

@Karen Slon - If I understand the question correctly, I think you need to conceptually separate the client side from the server side. The callback in .success/.done or global ajaxSuccess event enable your web page to initiate the request and keep on processing while the server side is processing your request 'myPage.aspx/testMethod'. When it completes successfully it returns to the success event. Now if testMethod does not return anything then you will find yourself in the success event event without a result. But you cannot get there unless web method testMethod has completed successfully and returned control. The .done event in your example only has alert("ok");. What makes you believe that the web method testMethod is not complete when the .done event occurs?

Look at these posts for better examples:

jQuery.ajax handling continue responses: "success:" vs ".done"?

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

http://api.jquery.com/category/deferred-object/

How to call code-behind method from 'success' in ajax callback?

3 Answers3