Question

I’m having issues passing parameters/variables into the ajax() function.

The function below accepts two parameters. One is ‘element’, the success option of .ajax() uses, that works fine so no need to focus on that. The ‘tx’ is either a single value like ‘menu’ or a couple of values separated by a colon like this: “menu:categories:brands”

If there is only one value in ‘tx’ then only one AJAX request needs to be sent and that works fine. If there is more than one value in ‘tx’ the function split’s it using “:” is the delimiter and then passes offset[0] as the value of ‘tx’ into the AJAX request and then store’s the rest of the values in ‘x’.

What I’m having issues with is running this function recursively once the AJAX request is complete for the first value. The var ‘more’ stores a bool value if there is more values left to process or not. However, when I write in an if argument using ‘more == true’ into the success or complete option of .ajax() it doesn’t reflect the value stored in that variables, it always returns false.

Before some one answers, with “You should structure the function that calls this function to only pass a single value into that parameter,” lets suppose that this is an impossible venture that is outside the realm of my control.

I have no idea why this happening. I know it’s probably something very simple that I’m overlooking but I’ve been up for about 16 hours now and this issue has plagued me for at least half that time.

Any help here is appreciated. Here is the function:

function getContent(element, tx) {
    e = element
    modAmount = tx.split(':')
    if (modAmount.length > 1) {
        x = ''
        tx = modAmount[0]
        for (i=1;i<modAmount.length;i++) {
            x = x + modAmount[i]
            if (i != (modAmount.length)-1){
                x = x+":"
            }
        }
        more = true
    }
    else {
        more = false
        tx = modAmount[0]
    }
    $.ajax({  
        type: "POST",  
        url: "getModule.php",  
        data: "modName="+tx+"&DB=<?php echo DB ?>",  
        success: function(data){  
            if ($( element ).find('p').text() == "No Content"){
                $( element ).find('p').remove();
                $( element ).html("<div onclick='destroy(this)' id='destroy' class='ui-corner-all destroy' title='Remove Module'>"+data+"</div>")
            }
            else {
                $( element ).append("<div onclick='destroy(this)' id='destroy' class='ui-corner-all destroy' title='Remove Module'>"+data+"</div>");
            }
        },
        complete: function() {
            if (more == true) {alert(x)} // always returns false
        }
    });

}

Answer 1

There’s already one glaring error here: you’re not declaring your local variables using the var keyword. This means that there’s only one instance of any of those variables, in the global context.

I’m not sure if this is your problem, but it certainly seems like it could be. Consider the case where you call getContent “foo:bar”. The first call sets more to true, but then the second recursive call sets more back to false. When the first XmlHttpRequest finishes, the completion callback will see the value of false rather than the true you were expecting, since those two calls are sharing the same variable for more.

You should read up on how JavaScript/ECMAScript scoping works, and gain a solid understanding of how closures work in the language. This will prevent a lot of head-scratching in the future. Google around for writings by Douglas Crockford; that’s a good starting point.

tl;dr: define your local variables using the var keyword.