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
}