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: 12
Registered: ‎01-17-2012
My Device: Bold 9900
My Carrier: Rogers

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)

I am still tracking this down. There are OS updates for your model available here http://vzw.smithmicro.com/blackberry/download.aspx
Make sure you backup Smiley Happy

You can also try splitting your JQM pages into separate HTML files.

So none of the JQM styles are applied?

Is jQuery loaded?
Can you do an alert on the jQuery ready event?
Twitter: @JsonScott
New Contributor
Posts: 9
Registered: ‎06-15-2012
My Device: Curve 9300
My Carrier: AT&T

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)

Hi Jason,
Will try and see if Jquery is working or not.The only thing with the software /browser updates is that we should be certain that it will work on all the BB models 6 and above. So that once we go in production, which has got a massive user base, every time we get an issue reported like this, we have one shop/stop solution for this.
I am really amazed that nobody else brought this issue up till date or there is something fishy with the phones we have.
Best and easiest test to prove it working/not working has been to acces JQM Tests site and see the styles broken where the other BB phone has absolutely no issues.
I still feel strongly that it's browser or webkit or an OS update.
Figured one more issue today, we have used MapQuest APIs to load up a page with maps onto it.On some of the good phones too, spinner goes on and on forever and maps never load.Have the GPS thing turned on, on the phone.
Any help or insights will be truly appreciated.
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)

Really similar problem here. The first time i went to my jquery mobile web site everything just load ok and jqm just rendered as it should, but i start navigating the site and sundenly jqm just got completely broken. Now not even jqm site renders the html, unfortunatly i dont have another bb device to test but this has similar specs than yours and is a CDMA one. Please let me know if you found somenthing.

 

My device specs (developer device, i just hate bb): BlackBerry 9330 Curve CDMA (v6.0.0.706, 4.4.0.560)

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)

agorilla, can you please provide the exact <head> contents of your website? Specifically I'm interested in the CSS and JS you are loading for jQuery and jQuery mobile?


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)

Of course! Anything i can do to help, this is exactly how it is. Look the head has a runat="server"  because is a .NET site.

 

<head runat="server"> 
<title>freddo</title>
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="viewport" content="maximum-scale=1.0" />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='apple-mobile-web-app-status-bar-style' content='black' />
<meta name='apple-touch-fullscreen' content='YES' />
<!-- 57 x 57 Android and iPhone icons -->
<link rel='apple-touch-icon' href='img/icons/icon57b.png' />
<link rel='apple-touch-icon' media='screen and (resolution: 163dpi)' href='img/icons/icon57b.png' />
<link rel='apple-touch-icon' media='screen and (resolution: 326dpi)' href='img/icons/icon114b.png' />
<link rel='apple-touch-icon' sizes='72x72' href='img/icons/icon72b.png' />
<link rel='apple-touch-icon' sizes='114x114' href='img/icons/icon114b.png' />
<link rel='apple-touch-icon' sizes='144x144' href='img/icons/icon144b.png' />
<link rel='apple-touch-icon-precomposed' href='img/icons/icon57b.png'/>
<!-- 57 x 57 Nokia icon -->
<link rel='shortcut icon' href='/img/icons/icon57.png' />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
<!-- iPhone SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-320x460.png' media='(device-width: 320px)' rel='apple-touch-startup-image' />
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-640x920.png' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' rel='apple-touch-startup-image' />
<!-- iPad (portrait) SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-768x1004.png' media='(device-width: 768px) and (orientation: portrait)' rel='apple-touch-startup-image' />
<!-- iPad (landscape) SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-748x1024.png' media='(device-width: 768px) and (orientation: landscape)' rel='apple-touch-startup-image' />
<!-- iPad (Retina, portrait) SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-1536x2008.png' media='(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)' rel='apple-touch-startup-image' />
<!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href='/img/splash/apple-touch-startup-image-1496x2048.png' media='(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)' rel='apple-touch-startup-image' />

<link rel="stylesheet" type="text/css" media="screen" href="css/clean.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/add2home.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/styles-mobile.css" />

<%--<link href="/css/jquery.mobile.custom.freddo.min.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<!-- localStorage para browsers viejos -->
<script type="text/javascript" src="js/localStorage.js"></script>
<script type="text/javascript" src="js/jquerymobile111.js"></script>
<!-- la api de gmaps frutea si se carga despues de jquery mobile -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var addToHomeConfig = {
touchIcon: true,
bottomOffset: 14
};
</script>
<script type="application/javascript" src="js/add2home.js" charset="utf-8"></script>
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');
</script>
<![endif]-->
</head>

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 agorilla. I just wanted to check whether you were linking to the latest remote versions, or whether you had a stable, local copy of the files. Based on the versioning, it would appear you are using a stable, local copy.

 

I was hoping you could elborate just a little more on:

sundenly jqm just got completely broken. Now not even jqm site renders the html

 

Do you mean that the JQM CSS isn't being applied, or no content at all is rendering?


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)

[ Edited ]

Could you try hosting the following index.html files and please provide a screenshot of the page that gets loaded?

 

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

		<title>Page Title</title>

		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head>
	<body>
		<div data-role="page">
			<div data-role="header"><h1>Page One Header</h1></div>
			<div 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>
	</body>
</html>

 

I tested this out on a device/OS combination that previously had issues and am unable to see any problems now. I just want to set a common baseline for testing here.


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)

Your welcome. Hard to say, because in the device i dont have a chance to look at the html, but i would easily say that the browser fails to load every js in the page because everything in the page that should look jquery mobile doesnt and the js methods that for example click events should handle doesnt work either. My stylesheet is been aplayed correctly but thats obviously because my stylsheet doesnt depend on any js rendering.
Hope it helps, whatever i can help you. just ask me.
If it helps i can pm you the url of the webpage. Sorry about my english.
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)

Sure thing, I'd be happy to test your page on my device.


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)

It looks like my site, like this.

 

 

asd