Access javascript variable inside ajax success

Question

var flag = false; //True if checkbox is checked
$.ajax({
    ... //type, url, beforeSend, I'm not able to access flag here
    success: function(){
        // I'm not able to access flag here
    }
});

Inside ajax, if I try to access flag it says it is not defined. How can I use it inside ajax function?

Any Idea?

Both flag and ajax is body of a function. Nothing else is present inside that function.

because, flag will be out of scope once the ajax call triggers the success call back. — Rajaprabhu Aravindasamy, Jun 09 '15 at 14:04
just put the `var flag = false; ` inside the success function. — Akash Rajbanshi, Jun 09 '15 at 14:04
i don't want to use gloabl. How will it become out of scope? — Gibbs, Jun 09 '15 at 14:06
@GopsAB Because, ajax call will be executed asynchronously. If you still want to access that variable in success call back, then you have to make that call synchronous, by setting the `async` parameter `false` — Rajaprabhu Aravindasamy, Jun 09 '15 at 14:07
`$.ajax(success: function() {}.bind(this));` Would probably work. — 0xd, Jun 09 '15 at 14:09
@RajaprabhuAravindasamy No, `success` doesn't magically remove variable from context. Here the `flag` variable is even not accessible from ajax option so OP is setting it outside of ajax method scope$ — A. Wolff, Jun 09 '15 at 14:14
Where exactly are you defining flag? I did a test and it worked fine. Closures means that if `flag` and the `$.ajax` call are *at the same scope* then flag will be available (and it is). There's some missing code in your question... — freedomn-m, Jun 09 '15 at 14:15
I get the feeling this isn't your actual code. This should work fine http://jsfiddle.net/djgdggay/ — CodingIntrigue, Jun 09 '15 at 14:16
@freedomn-m flag and ajax is present inside a function. Nothing else is present inside that function — Gibbs, Jun 09 '15 at 14:16
`var flag = false; //True if checkbox is checked` sounds like you are setting it inside a change/click handler. Your question missing some context to make it understandable — A. Wolff, Jun 09 '15 at 14:17
@GopsAB You misunderstand me. I'm not saying this isn't *your own* code, I'm saying that the code you posted isn't representative of the problem you describe. — CodingIntrigue, Jun 09 '15 at 14:19
I also created a jsfiddle showing the code in the question working (with both true and false). https://jsfiddle.net/L45oagrv/ Can you generate a jsfiddle with it *not* working? — freedomn-m, Jun 09 '15 at 14:21
I have voted to close this question, 2more people vote to close this. thanks — Gibbs, Jun 09 '15 at 14:28

score 14 · Answer 1 · edited Sep 14 '20 at 08:36

You have access to the variable if you make it by reference. All objects in Javascript are referenced values, just the primitive values aren't (such as: int, string, bool, etc...)

So you can either declare your flag as an object:

var flag = {}; //use object to endure references.

$.ajax({
    ... //type, url, beforeSend, I'm not able to access flag here
    success: function(){
        console.log(flag) //you should have access
    }
});

Or force the success function to have the parameters you want:

var flag = true; //True if checkbox is checked

$.ajax({
    ... //type, url, beforeSend, I'm not able to access flag here
    success: function(flag){
        console.log(flag) //you should have access
    }.bind(this, flag) // Bind set first the function scope, and then the parameters. So success function will set to it's parameter array, `flag`
});

You don't need to set context of success callback here. OP commented `//type,url,beforeSend, I cannot able to access flag here` so this would be the same with `bind(this, flag)` — A. Wolff, Jun 09 '15 at 14:15
Can any of you guys help me out with this problem? https://stackoverflow.com/questions/49122972/hide-jquery-elements-in-an-ajax-function — TRS7, Mar 09 '18 at 21:11

score 0 · Answer 2 · answered Jun 09 '15 at 14:17

Here is one way. The beforeSend callback option gives you access to both the jqXHR object and the ajax settings object.

You won't be able to use caturl in the append of error, as it will not be in synch with the request throwing error.

 $.ajax({
    /* url, data ...& other opts*/
    beforeSend:function( jqXHR, settings){
        /* add url property and get value from settings (or from caturl)*/
         jqXHR.url= settings.url;
   },
   /* error to be deprecated in jQuery 1.8 , superseded by "fail" */
   error: function(jqXHR, , textStatus, error){
       var url=jqXHR.url;
     /* replace caturl with url in your append */ 
     $('#showdata').prepend("ERROR : '" + error + "' trying to access: " + url + "</br>");
   }

Access javascript variable inside ajax success

2 Answers2

Linked