How can I alter an external variable from inside my AJAX?

Question

I keep on having these same two problems. I have been trying to use Remy Sharp's wonderful tagSuggest plugin, and it works great. Until I try to use an AJAX call to get tags from my database.

My setGlobalTags() works great, with my defined myTagList at the top of the function. What I want to do is set myTagList equal to the result from my AJAX. My problem is that I can neither call setGlobalTags() from inside my success or error functions, nor actually alter the original myTagList.

Also, I keep on having this other issue as well. I keep this code in my Master page, and my AJAX returns 'success' on almost every page. I only (and always) get the error alert when I navigate to a page that actually contains something of id="ParentTags". I don't see why this is happening, because my $('#ParentTags').tagSuggest(); is definitely after my AJAX call.

I realize that this is probably just some dumb conventions error, but I am new to this and I'm here to learn from you guys. Thanks in advance!

$(function() {
        var myTagList = ['test', 'testMore', 'testALot'];

        $.ajax({
            type: "POST",
            url: 'Admin/GetTagList',
            dataType: 'json',
            success: function(resultTags) {
                myTagList = resultTags;
                alert(myTagList[0]);

                setGlobalTags(myTagList);
            },

            error: function() { 
                alert('Error');
                setGlobalTags(myTagList);
            }
        });

        setGlobalTags(myTagList);

        $('#ParentTags').tagSuggest();
    });

Answer 1

Actually, your call to $('#ParentTags').tagSuggest(); will happen before the AJAX call. The $.ajax function returns immediately, before the AJAX call has finished and before the error or success functions have been called. So you need to move whatever you want to do after the AJAX call into the success/error function.

$(function() {
        $.ajax({
            type: "POST",
            url: 'Admin/GetTagList',
            dataType: 'json',
            success: function(resultTags) {
                setGlobalTags(resultTags);
                $('#ParentTags').tagSuggest();
            },

            error: function() { 
                //...
            }
        });
    });

---

For your second part of the question, try to see what response you are getting from the server to help track down the error:

error : function(xhr) {
    alert(xhr.status);
    alert(xhr.responseText);
    //you can use console.log instead of alert if using firebug
}

Answer 2

Check the kind of data you are passing from the server. If it is JSON array, you need to use eval or $.parseJSON to get the tags and set them to the global tags. So if you return an array, your code will be like this.

$(function() {
        var myTagList = ['test', 'testMore', 'testALot'];

        $.ajax({
            type: "POST",
            url: 'Admin/GetTagList',
            dataType: 'json',
            success: function(resultTags) {
                myTagList = eval(resultTags);
                alert(myTagList[0]);

                setGlobalTags(myTagList);

                $('#ParentTags').tagSuggest();
            },

            error: function() { 
                alert('Error');
                setGlobalTags(myTagList);

                $('#ParentTags').tagSuggest();
            }
        });


    });

Answer 3

Your first problem looks like, you have setGlobalTags defined in another scope. Maybe in some application object ? Whatsoever, you need to tell javascript in which scope the function can be found. You can either do that, by doing something like

var self = this;

within the object where setGlobalTags is defined. self should be a public variable so you can access it within your success event handler. The call

self.setGlobalTags(myTagList);

should work then.

Another way to "delegate" the scope is to use .proxy(). With .proxy() you can call a function and pass a specific context to it (which then is available within the newly created function. Example:

success: $.proxy(function(resultsTags){
    this.setGlobalTags(myTagList);
}), this);

This would pass the context of this into your event handler (actually it's a new function).

Your second problem, seems to be a common mistake. .ajax() creates an asynchronous function, so before $.ajax() finishes, setGlobalTags(myTagList) is called.

Answer 4

I used interjay's answer (the one I accepted) for the first half of my issue. To get my AJAX to run correctly on the page I needed, I simply changed the relative url from 'Admin/GetTagList' to 'GetTagList', because my page was already under the 'Admin' controller.