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
Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Playbook & jQueryMobile: swipe and pass event data on generated HTML

  Hello,

 

My app (for PlayBook & using jQueryMobile) generates rows of data that each of them have "id"s in it.  I'd like to handle the swipe functionality on a per row basis which is not a problem, but I'm having issues figuring out how to pass the "id" of the particular row to the handler so that the handler knows which row we're dealing with.

 

Here's a narrowed down part of the code that replicates my issue, you can save it and run it on a HTML5 browser (tested on FF 4).  As you can see when you run it, swiping on any of the three rows will end up with an 'id' of 3.

 

If anyone has any ideas, I'd really apreciate it!

thanks

 

<html>
<head>
   <script src="http://code.jquery.com/jquery-1.5.js"></script>
   <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
   <script>
        function display()
        {
            var ele = document.getElementById("contents");
            var output = "Click on one of the below rows";
			for (var i = 0;i < 3; i++)
            {
                output += "<div class='uno'>swipe here, start by clicking on the first word in this row, id: " + i + "</div>";
            }
			output += "<BR><div class='dos'>click here to clear </div>";
			if (ele)
			{
				ele.innerHTML = output;
				$("#contents *").page();
			}
			$(".uno").bind("swipe", {id: i}, function(event)
			{
					var str = "( " + event.pageX + ", " + event.pageY + " )";
					$("span").text("Swipe happened, id: " + event.data.id);
			});

			$(".dos").bind("click", function(event)
			{
				$("span").text("cleared");
			});
		}
    </script>
    
</head>
<body onload="display();">
    <div data-role="page">
        <div id="contents">
          <div class="uno">click</div>
            <div class="dos"> Another</div>
        </div>
		<BR>Actions taken:<BR>
		<span>none so far</span>
    </div>
</body>
</html>

 

 

New Contributor
Posts: 2
Registered: ‎03-11-2011
My Device: N/A
My Carrier: N/A

Re: Playbook & jQueryMobile: swipe and pass event data on generated HTML

You can use jQuery.data() to tie data to an element

 

for (var i = 0;i < 3; i++){
	$('<div class="uno">swipe here, start by clicking on the first word in this row, id: '+i+'</div>').appendTo('#contents').data('uid',i);
}
$(".uno").bind("swipe", function(){
	var uid = $(this).data('uid');
	console.log('ID: ',uid);
})

 

 

Or you can just output the ID in an attrtibute

 

var output='',
	i;
for (i=0; i<3; i++){
	output += '<div class="uno" rel="'+i+'">swipe here, start by clicking on the first word in this row, id: '+i+'</div>';
}
$('#contents').append(output);
$(".uno").bind("swipe", function(){
	var uid = $(this).attr('rel');
	console.log('ID: ',uid);
})

 

Your code has a lot of fat that needs trimming, I suggest looking through the jQuery API and Mozilla MDC a bit more

 

Contributor
Posts: 37
Registered: ‎03-10-2011
My Device: Not Specified

Re: Playbook & jQueryMobile: swipe and pass event data on generated HTML

Thanks, this worked fine when I used it standalone (in FireFox - outside of PlayBook), but when I applied it to the PlayBook app, I just get 'undefined'.
Are you using this code within a PlayBook app and works fine? It can be a problem with my code, I'll take a detailed look

Are you using swipe events in your PB code? sometimes my handler gets called when I swipe but sometimes it doesn't seems that PB has detected the swipe gesture or it could be an issue with the sim? (using swiperight swipeleft)

Thanks