javascript / jQuery variable problem (possibly caching issue)

Question

Standard AJAX query with jQuery:

var globalTitle = "";
var pages = ["a", "b", "c"];

for (var i = 0; i < pages.length; i++) {
    createpage(pages[i]);
}

function createpage(title) {
    globalTitle=title;
    console.log (globalTitle); //All looks good here

    $.ajax({
        url: "createpage.php?id=" + title,
        context: document.body,
        success: success
    });
}

The success() function uses globaltitle which is why I had to declare it global.

In the success() function though console.log (globalTitle); constantly gives me "a". It's like the variable is assigned but is then cached every time success() is called.

Happens in FF 4 and Chrome 8. Any thoughts?

Edit: Here's the success() function:

function success(text) {
    console.log (globalTitle); // always "a"

    var div1 = "<div id=\"" + globalTitle + "\">";
    var text = "<a href=\"javascript:createpage('" + globalTitle + "')\">Retry</a> " + +text;
    var div2 = "</div>";

    if ($("#" + globalTitle).length) {
        $("#" + globalTitle).html(text);
    } else {
        $("#ajax").append(div1+text+div2);
    }
}

how do you update the globalTitle looks like that should happen in your success method. Post that method and we should be able to help — Baz1nga
– Baz1nga, Commented Dec 28, 2010 at 5:50

PleaseStand · Accepted Answer · 2010-12-28 06:02:13Z

1

I would do something like this (the var xhr = and xhr.cpTitle bits are key to this working). This is because globalTitle is overwritten each time a page is requested (all before any response is received), so it will always have the value of what was requested last:

function createpage(title) {

    console.log(title);

    var xhr = $.ajax({
        method: "post",
        url: "createpage.php",
        data: {
            id: title
        },
        context: document.body,
        success: success
    });

    xhr.cpTitle = title;

}

function success(data, status, xhr) {
    console.log(xhr.cpTitle);
}

Or this (note that success() is inside createpage(), avoiding this problem in another way by creating a closure):

function createpage(title) {

    function success(data, status, xhr) {
        console.log(title);
    }

    console.log(title);

    $.ajax({
        method: "post",
        url: "createpage.php",
        data: {
            id: title
        },
        context: document.body,
        success: success
    });

}

edited Dec 28, 2010 at 6:02

answered Dec 28, 2010 at 5:56

PleaseStand

32.2k7 gold badges72 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bcoughlan Over a year ago

Tried the first solution, worked perfectly. Thank you so much. Still completely stumped as to the behaviour of my original code though.

keegan3d · Accepted Answer · 2010-12-28 05:57:38Z

1

The problem is that createpage is being called synchronously, but the success function will be called asynchronously so there is no guarantee what globaltitle will be set to when success runs. Try making globaltitle global to createpage instead of the entire script.

function createpage(title) {
    $.ajax({
        url: "createpage.php?id=" + title,
        context: document.body,
        success: function(data) {
            console.log(title);

            //you could call your success function here and pass it title
            success(title);   
        }
    });
}

answered Dec 28, 2010 at 5:57

keegan3d

11.4k10 gold badges57 silver badges78 bronze badges

1 Comment

bcoughlan Over a year ago

That was my first thought, but I tried using jquery with "async: false" so it makes one request at a time... same result. If I declare globaltitle in createpage(), success() can't find it

Collectives™ on Stack Overflow

javascript / jQuery variable problem (possibly caching issue)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related