Manipulating DOM using JavaScript on Blackberry phones
Question
Here is a snippet of code (from a much larger code) that doesn't work in Blackberry. I am manipulating DOM to insert a ul element dynamically.
I am testing on Blackberry 9700, OS 5.0. What I am doing is very basic, no brainer and works on other desktop browsers. I know JavaScript support on Blackberry is patchy - but this basic stuff?
Attached is the screen shot of the error I see. JavaScript reports that the function insertBefore doesn't exist. However, I have tested that it exists and works when I append directly to the body
document.body.insertBefore( newNode, sibling );
The code that doesn't work is :
<html>
<head>
<script type="text/javascript">
function toggle(){
_ul = document.getElementById('ul-list');
if( _ul )
{
document.body.removeChild( _ul );
}else
{
ul = document.createElement( "ul" );
ul.setAttribute('id','ul-list');
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("HTML") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("CSS") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("JavaScript") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("XML") );
ul.appendChild( li );
parent = document.getElementById('container');
sibling = document.getElementById('para');
try
{
func = parent.insertBefore;
if( !func )
{
alert( "Function doesn't exist!" );
}
parent.insertBefore( ul, sibling );
}catch( err )
{
alert( err );
}
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div id ="container">
<p id ="para" >Display this link list as a horizontal menu:</p>
<input type="button" name="Show Now!" value ="Toggle" onClick=" toggle();"/>
</div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2011-11-14 03:36:29
I confirm that this is a bug in implementation of DOM in Blackberry 5.0 (on devices 9000 and 9700).
The work around is to have the elements placed directly under body if they have to be dynamically inserted or removed. The code that works is:
<html>
<head>
<script type="text/javascript">
function toggle(){
_ul = document.getElementById('ul-list');
if( _ul )
{
document.body.removeChild( _ul );
}else
{
ul = document.createElement( "ul" );
ul.setAttribute('id','ul-list');
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("HTML") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("CSS") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("JavaScript") );
ul.appendChild( li );
li = document.createElement( 'li' );
li.appendChild( document.createTextNode("XML") );
ul.appendChild( li );
parent = document.body;
sibling = document.getElementById('para');
try
{
func = parent.insertBefore;
if( !func )
{
alert( "Function doesn't exist!" );
}
parent.insertBefore( ul, sibling );
}catch( err )
{
alert( err );
}
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<p id ="para" >Display this link list as a horizontal menu:</p>
<input type="button" name="Show Now!" value ="Toggle" onClick=" toggle();"/>
</body>
</html>
The change is the content is directly under body and not child of div "container". I believe this is not an issue in Blackberry 6.0+, where WebKit rendering engine is used. Will need to live with this buggy browser till the time they need not be supported.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.