How to update a value by jQuery AJAX

Question

I load content of a page by jQuery AJAX as

$(document).ready(function(){
 $('#next').click(function(event){
  $.ajax({
  url: "load.php?start="+$('#lastid').text(), 
   success: function(html){
   $("#results").append(html);
   $("#lastid").empty().load('html #start');
   }
  });
 });
});

In the current document, I have <div id="lastid"></div> and in the external php file <div id="start"></div>

The value for id="start" is updated from database, and it will be transferred to id="lastid". However, this code only works for FIRST click. For default <div id="lastid">1</div>, when clicking the button (id="more") it will read load.php?start=1 and updates the current document to <div id="lastid">11</div> (it's visible). But the second click will not load load.php?start=11

It seems that $('lastid') well reads the default value of <div id="lastid"></div>, but NOT when it has been updated by $("#lastid").empty().load('html #start')

How can I modify this code to work for subsequent clicks?

Sgoettschkes · Accepted Answer · 2011-11-24 13:29:49Z

3

Wow, what a mess! Let's clean up a bit :)

You need to get rid of the id, as an id has to be unique and if you load another div with id lastId into your site, jQuery will not know which id to get. If you have many divs, each containing the id, you can just read the last id by using ('div:last').text();

So your ajax would look like this:

$(document).ready(function(){
 $('#next').click(function(event){
  $.ajax({
   url: "load.php", 
   data: "start="+$('div:last').text()
   success: function(html){
     $("#results").append(html);
   }
  });
 });
});

I also don't know what you do with the last line in the success, as load should be used to load data from the server with ajax, what is what you do by using $.ajax(). Also load() takes at least an url as parameter, see here.

answered Nov 24, 2011 at 13:29

Sgoettschkes

13.2k5 gold badges62 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Googlebot Over a year ago

+1 for the mess I made ;) I used load() to parse data caught by ajax to get the value of start (which is updated in load.php upon every run). In your code, the value of last is constant, as it comes from load.php

Samy Zine · Accepted Answer · 2011-11-24 13:21:21Z

1

try .live() function instead of .click()

answered Nov 24, 2011 at 13:21

Samy Zine

412 bronze badges

Comments

Joe · Accepted Answer · 2011-11-24 14:12:54Z

Mate, What I see from you code is that you are attaching an event once the page is loaded. And this creates a static call with static values that don't get updated as you continue. My suggestions is to use a function that will feed an Id dynamically to your ajax call as follows:

$(document).ready(function(){
 $(document).on("click", '#next', function(event){
  $.ajax({
   url: buildurl(), 
   success: function(html){
   $("#results").append(html);
   $("#lastid").empty().load('html #start');
   }
  });
 });
});

function buildurl()
{
   return "load.php?start="+ $('#lastid').text();
}

This will force your event to always call this function and the function to get a fresh value from lastid. Regards

Manuel van Rijn · Accepted Answer · 2011-11-24 13:28:49Z

0

you have to change your success function because you have multiple #lastid when clicking twice.

try something like:

success: function(html){
    $("#lastid").removeAttr("id");  // remove's the id from #lastid
    $("#results").append(html);     // appends the new one
    $("#lastid").empty().load('html #start');
}

answered Nov 24, 2011 at 13:28

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to update a value by jQuery AJAX

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related