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
New Contributor
autogebet
Posts: 9
Registered: ‎08-21-2011
My Device: Blackberry 9700
My Carrier: Telkomsel
Accepted Solution

Event Delegation Not Working in WebWorks

After trying many different approaches, I decided to post here hoping for enlightment on my issues. I am developing an application using WebWorks and jQuery Mobile. My environment is Eclipse with Torch 9800 (6.0.0.277) simulator.

 

I am trying to render a simple list view dynamically (generated from ajax call). I am using event delegation to detect which item clicked by user. This approach works well in my browsers (Chrome, Firefox), but fails in Blackberry simulator (also failed when I deployed to my device). The event handler just won't catch the click event.

 

I have simplified my code to isolate the problem. Here's the page from my index.html

<div data-role="page" id="pageMyRD" data-theme="e" data-transition="none">
  <div data-role="header">
     <h1 id="homename">My Reksadana</h1>
     <a href="#pageHome" data-rel="back" data-icon="back" data-transition="none" data-direction="reverse" class="ui-btn-left">Back</a>
  </div>

  <div id="pageMyRDcontent" data-role="content">
  </div>
</div>	

When #pageMyRD initialized (binding to "pagecreate"), it will replace the content of #pageMyRDcontent through ajax call. The content rendered from server as follow:

 

<ul id='myrd-container' data-role='listview'>
<li class='myrd-item' myrd-kode='A1' x-blackberry-focusable='true'>
   <a href='#'>
      <h1 class='ui-li-heading'>First product</h1>
   </a>
</li>
<li class='myrd-item' myrd-kode='A2' x-blackberry-focusable='true'>
   <a href='#'>
      <h1 class='ui-li-heading'>Second product</h1>
   </a>
</li>
</ul> 

The page renders nicely in simulator, user can move around the list view. Next, I tried to identify which item selected/clicked by user. To achieve this, I have tried event delegation and event bubbling techniques in the tutorial, works nicely in my desktop browser, but failed in the simulator.

 

Some of the binding I tried to make a simple trap of the event as follow:

$("#pageMyRD").live('pagecreate', function(event) {
   $(".myrd-item").live('click', function(event) {		
      alert('Clicked on item!');
   });
});
$("#pageMyRD").live('pagecreate', function(event) {
   $("li").live('click', function(event) {		
      alert('Clicked on item!');
   });
});

 I even tried to move the 'myrd-item' class to <a> element, but still no luck. It seems that the click event doesn't fires at all, or failed to bind to newly created elements.

 

However, I discover a strange behaviour. If you render the listview, you will see an arrow on the right side of each item. If you click precisely on the arrow, the event will fire (alert pops out). Using this approach, I manage to traverse the parent element until I reach the element with class "myrd-item". Although this is a fair workaround, but this approach applies only for touch devices. Users with touchpad/Trackball devices who scrolls and click an item sees no alert.

 

I'm looking forward for enlightment. Many thank you in advance for anyone who kindly review on this matter.

 

 

 

 

Adityo Hidayat, WebWorks Developer @ PT. Gamatechno Indonesia
Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Event Delegation Not Working in WebWorks

Have you tried the jQuery bind event?

 

$("#pageMyRD").live('pagecreate', function(event) {
   $(".myrd-item").bind('click', function(event) {		
      alert('Clicked on item!');
   });
});

 

Please use plain text.
New Contributor
autogebet
Posts: 9
Registered: ‎08-21-2011
My Device: Blackberry 9700
My Carrier: Telkomsel

Re: Event Delegation Not Working in WebWorks

Yes I have, same result as if using .live.
as in the jQuery reference, using .live() has the advantage for binding future elements.

Please kindly let me know if full source code is necessary. Thanks.
Adityo Hidayat, WebWorks Developer @ PT. Gamatechno Indonesia
Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Event Delegation Not Working in WebWorks

How about just this? I'm not at my workplace to try out the scenario you are having.

 

$("#pageMyRD").live('pagecreate', function(event) {
   $(".myrd-item").click(function() {		
      alert('Clicked on item!');
   });
});

 

 

Please use plain text.
New Contributor
autogebet
Posts: 9
Registered: ‎08-21-2011
My Device: Blackberry 9700
My Carrier: Telkomsel

Re: Event Delegation Not Working in WebWorks

Problem solved. The problem is caused by the behaviour of touch devices. in Torch, touch events will also fire mouse events. Previously I was trying to catch "click event" (a mouse event) by clicking on an item (not using the TouchPad, so this is a touch event). Instead of catching mouse and touch events separately (resulting multiple response/alert), the solution is to combine the handler for multiple events. Here's the code.

 

$("#pageMyRD").live('pagecreate', function(event) {
   $(".myrd-item").live('click tap', function(event) {		
      alert('Tapped and clicked on item!');
   });
});

 thanks Praveen Rajan for your kind assistance, hopefully soon I will be "Developer Level 1" also :smileyhappy:

Adityo Hidayat, WebWorks Developer @ PT. Gamatechno Indonesia
Please use plain text.
New Contributor
autogebet
Posts: 9
Registered: ‎08-21-2011
My Device: Blackberry 9700
My Carrier: Telkomsel

Re: Event Delegation Not Working in WebWorks

I want to update on this issue, I have canceled my previous post as a solution because I have a new findings. I have completed my application, all events (trackpad or touch) handled nicely in simulator.

 

However, when I sign and deployed my app to real device, things just not working as in simulator. Event handler failed to catch click and tap events from dynamically generated listview. I have tried in Torch and 9700 (upgraded to 6.0.0.462). The behaviour difference between simulator and real device quite frustrates me.

 

Anyone has insight or tips on this? Thanks

Adityo Hidayat, WebWorks Developer @ PT. Gamatechno Indonesia
Please use plain text.
New Contributor
autogebet
Posts: 9
Registered: ‎08-21-2011
My Device: Blackberry 9700
My Carrier: Telkomsel

Re: Event Delegation Not Working in WebWorks

I wanted to update on my recent findings. I have finally completed developing my WebWorks app, this time I'm using only jQuery (not jQuery Mobile). The result was satisfactory, I can say that WebWorks nicely support event delegation. My app runs nicely on device as it were in simulator.

 

And for closing remarks, I just wanted to share some of the app's screenshot:smileyhappy:

 

List of mutual funds

historical mutual fund performance

Adityo Hidayat, WebWorks Developer @ PT. Gamatechno Indonesia
Please use plain text.