Global variable in ajax possible? Work around?

Question

Right now I have a website which uses PHP to generate a table from a large SQL database.

I want to add two buttons to my website which will use AJAX to update the table with new data. The table is all indexed, so all I need is to be able to submit an "offset" variable through my XMLHttpRequest to get the new data. The code I have for that is:

xmlhttp.open("GET","schedule_top.php?q="+offset, true);
xmlhttp.send();

Right now, my "next" button will give an offset of 3, and my "previous" button gives an offset of -3. The problem I have is if the user wants to click either button more than once. As the offset is set to 0 each time at function call, I cannot cycle beyond -3 and 3.

What should I be doing? My current AJAX code is below:

function loadXMLDoc(int) {
    var xmlhttp;
    var offset = 0;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {   
        // code for IE6, IE5
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('tobooth').innerHTML = xmlhttp.responseText;
        }
    }

    if (int == 1) {
        offset -= 3;
    } else {
        offset +=3;
   }

    xmlhttp.open("GET","schedule_top.php?q="+offset, true);
    xmlhttp.send();
}

Answer 1

I don't answer your question directly, but I can suggest another approach.

You can create simple fields in which you will contain new offset. Or you can store offset directly on elements next and prev, e.g.

<a href='#' id='0' class='goPrev'>Previous</a>

and

<a href='#' id='3' class='goNext'>Next</a>

Default offset is zero. For next button offset will be 3, for previous null (and user can't click on prev button).

When user will click next button, you will do your ajax request and update both fields. goNext field will have offset 6 and previous will have offset 0.

When user will click next button again, you will do your ajax request again and update both fields again. goNext field will have offset 9 and previous will have offset 3.

Etc etc etc.

Also, you can store data in hidden inputs.

Hope, this will help.