jQuery Mobile HTML Display Errors

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 7 Views: 330

markkelly Aspiring developer Posts: 5 Reg: May 01, 2012 Sydney 2,900	confirm \| cancel 07/12/12 05:23 AM (13 years ago) jQuery Mobile HTML Display Errors Hi Everyone, I have been developing pages for my app using the jQuery framework and it is working well ... or so I thought! Testing the pages within a normal browser (firefox) on my computer or via my iPhone using Safari, all my code works. When I dump the HTML into my BUZZTOUCH page and view it via the simulator, it may start out displaying correctly, but quickly, the display changes. It looks as though the style sheet / js links stop working??? I have added the coding below for your information and some image grabs that may assist. Thanks for your help, cheers, Mark My Code: <p> <title>jQuery Mobile Docs - Lists with Thumbnails</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/docs/_assets/css/jqm-docs.css" rel="stylesheet" /> <script src="http://www.kings.edu.au/ais/app/jquery/js/jquery.js"></script> <script src="http://www.kings.edu.au/ais/app/jquery/docs/_assets/js/jqm-docs.js"></script> <script src="http://www.kings.edu.au/ais/app/jquery/js/jquery.mobile-1.1.0.js"></script> <body> <div data-role="page" class="type-interior"><!-- /header --> <div data-role="content"> <ul data-role="listview"> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/1.jpg" /> <h3>Broken Bells</h3> <p>Broken Bells</p> </a></li> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/2.jpg" /> <h3>Warning</h3> <p>Hot Chip</p> </a></li> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/3.jpg" /> <h3>Wolfgang Amadeus Phoenix</h3> <p>Phoenix</p> </a></li> </ul> </div><!-- /content --> <div data-role="footer" class="footer-docs" data-theme="c"> <p>© 2011-12 The King's School</p> </div> </div><!-- /page --> </body> Image Links: https://www.dropbox.com/sh/5b2fht4soqqprj3/57HKSakNg_ Title Comments Hi Everyone, I have been developing pages for my app using the jQuery framework and it is working well ... or so I thought! Testing the pages within a normal browser (firefox) on my computer or via my iPhone using Safari, all my code works. When I dump the HTML into my BUZZTOUCH page and view it via the simulator, it may start out displaying correctly, but quickly, the display changes. It looks as though the style sheet / js links stop working??? I have added the coding below for your information and some image grabs that may assist. Thanks for your help, cheers, Mark My Code: <p> <title>jQuery Mobile Docs - Lists with Thumbnails</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/docs/_assets/css/jqm-docs.css" rel="stylesheet" /> <script src="http://www.kings.edu.au/ais/app/jquery/js/jquery.js"></script> <script src="http://www.kings.edu.au/ais/app/jquery/docs/_assets/js/jqm-docs.js"></script> <script src="http://www.kings.edu.au/ais/app/jquery/js/jquery.mobile-1.1.0.js"></script> <body> <div data-role="page" class="type-interior"><!-- /header --> <div data-role="content"> <ul data-role="listview"> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/1.jpg" /> <h3>Broken Bells</h3> <p>Broken Bells</p> </a></li> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/2.jpg" /> <h3>Warning</h3> <p>Hot Chip</p> </a></li> <li><a href="index.html" data-transition="slide"> <img src="http://www.kings.edu.au/ais/app/jquery/docs/lists/images/3.jpg" /> <h3>Wolfgang Amadeus Phoenix</h3> <p>Phoenix</p> </a></li> </ul> </div><!-- /content --> <div data-role="footer" class="footer-docs" data-theme="c"> <p>© 2011-12 The King's School</p> </div> </div><!-- /page --> </body> Image Links: https://www.dropbox.com/sh/5b2fht4soqqprj3/57HKSakNg_

Stobe buzztouch Evangelist Posts: 1528 Reg: Mar 04, 2011 Fredericksburg,... 24,680	07/12/12 06:18 AM (13 years ago) is the compiler trying to re-compile the JS part of the code? In iOS, you have to tell xCode to "copy" versus "compile" any JS element of a html document. Comments is the compiler trying to re-compile the JS part of the code? In iOS, you have to tell xCode to "copy" versus "compile" any JS element of a html document.

Stobe buzztouch Evangelist Posts: 1528 Reg: Mar 04, 2011 Fredericksburg,... 24,680	07/12/12 06:19 AM (13 years ago) oh crap, I just noticed you're linking to the JS files, not including them. My above suggestion will probably not apply in that case. Comments oh crap, I just noticed you're linking to the JS files, not including them. My above suggestion will probably not apply in that case.

Known Apple Fan Posts: 83 Reg: Jan 07, 2012 Suttons Bay, Mi... 830	07/12/12 06:21 AM (13 years ago) Hi Mark- I don't know if this might be affecting it or not, but you've got your stylesheet in here twice and it might be stumping it up: <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> Cheryl Comments Hi Mark- I don't know if this might be affecting it or not, but you've got your stylesheet in here twice and it might be stumping it up: <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> <link href="http://www.kings.edu.au/ais/app/jquery/css/themes/default/jquery.mobile-1.1.0.css" rel="stylesheet" /> Cheryl

markkelly Aspiring developer Posts: 5 Reg: May 01, 2012 Sydney 2,900	07/12/12 06:30 AM (13 years ago) Good spot and thanks Cheryl, Fixed that but still no joy ... :o( Is there a way to force refresh on the HTML pages from within the simulator?? Just thinking it may be resolved but I am being served cached pages? I think that I read somewhere that you can force refresh from within Buzztouch and I am sure I have done that, but its late here in Aus and I can't be sure! :oP Thanks, Mark Comments Good spot and thanks Cheryl, Fixed that but still no joy ... :o( Is there a way to force refresh on the HTML pages from within the simulator?? Just thinking it may be resolved but I am being served cached pages? I think that I read somewhere that you can force refresh from within Buzztouch and I am sure I have done that, but its late here in Aus and I can't be sure! :oP Thanks, Mark

mrDavid BTMods.com Posts: 3936 Reg: May 21, 2011 San Diego, CA 51,910	07/12/12 07:54 AM (13 years ago) if you add the refresh button into the simulator, via advanced settings in your control panel, hit that button, it should serve a new copy. David buzztouchmods.com Comments if you add the refresh button into the simulator, via advanced settings in your control panel, hit that button, it should serve a new copy. David buzztouchmods.com

markkelly Aspiring developer Posts: 5 Reg: May 01, 2012 Sydney 2,900	07/14/12 02:46 AM (13 years ago) Well ... you are not going to believe this ... but ... I think I fixed it! Ok. So it works in the simulator and I've tested it at least 20 times. (You know the drill, you stumble across the solution, and then test it and test it again, because you can't believe it's right!!!) All I did, was view the page source (in a desktop browser), copy the source code and then paste this into my Custom HTML pages in Buzztouch. I know! I cannot explain why one method worked and another didn't, even though the code is the same. It may help someone else. Will wait to see if this is a complete fix or if the bug is on a temporary hiatus! Thanks everyone, Mark Comments Well ... you are not going to believe this ... but ... I think I fixed it! Ok. So it works in the simulator and I've tested it at least 20 times. (You know the drill, you stumble across the solution, and then test it and test it again, because you can't believe it's right!!!) All I did, was view the page source (in a desktop browser), copy the source code and then paste this into my Custom HTML pages in Buzztouch. I know! I cannot explain why one method worked and another didn't, even though the code is the same. It may help someone else. Will wait to see if this is a complete fix or if the bug is on a temporary hiatus! Thanks everyone, Mark

mrDavid BTMods.com Posts: 3936 Reg: May 21, 2011 San Diego, CA 51,910	07/14/12 08:00 AM (13 years ago) Awesome! Glad you found a solution, and thanks for posting it here! Cheers, David buzztouchmods.com Comments Awesome! Glad you found a solution, and thanks for posting it here! Cheers, David buzztouchmods.com

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.