Response title
This is preview!
Move this topic
JQuery Mobile
in jQuery Mobile
•
5 years ago
Good evening, i recently built a JQuery divert page from the index.html page when the user is on a mobile / tablet etc.
Everything was okay, but suddenly the last pages, Shop, Photos and More do not connect when touched on my mobile.
I thought this maybe a Phone update, but I tested this concern on a Android and the same issue happens.
The page link is... www.soultrainradio.co.uk/bootstrap/mobile.html
Kind regards
Gary
1
Replies(5)
Re: JQuery Mobile
5 years ago
Pretty simple problem.
#page2, #page3, and #page4 are missing from your document! The buttons change to pages that don't exist.
Not sure what your intent here was. I see you used data-ajax='false' on all of your links. That is usually a sign of a misunderstanding of basic JQM principles and an attempted work-around.
It appears you intend this is a multi-page document. That means that ALL of the pages should be included. While I don't recommend ever using multi-page documents, they are OK for a small number of pages. But you cannot mix multi-page documents with single-page documents. Pick one.
I can guess that the data-ajax='false' was some attempt to mix multi-page with single-page. I see the document reloads when a button is pressed. (Which pretty-much wipes-away most of the reasons for using JQM in the first place.) But it does no good, since your server doesn't include the wanted page in the document. It just gives a document with pages 1 and 2 in all cases.
-----
I see another problem, as well, and don't understand why your site works at all. You load a second copy of jQuery. This will make the first copy of jQuery - and all of it's plugins (including JQM) inaccessible.
Load ONE copy of jQuery, and load it before you load JQM. (As you do... but you load another copy just before cycle2).
Maybe you just lucked-out don't have any custom code that calls JQM functions that is run after the second copy of jQuery is loaded.
Leave a comment on watusiware's reply
Re: JQuery Mobile
5 years ago
Thanks watusiware.
Apologises, I have deleted the data-ajax work around, someone told me that would work.
I was under the impression that multi-pages on one page was how JQuery could work.
A YouTube tutorial I watched, used the code <div data-role="page" data-theme="b" id="pagetwo"> for all pages.
Then having <a href="#pagetwo" data-role="button" data-inline="true" data-icon="calendar" ui-btn-b data-iconpos="left" data-mini="true">Tickets</a> in every footer on the #pages would work.
Would I only have one <a href="#pagetwo" data-role="button" data-inline="true" data-icon="calendar" ui-btn-b data-iconpos="left" data-mini="true">????</a>
What would be the best option.
Kind regards
Gary
Leave a comment on Gary Horne's reply
Re: JQuery Mobile
5 years ago
"A YouTube tutorial I watched, used the code <div data-role="page" data-theme="b" id="pagetwo"> for all pages."
That YouTube video is just plain wrong! Or perhaps you misunderstood it. Clearly, every page can't have the same ID.
Yes, multi-pages in one document can work. I don't recommend it, though. As I said, though, for just 5 small pages, it is OK. But you CANNOT then load some additional pages into the document - not without a lot of rigamarole.
(The reason I don't recommend it is that 5 pages sites, become 10 pages sites, and then become 100 page sites. At some point, it becomes impractical to put all of the pages in a single document.)
The fundamental problem is that pages 3, 4, and 5 are MISSING from your document. They are not there. You can't show a page that isn't there!
If you need to load pages 3, 4, 5 from separate files, then you CANNOT use a multi-page document. You can't (easily) put pages 1 and 2 in one document, and then pages 3,4,5 each in their own. And it's not worth the trouble to work-around. If you need to load SOME pages separately - from their own separate request to your server - load ALL pages from separate documents. This is what I recommend for MOST JQM sites.
Leave a comment on watusiware's reply
Leave a comment on Gary Horne's reply
Re: JQuery Mobile
5 years ago
Actually, I found your pages by using "view source".
But they are not in the DOM. I first used the inspection tools in Chrome to look at the DOM.
I presume you have some bad HTML markup, and the browser gave-up parsing before it hit pages 3, 4, 5.
Your site has MANY HTML errors. Check with a markup validation service:
I would suggest that you use an editor that can validate your HTML.
Most are probably things you can ignore. Some are obvious formatting errors. For example, you have some CSS classes where you forgot to include "class=" so they were seen as attributes instead of classes!
Error: Attribute ui-btn-b not allowed on element a at this point.
From line 107, column 7; to line 107, column 127
↩ <a href="#pagefive" data-role="button" data-inline="true" data-icon="plus" ui-btn-b data-iconpos="left" data-mini="true">More</
I assume you meant to write:
class='ui-btn-b'
You have unclosed tags!
Error: End tag for
bodyseen, but there were unclosed elements.From line 375, column 1; to line 375, column 7
</script>↩</body>↩</htmError: Unclosed element
div.From line 326, column 1; to line 326, column 51
four -->↩↩<div data-role="page" data-theme="b" id="pagefour">↩ <diError: Unclosed element
div.From line 287, column 1; to line 287, column 51
hree -->↩↩<div data-role="page" data-theme="b" id="pagefour">↩ <di
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 Gary Horne's question
Statistics
- 5 Replies
- 1659 Views
- 0 Followers