Response title
This is preview!
Move this topic
jQuery Mobile Multiple Pages
in jQuery Mobile
•
6 months ago
I am writing a mobile app with jQuery Mobile and using the multiple pages layout. I have a splash page which displays at launch for 2 seconds. Additionally, I have 4 other pages all of which renders fine. When I add a 5th page, the full page content is displayed in a tiny square at the top of a blank (white) page and when I scroll the tiny square view to the end, I get this message: "The name area will be deleted from the design field. This cannot be undone".
Has anyone seen this behavior before? Any thoughts?
1
Replies(9)
Re: jQuery Mobile Multiple Pages
6 months ago
No.. Please read through this:
I can't even begin to figure out what the issue is.
Re: jQuery Mobile Multiple Pages
6 months ago
Didn't think anyone's a mind reader but I assumed I was clear enough. Guess I was not.
Here we go.
Assuming this is what I have in my multiple page app:
<html>
<head>...</head>
<body>
<div data-role="page" id="page1">...</div>
<div data-role="page" id="page2">...</div>
<div data-role="page" id="page3">...</div>
<div data-role="page" id="page4">...</div>
</body>
</html>
All 4 pages are working fine in my multiple page format. Meaning all the pages are in a single file and are accessed by a button linking to the next page. Ex. I can get to page2 using href="#page2" from page1.
The problem:
When I add a 5th page like this:
<div data-role="page" id="page5">...</div>
and link to page5 from page4, the browser simulator shows only a small window at the top of the page and not the full page. See the attached image. The tiny box at the top is what becomes of page5. On the right, you can see a short scroll bar. When I scroll to the bottom of that, I see the message: "The name area will be deleted from the design field. This cannot be undone".
Hope that helps you understand how to help me. -:).
Thanks
Attachments
- simulator.pngSize : 61.77 KB Download : 481
Leave a comment on haga0054's reply
Re: jQuery Mobile Multiple Pages
6 months ago
I guess I would have to respond with a few questions.
- I assume you mean you are inserting the page dynamically?
- Looks like you are using phonegap (Cordova), true?
- If you are adding a fifth page dynamically, please post how.
- If you are not adding it dynamically, have you tried to verify the HTML is correct?
- Can you reproduce on JSfiddle.net by chance?
Thank you.
Re: jQuery Mobile Multiple Pages
6 months ago
Response:
1 - I have a next button which goes to the page ("href="#page2").
2 - I am using jQuery Mobile
3 - See code below.
4 - See code below.
5 - I tried it on JSfiddle.net but since it does not have a jQuery Mobile option, I thought to place the code here:
This is basically my code minus the html, head and body tags and jQuery Mobile calls.
<!-- Splash page - Script call to display image -->
<div data-role="page" id="splash">
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Splash Page -->
<!-- ************************************************************************************************************************************************************************************************************** -->--
<!-- Login page - Display login image-->
<div data-role="page" id="login">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#welcome" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Login page -->
<!-- ************************************************************************************************************************************************************************************************************** -->
<!-- Welcome page - Displays welcome image -->
<div data-role="page" id="welcome">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#needs" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Welcome page -->
<!-- ************************************************************************************************************************************************************************************************************** -->
<!-- Needs page - Display needs image-->
<div data-role="page" id="-needs">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#nfrp" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Describe Need page -->
So here's what happens:
Splash page - loads fine
Login page - loads fine.
Welcome page - DOES NOT load properly. This is what looks like the image I attached earlier.
I'm using IBM Worklight (plugin for Eclipse) to develop and testing with a mobile simulator in Chrome.
Leave a comment on haga0054's reply
Re: jQuery Mobile Multiple Pages
6 months ago
This is basically my code minus the html, head and body tags and jQuery Mobile calls.
In other words: minus anything that would help us diagnose the problem...
The image you attached is equally worthless, as we can't see the error message. But you did give us the text, and it's not an error message that I can imagine - even in any parallel universe - has anything to do with jQuery Mobile, because the terminology used doesn't make sense in the context of JQM.
JQM doesn't have anything called a "name area" or a "design field".
And, so, it would be useful to see that error message exactly as it is shown.
I would like to know if it is rendered in "IBM Blue". Hint, hint.
Re: jQuery Mobile Multiple Pages
6 months ago
Here's the complete code as it stands right now:
<!DOCTYPE html>
<html>
<head>
<title>Memorial Builder</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/MemorialBuilder.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<!-- Splash page -->
<div data-role="page" id="splash">
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Splash Page -->
<!-- ************************************************************************************************************************************************************************************************************** -->--
<!-- Login page -->
<div data-role="page" id="login">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#welcome" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Login page -->
<!-- ************************************************************************************************************************************************************************************************************** -->
<!-- Welcome page -->
<div data-role="page" id="welcome">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#describe-need" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Welcome page -->
<!-- ************************************************************************************************************************************************************************************************************** -->
<!-- Describe Need page -->
<div data-role="page" id="describe-need">
<div data-role="header" data-theme="a">
<h1>THE PARK</h1>
<a href="#nfrp" data-role="button" data-mini="true" data-rel="dialog" data-transition="fade" class="ui-btn-right">Next</a>
</div><!-- /header -->
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
<!-- End Describe Need page -->
<script type="text/javascript" src="js/jQuery/jquery.js"></script>
<script type="text/javascript" src="js/myScript.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
<script type="text/javascript" src="js/jQuery/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/jQuery/jquery-ui-1.8.21.min.js"></script>
<script type="text/javascript" src="js/jQuery/jquery.ui.touch-punch.min.js"></script>
</body>
</html>
Here's the content on myScript.js
$('#splash').live('pageshow', function() {
var hideSplash = function() {
jQuery.mobile.changePage(jQuery("#login"));
};
setTimeout(hideSplash, 2000);
});
The other scripts can be accessed from any CDN out there...
I figured out what the "error" message was and it had nothing to do with jQuery Mobile (you were right...).
However, if you run this code as-is with jQuery Mobile, by the 3rd page, you get what the image shows.
You call it useless and I feel it is useless because its not what I want but its what shows up when I click next. The little dark square at the top is what becomes of the "#welcome" page. Everything is rendered in there...
Thanks for the help
Leave a comment on watusiware's reply
Re: jQuery Mobile Multiple Pages
6 months ago
Care to share just what the problem was? This forum is about sharing solutions, not just getting somebody to fix your problems for free.
I assume there is some server or native mobile platform involved, and that's where that message came from.
There are some other serious problems I noticed:
- Your custom CSS should be AFTER jquery.mobile.css, not before it. Otherwise, you can't override JQM styles, unless you use !important on every single rule.
- Your Javascript - or at least JQuery and jQuery Mobile, should be loaded in the <head> not in the body
I'd suggest reading at least the first few pages of the jQuery Mobile documentation.
I assume there is some server or native mobile platform involved, and that's where that message came from.
There are some other serious problems I noticed:
- Your custom CSS should be AFTER jquery.mobile.css, not before it. Otherwise, you can't override JQM styles, unless you use !important on every single rule.
- Your Javascript - or at least JQuery and jQuery Mobile, should be loaded in the <head> not in the body
I'd suggest reading at least the first few pages of the jQuery Mobile documentation.
Re: jQuery Mobile Multiple Pages
6 months ago
There was no problem, someone played a practical joke so my apologies if it came across as
getting somebody to fix your problems for freeThat said, thanks for the suggestions.
Leave a comment on watusiware's reply
Re: jQuery Mobile Multiple Pages
6 months ago
There was no problem, someone played a practical joke
Ah, like what we used to do in High School.
You'd have a friend distract somebody in the computer lab, and then you'd switch the order of the cards in their deck when they weren't looking...
(True story: IBM 1620. Punch cards.)
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 leaf301's question
Statistics
- 9 Replies
- 738 Views
- 0 Followers
