Can you store an Ajax variable value from the previous request?

I have the following jQuery Ajax code, and it would seem (unless I've misunderstood the problem) that without defining the page variable within the $("#imgNum").change(function(){});, the ajax call following the function will not fire.

Since the page variable is set based on when a button is clicked (which fire's its own ajax call), I'm wondering if there is a way of setting page to be equal to the last value it was set at? Unless there is another way of saving this value to call on it, and refreshing it every time a certain function is performed?

The jQuery:

function loadData(page, value){
    loading_show();
    gallery_hide();                    
    $.ajax
    ({
        type: "GET",
        url: "new_arrivals_data.php",
        data: {page:page, imgs:value},
        success: function(msg) {
            gallery_show();
            $("#gallery_container").ajaxComplete(function(event, request, settings)
            {
                gallery_show();
                $("#gallery_container").html(msg);
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Tell the human that something broke.
        },
        complete: function() {
            // This is always called regardless of success or failure.
            loading_hide();
        }
    });
}
loadData(1);  // For first time page load default results
$('#gallery_container .pagination li.active').live('click',function(){
    var page = $(this).attr('p');
    loadData(page);
});           
$('#go_btn').live('click',function(){
    var page = parseInt($('.goto').val());
    var no_of_pages = parseInt($('.total').attr('a'));
    if(page != 0 && page <= no_of_pages){
        loadData(page);
    }else{
        alert('Enter a PAGE between 1 and '+no_of_pages);
        $('.goto').val("").focus();
        return false;
    }
});

$("#imgNum").change(function(){
    var sel = $(this);
    var value = sel.val();
//THIS IS WHERE I WANT TO DEFINE THE PAGE BASED ON IT'S MOST RECENT VALUE
    var page = ?;
    loadData(page, value);
})
//You should store the current selected option in开发者_如何学JAVA a cookie
//For the sake of the example i'll set the default permanently to 12
var imgNum_selected = 16;

//set the initial selected option and trigger the event
$("#imgNum [value='"+imgNum_selected+"']").prop("selected","selected").change();

Would this be possible to do by saving the current value in a cookie which is reserved whenever the value is changed? How do you store a value in a cookie, and then retrieve it?

---

It sounds like you have some state that you want to share across multiple functions. One way to share this state is with a global variable.

A similar, but more controlled way, is to take advantage of lexical scope. Create a function, and within that function's body, you create the shared variable. Functions defined within the lexical scope of that body can access that shared variable freely. Anyone outside of the lexical scope can't touch the variable directly.

For example:

var funcs = (function() {
    var sharedState = 0;

    var f1 = function() { 
        sharedState++;
    };

    var f2 = function() { return sharedState; };

    return { 'f1': f1, 'f2' : f2 };
}());

funcs.f1();
alert(funcs.f2());
funcs.f1();
alert(funcs.f2());

// sharedState = -20;  // should error out, because sharedState can't be
// accessed directly.

In your particular context, you can do something like:

(function() {
   var page;

   // ... rest of your code, but in your loadData function, assign to page.
}());

See: How to have function recall private variable between invocations for more information.

---

I solved this by echoing the PHP variable into the attribute of an HTML tag:

<b id='cur_page' cur_page='" . $cur_page . "'></b>

I then set the variable in jQuery as follows:

var page = $('#cur_page').attr('cur_page');

I'm not sure if this is the best way of doing it, but it works. Any thoughts?