0

I have two examples. Please tell me why my variable help is not working as intended in this examples. I checked it is getting into the loop.

Result: undefined

function autopop(){
    var help;
    $.ajax({
        type : "POST",
        url : "/cgi-bin/my.pl",
        data : "action=autopop",
        dataType : "json",
        success : function(data) {
            for (var i = 0; i < data.length; i++) {
                help = "test";
            }
        }
    );

    $("#id").append(help);
}

Result: test

function autopop() {
    var help = "test";
    $.ajax({
        type : "POST",
        url : "/cgi-bin/my.pl",
        data : "action=autopop",
        dataType : "json",
        success : function(data) {
            for (var i = 0; i < data.length; i++) {
                help = "blub";
            }
        }
    );

    $("#id").append(help);
}

Please tell my why I can't access my var from within this ajax/loop combination and how I can change this fact.

eye
  • 450
  • 1
  • 4
  • 14
  • 2
    This is due to the asynchronous nature of an AJAX request, the same as the other 1,092,938,932,893 times this has been asked. – Rory McCrossan Oct 31 '13 at 13:17
  • @tymeJV has it right. The key is to remember that it is ASYNCHRONOUS. If you do not know what this means do some quick reading. – j0hnstew Oct 31 '13 at 13:19
  • 2
    I don't think there was a need to downvote this. At least he has put what he has tried and is asking for help. That is a lot better than the millions of other GIVE ME THE ANSWER posts. – Ashley Medway Oct 31 '13 at 13:22
  • Oh did not see your comments. I know what asynchonnous mean but I did not know jquery was asynchronous before. Thank you for the link above - I searched for this problem but didn't find a solution - because I did not know what to search for... – eye Oct 31 '13 at 13:31

3 Answers3

3

AJAX is asynchronous -- because of that, your .append statement is being hit before help is set. Include your append within the success method:

success : function(data) {
    for(var i = 0; i < data.length; i++){
        help="test";
    }
    $("#id").append(help);
}
tymeJV
  • 103,943
  • 14
  • 161
  • 157
  • Thanks for explanation - the append was just a possibility to test the result of the var in this example and has nothing to do with the problem... the problem is to fill a var in ajax success block. Do you know any way to wait for the block to finish? Or any other way to get this to work? – eye Oct 31 '13 at 13:23
  • Pass in a callback function to the function that calls the ajax, and pass whatever you want to that within the success block. As far as filling a var in the success block, you're already doing that. – tymeJV Oct 31 '13 at 13:24
1

I am guessing that based on your comments what you want to achieve is this...

success : function(data) {
    $("#id").append(data);
}

or

success : function(data) {
    help = data;
    doCallback();
}

With a doCallback method.

function doCallback() {
    alert(help);
}
Ashley Medway
  • 7,151
  • 7
  • 49
  • 71
  • No but thank you for your guess - please read comment below. The append was just the easiest way for me to test if something was written into the var. I need to set a variable in ajax success block. – eye Oct 31 '13 at 13:26
0

you don't get the expected result because your ajax call fires and execution continues and your code $("#id").append(help); executes before the code written in success that sets the help variable.

Surender
  • 757
  • 5
  • 12
  • Thank you very much for explanation. Now i know why it doesn't work - but how can I set a var in ajax success block for later use? – eye Oct 31 '13 at 13:27
  • Add code that you need to be executed after the call to success callback and it will be executed on success. Typically you will be using result returned by the call than the values that you set. – Surender Oct 31 '13 at 13:30