Web and WebWorks Development

[colforbin13]

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.

[astanley]

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.

[colforbin13]

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.

[colforbin13]

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.

[colforbin13]

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.

[tneil]

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

[colforbin13]

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.

[tneil]

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?

[colforbin13]

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.