Response title
This is preview!
Move this topic
Hi Folks!
I am using a single page template. When content gets loaded by ajax (default) and later on the menu is being opened again, the temp div gets removed and the old content is being showed again.
Any ideas whats wrong about my template?
Check: http://ininet.de using a mobile device
P.S. swiping left/right shows the menu.
after loading a page by ajax the swiping stucks as well...
THANK YOU!
I am using a single page template. When content gets loaded by ajax (default) and later on the menu is being opened again, the temp div gets removed and the old content is being showed again.
Any ideas whats wrong about my template?
Check: http://ininet.de using a mobile device
P.S. swiping left/right shows the menu.
after loading a page by ajax the swiping stucks as well...
THANK YOU!
1
Replies(16)
Looks to me like you are using id="menu" on all of your pages. This is a problem. You cannot duplicate IDs. Now you might say "But it's a different page". Doesn't matter, the JQM works it keeps everything in the DOM. You cannot duplicate IDs on ANY page in JQM. Your best bet is to use the class .menu. Check out this thread, a bit old but still relevant.
Thank you haga!
I changed #menu to .menu but no effect.
Reason: #menu is outside the data-role="page" and therefor it is not being dublicated (see firebug)...
:(
I changed #menu to .menu but no effect.
Reason: #menu is outside the data-role="page" and therefor it is not being dublicated (see firebug)...
:(
Leave a comment on haga0054's reply
Some further testing updates:
1. Load page
2. swipe left to right and click on a random link
3. PROBLEM: cant open menu again. WORKAROUND: swipe once left, than right again -> menu opens
1. Load page
2. Press button in left upper corner to open menu and click on a random link
3. Press button again to open menu PROBLEM: old content shows up again
1. Load page
2. swipe left to right and click on a random link
3. PROBLEM: cant open menu again. WORKAROUND: swipe once left, than right again -> menu opens
1. Load page
2. Press button in left upper corner to open menu and click on a random link
3. Press button again to open menu PROBLEM: old content shows up again
first problem solved:
when link is clicked, the menu status needs to be changed:
$(".menu a").click(function(e){ // when link in menu is clicked close menu; needed if ajax is being used
menu = false;
});
BUT:
the button in the left upper corner still does not work.
any solutions?
when link is clicked, the menu status needs to be changed:
$(".menu a").click(function(e){ // when link in menu is clicked close menu; needed if ajax is being used
menu = false;
});
BUT:
the button in the left upper corner still does not work.
any solutions?
I think it is because the whole page gets loaded again if you hit the button at the left top icon.
I tried e.preventDefault(); but no change...
I tried e.preventDefault(); but no change...
Leave a comment on boerner's reply
I can't reproduce your problem, and unclear what you mean by "temp div".
Only issue I see is that the highlighting of the menu choices doesn't work right.
Tested on Safari desktop with iPhone user agent set.
It's true, you can use an ID here if you want. Still, not a good habit to get into.
The menu is loaded on the first page only, before the <div data-role="page">. The first page always sticks in the DOM, so this is legit, and a good way to have some element available from any page of your site. It's just always there, just like the loading spinner.
Only issue I see is that the highlighting of the menu choices doesn't work right.
Tested on Safari desktop with iPhone user agent set.
It's true, you can use an ID here if you want. Still, not a good habit to get into.
The menu is loaded on the first page only, before the <div data-role="page">. The first page always sticks in the DOM, so this is legit, and a good way to have some element available from any page of your site. It's just always there, just like the loading spinner.
Yes, you are right. My bad.
To reproduce the Problem:
1. go on ininet.de
2. click the icon at the left top of the page
3. the menu appears
4. click webmail
5. webmail page loaded, menu disappears
6. click the icon at the left top of the page again
7. the menu appears BUT HERE THE PROBLEM : at the right hand site you can see the homepage again, not webmail as it should be because webmail was the last page loaded.
any ideas? THANKS.
1. go on ininet.de
2. click the icon at the left top of the page
3. the menu appears
4. click webmail
5. webmail page loaded, menu disappears
6. click the icon at the left top of the page again
7. the menu appears BUT HERE THE PROBLEM : at the right hand site you can see the homepage again, not webmail as it should be because webmail was the last page loaded.
any ideas? THANKS.
Leave a comment on watusiware's reply
Looks like you have some debugging ahead of you. I noticed when I put a breakpoint in your JS for show/hide menu button it ONLY gets executed for the first page. It is NOT being called when you click it on another page (Webmail). Try debugging.
You may want to change your code to
$(".showMenu").on("click", function(e){....
}
instead of
$("a.showMenu").click(function(e){...}I don't think it should make a difference but you never know...
Again you might need to debug, the JS is definitely not executing on other pages, otherwise the debug would have fired.
You are right. What seems to make the difference:
<a href="#">Menu</a> results in the circumstance that the button only gets fired once at the homepage and not on further pages.
<a href="/">Menu</a> results in the cirqumstance that the button gets fired allways, but after the menu opens again you see the initial page (the page on wich you entered the site) on the right hand site.
<a href="#">Menu</a> results in the circumstance that the button only gets fired once at the homepage and not on further pages.
<a href="/">Menu</a> results in the cirqumstance that the button gets fired allways, but after the menu opens again you see the initial page (the page on wich you entered the site) on the right hand site.
Leave a comment on haga0054's reply
This is because with href="/" you are going back. It may appear that the menu opens and the content div changes, but the menu never opens. The browser just goes back. The menu is never closed when leaving the main page, making it appear as though the menu opens.
Now I'm not sure why the JS isn't executing but you should be using href="#".
I would take my suggestion and try the .on("click"). It may be the answer you are looking for. You can always use vclick if you don't want the 300 ms delay.
Thanks.
I changed <a href="/"> to <a href="#"> and now use
$(".showMenu").on("click", function(e){ // click button to show/hide menu
...
});
but the button fires only once.. after the visit of a second page nothing the buton is dead.
I changed <a href="/"> to <a href="#"> and now use
$(".showMenu").on("click", function(e){ // click button to show/hide menu
...
});
but the button fires only once.. after the visit of a second page nothing the buton is dead.
Leave a comment on haga0054's reply
Hmm... I don't see the script changes. It appears that the event is only bound for the first page.
Try adding your code in this
- $(document).on("pageinit", function(e){
- Code for menu button
- });
See what happens then. I would think this would cause problems but give it a shot and see what happens. Might give me more of a hint.
EDIT: Also, I hate to say but you may want to try starting over. Copy the code as is now and maybe try removing the event handlers. For the class just simply try calling an alert to see if that works. Then continue and gradually build. I really am not sure why it wouldn't get executed on each page.
with this the button even does not fire at the homepage..
$("document").on("click", ".showMenu", function(e){....
}
did the job instead of
2.) on http://ininet.de/referenzen no pictures are being loaded
any ideas?
THANKS AGAIN!
did the job instead of
$(".showMenu").on("click", function(e){....
}
now if got 2 more problems to sort out:
1.) on http://ininet.de/webmail the inline link "hier anfordern" does not work. a message appears: "Error loading page"
now if got 2 more problems to sort out:
1.) on http://ininet.de/webmail the inline link "hier anfordern" does not work. a message appears: "Error loading page"
2.) on http://ininet.de/referenzen no pictures are being loaded
any ideas?
THANKS AGAIN!
Leave a comment on haga0054's reply
Glad to see you got it working - you're right, it should be $(document).on("click", ".showMenu", function(e){...}. My fault for giving you the wrong variant of .on.
- Change href to "/kontakt.html"
- Pictures are loading for me. Hmm.....
Leave a comment on haga0054's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to boerner's question
{"z24696139":[14737000003955394,14737000003955411,14737000003955401,14737000003955413,14737000003955427,14737000003955425,14737000003955431,14737000003955439,14737000003955443,14737000003955455],"z7664639":[14737000003958269],"z8535338":[14737000003958267,14737000003956703,14737000003956723,14737000003958305,14737000003957355,14737000003958719]}
Statistics
- 16 Replies
- 465 Views
- 0 Followers
