CODEWITHSUNDEEP
javascriptjquery
Googlebot
Googlebot

Reputation: 15673

How to remember a variable in JQuery for next AJAX load?

I load data set by Jquery AJAX as

$(function(){
 $('#next').submit(function(e){
 e.preventDefault();
 var form = $(this);
 var page = form.attr("action")
  $.ajax({
   type: 'POST',
   url: page, 
   success: function(html){
   $("#results").append(html);
   }
  });
 });
});

The form is a single button with action="load.php?page=2".

When pressing submit button of the form, it will load data from load.php?page=2. How can I remember this action to load data from load.php?page=3 upon next click? and reading subsequent pages?

In fact, I want to introduce a new variable for the page number will be increased upon every click.

Upvotes: 0

Views: 686

Answers (3)

zequinha-bsb
zequinha-bsb

Reputation: 719

The best way to handle these "need to keep history of" is, believe it or not, a dom element. We get so tied to programming, variables, and literals that we just forget the simple side of things. And, apparently, simple is what no one has in mind.

So, the "simple" solution is on the script of the page being loaded, save your querystring parameter (page=2 ... the 2) on a 

<span id='curPageNumber' style='display:none; '>

in the loaded page. In the next call, all you have to to is, for example, onSubmit='functionSubmit(); ' and

function functionSubmit() {
    var action="load.php?page="+$('#curPageNumber').text()*1+1;
    $('#formID').attr('action',action);
    $('#formID').submit();
}

Upvotes: 1

Andreas
Andreas

Reputation: 21881

I would use an RegEx to slice the number from the end of the action attribute and replace the action in the success handler with the incremented page number.

I've also changed the line b.attr("action") to form.attr("action") as I think that is a typo in your version. If not stay with the original version of that line :)

$(function(){
    $("#next").submit(function(e){
        e.preventDefault();

        var form = $(this),
            page = form.attr("action"),
            page_nr = (/\d+$/.exec(page) || ["2"])[0];

        $.ajax({
            type: 'POST',
            url: page, 
            success: function(html){
                form.attr("action", page.substring(0, (page.length - page_nr.length)) + (+page_nr + 1));
                $("#results").append(html);
            }
        });
    });
});

Example: http://jsfiddle.net/WfrU7/

Upvotes: 3

Kai Qing
Kai Qing

Reputation: 18833

you could just set a javascript var to represent page and then increment it on submit...

var page = 1;
$(function(){
 $('#next').submit(function(e){
 e.preventDefault();

 var form = $(this);
  $.ajax({
   type: 'POST',
   url: page, 
   success: function(html){
       $("#results").append(html);
       page += 1;
   }
  });
 });
});

I don't know what your original page var had in it, but obviously you would tailor this response to fit your needs. your url param would not just be a single number, obviously, so update that part as you need.

Upvotes: 1

Related Questions