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

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: f开发者_运维问答unction(resultTags) {
                myTagList = resultTags;
                alert(myTagList[0]);

                setGlobalTags(myTagList);
            },

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

        setGlobalTags(myTagList);

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

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
}

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();
            }
        });


    });

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.