Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: JqueryMobile HTML Pages not Showing well on my BB Bold or Curve(Version 6 or 7) - It works fine on some of the Curves (Version 6)

Thanks a bunch. That clears up the rendering questions.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: JqueryMobile HTML Pages not Showing well on my BB Bold or Curve(Version 6 or 7) - It works fine on some of the Curves (Version 6)

Alright, so what we have here with my and agorilla's testing is:

 

My sample, which works on my device, does not work on agorilla's device. I also tested agorilla's website on my device and it all looked/worked fine. However agorilla's device does not render his website properly.

 

This points very heavily at a device-specific issue. That being said, agorilla notes that at one point, the rendering was working fine, and now it is not.

 

We'll keep that on the backburner, but I was wondering if you could check the following device software update site and, for your carrier, check if there are any new OS versions available:

http://us.blackberry.com/support/apps-and-software/desktop-and-device-download-sites.html

 

In the meantime, I'm going to put together a sample with PreloadJS. This will help verify whether it is:

1) A matter of the resources failing to load; or

2) A matter of the device simply failing to acknowledge the resources.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: JqueryMobile HTML Pages not Showing well on my BB Bold or Curve(Version 6 or 7) - It works fine on some of the Curves (Version 6)

Alright, I scrapped PreloadJS since it uses XHR and kept raising cross-domain errors, however I've put together one more sample agorilla. Can you please host and try the following code.

 

Disclaimer: I do not recommend this method of loading scripts in general. It is by no means a best practice. But what it does do is ensure that the jQuery Mobile script is loaded after the core jQuery script. The reason for this is that I was able to produce the issue in the specific case where jQuery Mobile gets loaded before core jQuery.

 

I did this using Web Inspector's resource loading panel.

 

In addition, agorilla, the way you have set up your <head> should load them in the correct order. However, if this script below works, then it points very likely at the fact that there is a race condition on your device, and the jQuery Mobile script is winning; however since core jQuery is not yet loaded, it bombs out and fails to format your content. It could be an OS/browser bug on that specific version which has a different meaning of synchronous script loading.

 

This is very much just a sanity check to rule out the race condition, in your specific case.

 

DOCTYPE html>
<html>
    <head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Page Title</title>
    </head>
	<body>
		<div data-role="page">
			<div data-role="header"><h1>Page One Header</h1></div>
			<div id="content" data-role="content"><p>Page One Content</p></div>
			<div data-role="footer"><h4>Page One Footer</h4></div>
		</div>
		<div data-role="page">
			<div data-role="header"><h1>Page Two Header</h1></div>
			<div data-role="content"><p>Page Two Content</p></div>
			<div data-role="footer"><h4>Page Two Footer</h4></div>
		</div>
		<div data-role="page">
			<div data-role="header"><h1>Page Three Header</h1></div>
			<div data-role="content"><p>Page Three Content</p></div>
			<div data-role="footer"><h4>Page Three Footer</h4></div>
		</div>

		<script type="text/javascript">
			/*global window, document, console, alert, $ */

			document.ready = function () {
				"use strict";
				var object;
				try {
					object = document.createElement("script");
					object.type = "text/javascript";
					object.src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js";
					document.body.appendChild(object);
				} catch (err) {
					alert("ready: " + err);
				}
			};

			function loaded() {
				"use strict";
				var object;
				try {
					window.removeEventListener("DOMContentLoaded", loaded, false);

					object = document.createElement("link");
					object.rel = "stylesheet";
					object.href = "http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css";
					document.body.appendChild(object);

					object = document.createElement("script");
					object.type = "text/javascript";
					object.src="http://code.jquery.com/jquery-1.7.1.min.js";
					document.body.appendChild(object);
				} catch (err) {
					alert('loaded: ' + err);
				}
			}

			window.addEventListener("DOMContentLoaded", loaded, false);
		</script>
	</body>
</html>

Again, while there is nothing dangerous about this script, it is far from best practices.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
New Contributor
Posts: 5
Registered: ‎07-25-2012
My Device: curve
My Carrier: claro

Re: JqueryMobile HTML Pages not Showing well on my BB Bold or Curve(Version 6 or 7) - It works fine on some of the Curves (Version 6)

What you say has lot of sense, but didnt work either. I started playing with cache, allowing or disallowing js, geolocation, images and stuff and at one moment for the first load worked again but it stop working instantly after that. So as you said i will try to update, and hope its somthing really particular from the phone i have.

 

Thank you 

Highlighted
Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: JqueryMobile HTML Pages not Showing well on my BB Bold or Curve(Version 6 or 7) - It works fine on some of the Curves (Version 6)

[ Edited ]

Thanks for the help testing here agorilla. In addition to yesterday's code, this morning I ran another test that:

1) Concatenated the core jQuery and jQuery Mobile JavaScript files into one custom JS file.

2) In that file, I inserted the core jQuery code first. Everything worked fine.

3) I modified the custom script file so that jQuery Mobile scripts appear before core jQuery scripts; and once again I saw the rendering issues.

 

It seems that this is absolutely one scenario that will cause problems. Though not necessarily the case in your situation, I would highly recommend, for the time being at least, to concatenate the JQ and JQM JS files into one, with JQ appearing first; this will for the time being remove this possibility as the cause.

 

That being said, the "temporary working" seems to strengthen "device side" in your case. If you can find a specific set of actions that allow it work even once, consistently, that might give us some insight. The most likely seems to be clearing the cache, but it's hard to say at this point. If you do go ahead with the upgrade, please let us know how it goes.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.