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
Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

   Hello,

 

I have to generate the contents of a dialog box on the fly (as I need to query the database for info first and then populate the dialog with it), but my problem is that the dialog box is only styled the first time it comes up.  In the example below, (if you don't mind building and running on your sim), you click on the "New Dialog" at the top right, take a look at the dialog, it is styled by jQueryMobile which is good.  Cancel out of it, and then click on the "New Dialog" button again and you'll see that the dialog is not styled at all.  I'm guessing that something is being cached somewhere, any ideas? or workarounds?

 

 

<html>
<head>
	<title> Test </title>
		<meta id="viewport" name="viewport" content="width=width=1024,height=600, initial-scale=1, user-scalable=no" />
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
	<link href="jquery.mobile1.0a3.css" rel="stylesheet" type="text/css" />
	<script src="jquery-1.5.min.js"></script>
	<script src="jquery.mobile1.0a3.js"></script>
	<script>
		function newDialog()
		{
			console.log('got here');
			var ele = document.getElementById("newDialog");
				var output = "<label for='txtMessage' class='text'>This, and the text box & button is 'styled' the first time, but not subsequent times</label>";
				output += "<textarea id='txtMessage' rows='1' cols='50'></textarea> <br/>";
				output += "<a href='#main' data-role='button' data-inline='true' data-rel='back'>Cancel</a>";
				if (ele)
				{
					ele.innerHTML = output;
					$('#newDialog').page();
				}
		}
	</script>
</head>

<body>
	<div data-role="page" id="main">
		<div data-role="header" data-position="inline" > <!--data-backbtn="false" -->
			<h1>Hola</h1>
			<a href="#newDialogPage" data-rel="dialog" data-transition="pop" data-icon="plus" class="ui-btn-right" onclick="newDialog()">New Dialog</a>
		</div>
	</div> <!-- /page main -->
	
	<!-- NEW dialog -->
	<div data-role="page" id="newDialogPage">
		<div data-role="header" data-position="inline"><h1>Dialog</h1></div>
		<div data-role="content" id="newDialog"></div>
	</div> <!-- /page newDialog -->

</body>
</html>

 

 

 

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

can anyone help me? is there a workaround or something?

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

Actually, this is happening to me even if it is not a dialog.  I can't believe no one out there is not generating sub pages/dialogs on the fly and not running into this issue.  Anyone?

Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

I wrote a tutorial on this a while back:

http://supportforums.blackberry.com/t5/Web-Development/HowTo-jQuery-Mobile-and-Dialogs/m-p/939749

give me some kudo's if it helps you out :smileyhappy:

and look at all the functionality including the function call from clicking the button in dialog

it removes the dialogs instance so you can recreate it again

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

hey levidehaan,

 

I had seen your post, great stuff BTW, but I'm not seeing what you mentioned about removing the dialogs instance so that it can be recreated again...can you be a bit more specific?

 

thanks for your help

Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

its the 

$('[data-url=addLabel]').dialog('close');

at the end of the function.

if this doesn't work you can also search the dom for the dialog as well.

$.mobile.pageContainer.find('[data-url=addLabel]').remove(); , use length to see if it exists first.

such as:

if($.mobile.pageContainer.find('[data-url=addLabel]').length > 1) {

    $.mobile.pageContainer.find('[data-url=addLabel]').remove(); 

}

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

Is not working for me.  I think the $('[data-url=addLabel]').dialog('close'); is not really doing anything.  I know it's getting called, but it doesn't close the dialog.

It could be that I have the bad reference, but I wrapped the dialog in a <div id='yy' data-url='addLabel'>, but nothing.

 

Do you have this code working fine on PlayBook?

 

It seems that on PB, if you have <A HREF="#addLabel"...> and don't have at least a blank <div id='addLabel'></div> and then generate it in the function of the onclick, I get "Error loading page"...

you have to have the blank div...but even so, it is not working for me ...darn...

Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

have you tried the example code i gave?

you dont need to have an empty div, but the href needs to have dialog set in the data-rel etc..

give my example code a try, as well you should probably make sure you apply the fix i posted as well. just look at my posts there is one about fixing jquery mobile etc..

but yes this works perfectly on both the older vm and on the new vm

 

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: PB & jQueryM: dialog box contents not styled a 2nd or subsquent times

Hey Levidehann,

 

I think I've narrowed down the problem.  If I call your code as the first thing in the function call, then it works fine.  The problem is that before I bring up the dialog, I have to get data from the database, so I pick up the info from the database that I need to present first, then write out the <div>.  When I do this, it doesn't work, it just hangs with "Loading" and i can see an error about "GET addLabel" in FireBug.

 

This is using your mod BTW.  Any idea?  Maybe I can write something like "loading" to the div first in the first function before getting the data from the database, and then write out the real info?  I'll give that a shot, let me know if you have any other ideas.

 

thanks