i am trying to alert the return value captured by the ajax request. The web method it is refering is returning a boolean value of true or false, and when i am trying to access it outside the ajax method it gives a message "undefined" :?

       <script type="text/javascript" language="javascript">

       $(document).ready(function () {
           var authInfo;

           $.ajax({
               type: "POST",
               url: "service.asmx/getAuthInfo",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   authInfo = msg.d;

               },


           });

           alert(authInfo);          

       });

    </script>

why is the alert(authInfo) giving me as "undefined" ?? Please help !

where does this piece of code fit on the above context ?

if(auhthInfo){

                        $(".ansitem").editable('FetchUpdate.aspx', {

                    style: 'background-color:inherit;',
                    type: 'textarea', 
                    indicator: '<img src="spinner.gif">',
                    event: 'dblclick',
                    onblur: 'submit', 
                    submitdata: function (value, settings) { 
                        return { orgval: value};
                        },

                   });


                   };

i am trying to alert the return value captured by the ajax request. The web method it is refering is returning a boolean value of true or false, and when i am trying to access it outside the ajax method it gives a message "undefined" :?

       <script type="text/javascript" language="javascript">

       $(document).ready(function () {
           var authInfo;

           $.ajax({
               type: "POST",
               url: "service.asmx/getAuthInfo",
               data: "{}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function (msg) {
                   authInfo = msg.d;

               },


           });

           alert(authInfo);          

       });

    </script>

why is the alert(authInfo) giving me as "undefined" ?? Please help !

where does this piece of code fit on the above context ?

if(auhthInfo){

                        $(".ansitem").editable('FetchUpdate.aspx', {

                    style: 'background-color:inherit;',
                    type: 'textarea', 
                    indicator: '<img src="spinner.gif">',
                    event: 'dblclick',
                    onblur: 'submit', 
                    submitdata: function (value, settings) { 
                        return { orgval: value};
                        },

                   });


                   };

• javascript
• jquery
• ajax

• I think you have an error on server side, check the response via firebug on FF or developer tools on chrome, it could be because of invalid json also, anyway you need to check what server outputs – haynar Commented Dec 12, 2011 at 18:50

6 Answers 6

Your "$.ajax()" call is asynchronous, and thus the results are not available until the response is returned from the server.

If you put your "alert()" inside the "success" callback, it should work (if the HTTP transaction works).

EDITED TO HANDLE YOUR NEW CODE:

<script type="text/javascript" language="javascript">
   $(document).ready(function () {
       var authInfo;
       $.ajax({
           type: "POST",
           url: "service.asmx/getAuthInfo",
           data: "{}",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (msg) {
               // alert(msg.d); // here it will work as it is only called when it succeeds.
               MyHanlder(msg);
           },
       });
       // alert(authInfo); // here authinfo has no value as the AJAX call may not have returned.
   });

   function MyHandler(msg) {
      if(msg.d){
           $(".ansitem").editable('FetchUpdate.aspx', {
               style: 'background-color:inherit;',
               type: 'textarea', 
               indicator: '<img src="spinner.gif">',
               event: 'dblclick',
               onblur: 'submit', 
               submitdata: function (value, settings) { return { orgval: value}; },
            });
       };
    }
</script>

The request and the response that you get via ajax calls are asynchronous. I think it is not possible to alert the value that you get in response at the end of ready function because you are not assured that you will be getting your response before the function pletes execution.

You are alerting the authInfo variable before the actual ajax call have returned. If you try this:

success:function(msg) {
   authInfo = msg.d;
   alert(authInfo);
}

I think you will get the correct result.

Because the AJAX call is done asynchronously, the alert does not have the value at the time of execution. If you place the alert inside the success function you should see the appropriate results. I also noticed you have an extra ma in the $.ajax parameters after the success function parameter.

It appears:

alert(authInfo);

Is running immediately when your document is ready.

However, the variable is not being initialized until after the AJAX call pletes.

Try moving the alert to:

$.ajax({
   type: "POST",
   url: "service.asmx/getAuthInfo",
   data: "{}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (msg) {
       authInfo = msg.d;
       alert(authInfo);
   },
});

If you need to do anything more plex with the value, you can try re-factoring the code into another function:

function onSuccess(msg)
{
   if(msg.d)
   {
      window.alert('The value is true!');
   }
   else
   {
      window.alert('The value is false!')
   }
}

$.ajax({
   type: "POST",
   url: "service.asmx/getAuthInfo",
   data: "{}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: onSuccess,
});