You are right, I'm so sorry...
Here a description of the problem better than the last one:
Jquery mobile version: jquery-1.7.1
So, I noticed the problem in this situation:
I have a page dynamically generated by php...
This page contains a listview of elements... This list is generated by directives of the php
algorithm.
The algorithm doesn't load all the elements of the listview...it show just 8 elements at a time.
I use the last element of the listview as a "loadmore" button.... When the button is clicked javascript code makes an ajax call to the php file itself with a parameter that indicates to the php file the range of elements that must be loaded to the listview... when the new elements are loaded I refresh the listview and the old "loadmore" button is replaced by a new one generated by the php file.
Well... the parameter passed, for now, is a simple number that increments every time the ajax call hit.
As I said the ajax call goes when the "loadmore" <li> is clicked... I noticed that sometimes, when I click on it, the code is repeat more times that once...
Here is my javascript code (I premise that I made it looking around the web and that I'm not a javascript expert) :
- img1 = new Image();
img1.src = "../theme/icons/reload.png"; //I load an img
var count = 0; //here the variable that tell to the php file the range of elements that must //be loaded
$('.more').live("click",function() //there I bind on the link of the last <li> "loadmore" which //has the class "more"
{
var old_count = count+""; //save the old count
$("#li"+old_count).html('<li><center><img src="../theme/icons/moreajax.gif" /></center></li>'); //here a load gif is showed
$.ajax({
type: "POST",
url: "mypage.php",
data: "range="+ count,
cache: false,
success: function(html){
- count++; //the ajax call hit and the range changes
$("#li"+old_count).remove(); //I remove the old loadmore <li> of //the list view
$(list).append(html).listview('refresh');//append new elements to the listview //(new load more <li> inclued) and refresh the listview
},
error: function(){
// error while calling
$("#li"+old_count).html('<li class="load-more" id="li'+count+'" ><a class=\"more\" id='+count+' ><center><img src="../theme/icons/reload.png" /></center></a></li>');- //if the ajax call dosn't hit the loadmore <li> of the listview is replaced with an error img and the //user can repeat the call clicking on it.
}
});
return false;
});
Here's the javascript code....
it seems that the code in the function that bind on the click of loadmore <li> is executed multiple times, as if the entire javascript code is loaded multiple times the page is loaded.I noticed that the problem repeats every time I return to the page in question through Jquery Ajax
transition. Ah, javascript code is inside the <page> div.
I hope I have provided sufficient details...
thanks in advance
Luca