I seem to have a huge issue with the BlackBerry Torch 9800 webkit browser. That browser support HTML5 and javascript. The look of a web page developed for mobile device in HTML 5 looks the same for the iPhone, Android, and the Torch. But functionality wise, the Torch really sucks when it comes to the javascript events that cross-fire for some reason. All the other mobile browsers and desktop browsers that support HTML5 seem to work without any issues. At first, I thought it was the jQuery javascript framework I was using. So, I switched to a much ligher version with XUI and I still get the same event cross-firing. Here's what I mean (using jQuery 1.4.x or jQuery 1.5 or XUI 2.0): (The following is using both jQuery 1.5 (for document ready) and XUI objects and event models)
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8">
<meta name=”HandheldFriendly” content=”true” />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="viewport" content="user-scalable=no, width=device-width" />
...
<script type="text/javascript" src="../Scripts/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../Scripts/xui-bb-2.0.0.min.js"></script>
</head>
<body>
<form ... >
<div style="width: 100%;">
<label>Dropdown List 1</label><br />
<select id="m_ddl1" style="width: 100%;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<br />
<div style="width: 100%;">
<label>Dropdown List 2</label><br />
<select id="m_ddl2" style="width: 100%;">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
<option value="d">Option D</option>
</select>
</div>
<br />
<asp:LinkButton runat="server" id="m_goButton" CssClass="button disabled" Enabled="false" ClientIDMode="Static">Go</asp:LinkButton>
<script type="text/javascript">
$(document).ready(function()
{ var pageRun = new PageFunctionality();
pageRun.Initialize();
});
function PageFunctionality()
{ this.Option1 = x$("#m_ddl1");
this.Option2 = x$("#m_ddl2");
this.Button = x$("#m_goButton");
this.Link = x$("#m_link");
}
PageFunctionality.prototype.Initialize = function()
{ var me = this;
me.Option2.attr("disabled", "disabled");
me.Option1.on("change", function()
{ me.EnableButton(me.Button, false);
me.Option2.attr("disabled", "");
alert("DD1 Changed");
});
me.Option2.on("change", function()
{ me.EnableButton(me.Button, true);
alert("DD2 Tapped");
});
}
PageFunctionality.prototype.EnableButton = function(objButton, isEnable)
{ var me = this;
if(isEnable)
{ x$(objButton)
.on("click", function()
{ me.Option2.attr("disabled", "disabled");
me.EnableButton(me.Button, false);
alert("Button Tapped");
})
.removeClass("disabled");
}
else
{ x$(objButton)
.un("click")
.addClass("disabled");
}
}
</script>
</form>
</body>
</html>
What happens in that code in the BlackBerry Torch is that once the dropdown list 1 is selected and a change is made, clicking anywhere on the screen or button will result in the onchange event of dropdown list event firing again. This goes for all other objects with events tied to it. Also, on the BlackBerry, it seems that when the dropdown list is disabled, the list can be clicked to show the list.
I finally decided to use the jQuery Mobile version 1.0 alpha 2 framework. It resolves a lot of the javascript and dropdown issues for the BlackBerry, but then it introduced a tonne of other issues with embedded scripts and page redirections. So, I'd like to try and resolve this issue with the event cross-firing with jQuery or XUI for use on the BlackBerry. Much appreciate anyone's help on this.
