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
Developer
Posts: 135
Registered: ‎09-25-2012
My Device: Dev Alpha
My Carrier: Rogers

BBUI.js - PillBox manipulation

Hi,

 

Trying to use Javascript to dynamically set which one is selected when loading a page:

 

HTML part:

 

	<div data-bb-type="pill-buttons">
		<div id="Pill1" data-bb-type="pill-button" onclick="F1();">Option 1</div>
		<div id="Pill2" data-bb-type="pill-button" onclick="F2();">Option 2</div>
	</div>

 Javascript part:

var defaultPill = document.getElementById("Pill1");
defaultPill.setAttribute("data-bb-selected", true);	

I was hoping to use this to set which Pillbox is active (only one shown in above example).

 

It didn't work. The only other way I am thinking to try is using onscreenready to dynamically create those elements after the page load.

 

Is that the only way?

 

Thanks.

Developer
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: BBUI.js - PillBox manipulation

Where did you put the javascript code?  Inline or in a separate file?  You can do it using the ondomready and an external js file.

 

So my index.html carries this code after the bb.init:

 

ondomready: function (element, id) {
	if (id == "profile") {
		doRecallProfile();
    }
}

 the profile.html page has a script just below the screen tag:

 

<div data-bb-type="screen" data-bb-effect="slide-left">
<script id="js_profile" type="text/javascript" src="js/profile.js"></script>

 and the js there has the functionality I want to manipulate the page.  My code for calling the profile page looks like this:

 

onclick="bb.pushScreen('profile.html', 'profile');"

Inside an image list of course.  Note the 'profile' id given to the page.  Maybe this will help you.  Also use the web inspector to determine if there are any errors.

 

If it helped you, click like. Smiley Happy
Developer
Posts: 135
Registered: ‎09-25-2012
My Device: Dev Alpha
My Carrier: Rogers

Re: BBUI.js - PillBox manipulation

My javascript code is in a separate file but it is referenced from the index page.

 

Also how did you manipulate the selected PillBox? It looks like you try to build it dynamically (when called from ondomready). Is there any way to manipulate it by trying to set an attribute?

Developer
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: BBUI.js - PillBox manipulation

Actually I don't build anything on that page.  For the profile page that code gets the saved profile info from localstorage and places it into the text inputs.

 

What I'm saying is that your structure should be something like this:

 

index.html -> inserts menu.html (bbui.js style)

 

menu.html has an image list which has a menu for profile.html

 

profile.html has the javascript attached to it.  When this page is called the id of 'profile' is "fired" (code snippet of ondomready) which calls the function sitting inside the profile.js.  THAT function does whatever you want it to do and it works on the profile page which is loaded.

 

If it helped you, click like. Smiley Happy
Highlighted
Developer
Posts: 135
Registered: ‎09-25-2012
My Device: Dev Alpha
My Carrier: Rogers

Re: BBUI.js - PillBox manipulation

The problem I am having isn't with triggering the Javascript on the screen. I am able to get that done. It is with manipulating the PillBox element (the title of my thread).

 

I can't seem to have a good way to have one option selected via Javascript, either upon load or by dynamically generated.

 

The best result I got was triggering it via ondomready. I have a Javascript on the page to generate the pillbox using:

 

document.getElementById('pbox').innerHTML = '<div data-bb-type="pill-buttons"><div data-bb-type="pill-button" onclick="switch(1);">Option 1</div><div data-bb-selected="true" data-bb-type="pill-button" onclick="switch(2);">Option 2</div></div>'; 

 The text shows but the button doesn't appear, but I can click on each option triggering the switch.

 

Any more ideas? Thanks.