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
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

bbUI.js canvas issues

I'm having an issue with bbUI.js in a Playbook/BB10 app using a canvas for drawing on top of some other elements.  It works fine, until I try to bring up my settings screen, then when I pop that screen off the stack or hit the Back button, I get a blank screen and an error in the Web Inspector console stating that the "canvas" element does not exist, so I can't manipulate it.  If I look at the source in Ripple, I can clearly see that nothing other than my JS file has been loaded to the DOM by bbUI.

 

Any ideas what might be going on?  Why does the screen render properly until I pop the "settings" screen off the stack?   If I instead push my main screen with the canvas onto the stack, it renders properly again, but then obviously my "Back" buttons all break from that point.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: bbUI.js canvas issues

Interesting, so the first/main page in your display stack contains the canvas, and when you push/pop a new screen, the canvas dissappears?

 

Does the main page have any "onload" events that may be being called again?  Curious if something is re-initializing your cavas.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: bbUI.js canvas issues

Well, technically my main page (main.html) is just a list of activities.  One of the activities called brings up the page (math/index.html) with the canvas.  The bb.init function has an "ondomready" call for this page to a function that attempts to init the canvas on a <div> with id="canvas", but that <div> does not exist anymore when the settings page is popped off the stack, and that's where I'm getting the error.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: bbUI.js canvas issues

I just tested the latest commit in the "font" branch of bbUI.js that has the reverse animations for popScreen(), and my issue has been cleared up.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: bbUI.js canvas issues

Well, I thought this was fixed, but now I'm seeing an issue with my "main" list page.  If I load up my first screen, push the settings screen on top of that, then pop off the settings screen, then the first screen, I start getting these errors:

 

Uncaught TypeError: Cannot call method 'removeChild' of null

 

and

 

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

 

You can see the full details in the attached screenshot.  If I look at the DOM, it appears as though the first app screen didn't get popped off the stack properly, as I still see the div listed in Web Inspector.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: bbUI.js canvas issues

Are you certain the id you are using on your divs is unique.. including the ones passed into pushScreen()

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: bbUI.js canvas issues

Yes, I just double-checked:

 

index.htm calls bb.pushScreen('main.html', 'main');

main.html calls bb.pushScreen('math/index.html', 'math');

math/index.html calls bb.pushScreen('math/settings.html', 'mathSettings');

 

The 'mathSettings' screen has a Title Bar with a 'Back' and a 'Save' button, the save button has a bb.popScreen(); at the end of it's onactionclick function, and the other screens use Action Bar 'Back' buttons to pop the screens off.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: bbUI.js canvas issues

In your ondomready are you doing a case/if statement to make sure that you are only running your code for the id of the screen that contains the canvas element?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
colforbin13
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800

Re: bbUI.js canvas issues

[ Edited ]
ondomready: function(element, id) {
	if (id == 'math') {
		initCards();
	}
	if (id == 'mathSettings') {
		initSettings();
	}
}

Above is my ondomready function that only calls the initCards() function for the 'math' screen, which is the screen that has the canvas.  I also tried adding the 'settings' screen onto another page, and the same thing happens, so it's not just the canvas causing the issue.

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.