I have JavaScript using jQuery and AJAX which creates a dynamic array, which has some values used for AJAX request as below;

<script type="text/javascript">
var array = Array("y","y","x","y","y","y");
function updateBackground(cellId, titleId) {
    var i = 0;
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: Array(array[i], "testdata", $("#"+titleId).html())
        },
        success: function(response){
          $("#"+cellId).css("background-image", "url('pdfthumb/" + response + "')");
        }
    });
i++;
}
</script>

The script is suppose to submit values in the array in array[i] for each AJAX request. I made a variable var i which auto increments.. But the script is not working.. The script works well if array[i] is replaced by array[0] or array[1] etc..

How can I solve the syntax error?

I have JavaScript using jQuery and AJAX which creates a dynamic array, which has some values used for AJAX request as below;

<script type="text/javascript">
var array = Array("y","y","x","y","y","y");
function updateBackground(cellId, titleId) {
    var i = 0;
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: Array(array[i], "testdata", $("#"+titleId).html())
        },
        success: function(response){
          $("#"+cellId).css("background-image", "url('pdfthumb/" + response + "')");
        }
    });
i++;
}
</script>

The script is suppose to submit values in the array in array[i] for each AJAX request. I made a variable var i which auto increments.. But the script is not working.. The script works well if array[i] is replaced by array[0] or array[1] etc..

How can I solve the syntax error?

• javascript
• jquery
• ajax
• jquery-events

• What do you mean by not working ? What exactly is Happening ? – Neel Basu Commented Jun 11, 2011 at 16:07
• I think its due to closure. Try var i = 0; before the updateBackground function. – user405398 Commented Jun 12, 2011 at 16:15

5 Answers 5

Every time you call updateBackground() i = 0 (again). May be you must initialize i outside of the function.

What happens if i > array.length? And I would rename the variable.

You don't have an iterator. Your variable i gets set to 0 every time the function runs. The increment at the end is useless.

Maybe you need something like this?

var array = Array("y","y","x","y","y","y");
function updateBackground(cellId, titleId) {
    for( var i = 0; i < array.length; i++ ) {
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: {
              filename: Array(array[i], "<?php echo $dir; ?>", $("#"+titleId).html())
            },
            success: function(response){
              $("#"+cellId).css("background-image", "url('pdfthumb/" + response + "')");
            }
        });
    }
}

Each time you call updateBackground() function, the i variable is being reinitialized. It's just a local variable and as soon as the function finishes it's being destroyed by GC. You could do something like this:

var UpdateBackground = {
    array: [..],
    counter: 0,

    doUpdate: function(cellId, titleId) {
        // AJAX request

        this.counter++;
    }
};

UpdateBackground.doUpdate(1, 1);
UpdateBackground.doUpdate(1, 1);

I think that you should send the whole array maybe as a maseparated string and instead and make just one ajax request, because http-requests are expensive and change the server side code accordingly. And fetch the cellids as an array. If you think that you have a long list or a table it can be like a lot of requests. Do the stuff in client code and do the stuff in server code and keep the number of http-requests as few as possible.

And use the join method on the array.

    var arr = [ 'y', 'y' ]; 
    arr.join(','); 
// outputs y, y 

I fixed it... Thank you so much @Jed, @Pointy, @Crozin, and @Lord Vader for helping me to figure it out.... :)

I just take var i = 0; outside the loop.... above var array like;

var i = 0;
var array = Array("y","y","x","y","y","x");