Response title
This is preview!
Move this topic
Persistent tooblars and Javascript problems
in jQuery Mobile
•
10 years ago
Hi everybody,
I write because I've a big problem:
I'm developing a web app that has 4 main pages....
I premise that I don't use a multi-page template.
Every page of the application is generated by php; one of these pages has some javascript code that allows the user to load new elements of a listview every time a "load more" button is clicked.
All worked since I decided to try persistent toolbars....
Now that the application has a persistent header and a persistent footer my javascript code sometimes dosn't work at all.... sometimes, for example, same elements of the listview are loaded twice when I click once.
So, the question is: "is there the possibility that my javascript code does not work because of there are persistent toolbars?....
Can the persistent toolbar interfere with my javascript code?
Thanks a lot
Luca
I write because I've a big problem:
I'm developing a web app that has 4 main pages....
I premise that I don't use a multi-page template.
Every page of the application is generated by php; one of these pages has some javascript code that allows the user to load new elements of a listview every time a "load more" button is clicked.
All worked since I decided to try persistent toolbars....
Now that the application has a persistent header and a persistent footer my javascript code sometimes dosn't work at all.... sometimes, for example, same elements of the listview are loaded twice when I click once.
So, the question is: "is there the possibility that my javascript code does not work because of there are persistent toolbars?....
Can the persistent toolbar interfere with my javascript code?
Thanks a lot
Luca
1
Replies(10)
Leave a comment on watusiware's reply
Re: Persistent tooblars and Javascript problems
10 years ago
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) :
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
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
Leave a comment on insidioso93's reply
Re: Persistent tooblars and Javascript problems
10 years ago
Please show content of <head>.
Please show HTML.
$("#li") looks suspicious. You have an ID called "li"? I don't recommend ever using IDs in JQM. If you use an ID, you need to insure that there is only a single use of the ID in your entire project.
Please show HTML.
$("#li") looks suspicious. You have an ID called "li"? I don't recommend ever using IDs in JQM. If you use an ID, you need to insure that there is only a single use of the ID in your entire project.
Leave a comment on watusiware's reply
Re: Persistent tooblars and Javascript problems
10 years ago
ok,
- <head>
<meta name="viewport" content="max-width=device-width , initial-scale=1">
<link rel="stylesheet" href="../theme/jquery-mobile-theme-050501-0/themes/jquery.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link href="../theme/CSS_custom/log.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
.ui-page-header-fixed { padding-top: 98px; }
.ui-page-footer-fixed { padding-bottom: 37px;}
</style>
</head>
No, I don't use an id... I followed this tutorial for the load more button... http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html ...
The php code fills the listview with 8 elements at time, the 9th elements of the list (so <li></li>) contains a link like this <a class="more" href="#" >Loadmore</a>....
When the user click on this last element of the list the ajax call asks to the php file new elements to load... new elements are appended to the listview and the old loadmore is replaced with a new one with a new id...
The id is based on the count variable...
What do you suggest instead of IDs?
The php code fills the listview with 8 elements at time, the 9th elements of the list (so <li></li>) contains a link like this <a class="more" href="#" >Loadmore</a>....
When the user click on this last element of the list the ajax call asks to the php file new elements to load... new elements are appended to the listview and the old loadmore is replaced with a new one with a new id...
The id is based on the count variable...
What do you suggest instead of IDs?
Leave a comment on insidioso93's reply
Re: Persistent tooblars and Javascript problems
10 years ago
I think that the problem is that my javascript code is loaded again
every time I back to the page through "back buttons" or through ajax
loading while the old code persists...
In this way, when I click on my link, 2 code runs and the effect is that some elements are loaded twice.
Maybe if I put my js code in an external file (linked in the head of my page) ...... I'll try
Have found any error in my js code or in the mechanism of the "load more elements" in general?
In this way, when I click on my link, 2 code runs and the effect is that some elements are loaded twice.
Maybe if I put my js code in an external file (linked in the head of my page) ...... I'll try
Have found any error in my js code or in the mechanism of the "load more elements" in general?
Re: Re: Persistent tooblars and Javascript problems
10 years ago
It's really hard to tell when you split the code like that. Can you post everything as one? Can you give us a link?
If you scripts are being loaded multiple times you need to read the scripting documentation for JQuery Mobile.
To answer your question before, don't use IDs. Instead of IDs use classes.
Leave a comment on insidioso93's reply
Re: Persistent tooblars and Javascript problems
10 years ago
I didn't notice that an incrementing value was being added to the ID.
This would be OK, then, as long as there would never be multiple copies of this page in the document.
You never did show just where the JS code is. Yes, it would be better to put the JS in a file loaded from <head>, that way you can be sure it will only be loaded once.
Read over my post on how to ask questions again. A lot of the back-and-forth can be avoided if you provide all the necessary information the first time.
This would be OK, then, as long as there would never be multiple copies of this page in the document.
You never did show just where the JS code is. Yes, it would be better to put the JS in a file loaded from <head>, that way you can be sure it will only be loaded once.
Read over my post on how to ask questions again. A lot of the back-and-forth can be avoided if you provide all the necessary information the first time.
Leave a comment on watusiware's reply
Re: Persistent tooblars and Javascript problems
10 years ago
Ok, I'll be more accurate.
But I can't show html code because it is generated every time by php....
My page is a normal page.. and the same is for the listiview...
I used them as Jquery Mobile's Doc says...
I think that the problem the management of my javascript code:
I tried to put it in an external file and link it in my page's head, I tried to put the entire code inside the head but....id dosn't work... it works just if I put the code inside the page <div>
.........
<script></script>
</page>
</body>
</html>
I read the documentation about scripting in jquery mobile...but I haven't found the solution.....
But I can't show html code because it is generated every time by php....
My page is a normal page.. and the same is for the listiview...
I used them as Jquery Mobile's Doc says...
I think that the problem the management of my javascript code:
I tried to put it in an external file and link it in my page's head, I tried to put the entire code inside the head but....id dosn't work... it works just if I put the code inside the page <div>
.........
<script></script>
</page>
</body>
</html>
I read the documentation about scripting in jquery mobile...but I haven't found the solution.....
Leave a comment on insidioso93's reply
Re: Persistent tooblars and Javascript problems
10 years ago
Ok, .... I read the documentation again... but I haven't understood where my code must be placed !!! I'm desperate ....
Really.... I don't know what to do...
Really.... I don't know what to do...
Leave a comment on insidioso93's reply
Re: Persistent tooblars and Javascript problems
10 years ago
Of course you can.But I can't show html code because it is generated every time by php....
You can use Web Inspector or Firebug, or simply "view source" in your browser.
Put your code in a JS file that you link from <head>.
Include the same <head> content on every page (except for the page title).
You'll probably want to put your code inside of a callback for a pageinit event.
Alternately, there is nothing wrong with putting the JS code in the page as you are now. Make sure to put it at the end of the page, not the beginning.
I don't know what more help anybody can give you without seeing a complete example.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to insidioso93's question
Statistics
- 10 Replies
- 3097 Views
- 0 Followers