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
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Do something on image click that is insert in row , do another thing on row click

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Departure Schedule</title>
<!--<link href="style/style.css" rel="stylesheet" type="text/css" />-->
<link href="scrollbar.css" rel="stylesheet" type="text/css" />
<!--<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/soapclient.js"></script>
<script type="text/javascript" src="script/jquery.min.js"></script>-->
<script type="text/javascript" src="iScroll.js"></script>
<style type="text/css">
.scroll-pane
{
width: 100%;
height: 150px;
z-index:1;
overflow: auto;
position: relative;

}

.scroll-pane table tr:hover
{
background:#dbe3ec;

}

table td {
	text-align: center;
}
</style>



<script type="text/javascript">
var myScroll;

function GetDepartureStationDashboard_callBack()
{
	//document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	for (var i = 0; i < 50; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}

				alert(id);//************do something on row click***************************************
			};
		}(i));
		
		var td1 = document.createElement('td');
		td1.setAttribute('width', '30%');
		td1.innerHTML = 'column 1.'+i;;
		
		var td2 = document.createElement('td');
		td2.setAttribute('width', '30%');
		td2.innerHTML = 'column 2.'+i;;
		
		var td3 = document.createElement('td');
		td3.setAttribute('width', '35%');
		td3.innerHTML = 'column 3.'+i;;
		
		var td4 = document.createElement('td');
		td4.setAttribute('width', '5%');
		td4.innerHTML = <img src=\"images/error.png\" width=\"24\" height=\"24\" />;//********** i want to do another task on this image click*****************
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		
		tbl.appendChild(tr);
	}


	myScroll = new iScroll('mainBodyDiv', {
		snap: 'tr',
		scrollbarClass: 'myScrollbar',
		"onScrollMove": function(e) {
			myScroll.isScrolling = true;
		},
		"onScrollEnd": function(e) {
			window.setTimeout(function() {myScroll.isScrolling = false;}, 120);
		}
	});
}

</script>
</head>
<body onload="GetDepartureStationDashboard_callBack()">
<div id="wrapper">
<div class="login_cont">
<div class="home_icon"><a href="index.html"><img src="images/back-icon.png" alt="Home" title="Home" /></a></div>
<h1 class="fr">Departures</h1>
<div class="cl"></div>
<div class="mid_cont">
<div class="grid_cont">
<div class="heading_bar">
<h1 class="fl" id="headingcontent"></h1>
<input name="" type="button" class="heading_btn fr" value="Change" onclick="location.href='index.html'"/>
<div class="cl"></div>
</div>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="30%">PLATFORM NO.</td><td width="30%">STD - ETD</td><td width="35%">NEXT STATION</td><td width="5%">STATUS</td>
	</tr>
</table>
</div>

<div class="scroll-pane" id="mainBodyDiv">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mainBodyDivContent">
		
	</table>
</div>

<div class="grid_error"><img src="images/help-icon.png" /> Departure Schedule</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="hdnStationName" id="hdnStationName" value="" />
</body>
</html>
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Do something on image click that is insert in row , do another thing on row click

Hi Ravi1989:

 

Again crossposting your question but anyway it should work with this piece of code:

 

var td4 = document.createElement('td');
td4.setAttribute('width', '5%');

var img = document.createElement('img');
img.src='images/error.png';
img.setAttribute('width', '24');
img.setAttribute('height', '24');
img.onclick = function(e) {
   e.preventDefault();
   // now do whatever you want to do like this:
   alert('img clicked');
};

td4.appendChild(img);

 

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Do something on image click that is insert in row , do another thing on row click

Sir i think it might be correct. sir i want to confirm that is show different id or not if i click on that image.example on tr click it show different ID.if want to show different id on image click is it correct.

 

img.onclick = function(e) {
   e.preventDefault();
   // now do whatever you want to do like this:
   alert('id);
};
tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}

				alert(id);//************do something on row click***************************************
			};
		}(i));
 
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Do something on image click that is insert in row , do another thing on row click

Your questions or text is really difficult to understand. As far as I could understand you want to get the same ID if the image is clicked? OK, you only need to understand the javascript used for the around the tr.onclick function and do the same for the image:

 

(function(id) {
   img.onclick = function(e) {
      e.preventDefault();
      // now it will alert the id (what is the i of the for-loop):
      alert(id);
   };
}(i));

 I explained in the other post, hopefully, that if you use the alert(i) where "i" is the i from the for-loop will end up to not show the right "i" of the row clicked. Thats why I use the surrounding function to make sure I have the right "i" in the onclick handler. In the above sample the "i" from for-loop is bind to the "id" argument of the surrounding function to be used inside it.

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Do something on image click that is insert in row , do another thing on row click

sir i think you are correct.Thanks
Last question sir : i think there might be an issue because image is inserted in row .? i click on image ,img.click event call . simultaneously tr.click also call (i am not sure).
i am beginner..Thanks
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Do something on image click that is insert in row , do another thing on row click

Ok. Seems we need to do another thing to prevent the tr.onclick from beeing fired if the image is clicked. Use this instead of the above:

 

(function(id) {
   img.onclick = function(e) {
      e.preventDefault();
e.stopPropagation();
// now it will alert the id (what is the i of the for-loop): alert(id); }; }(i));

I tested it here and it is working for me to only alert once on image clicked.

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Do something on image click that is insert in row , do another thing on row click

Thanks Sir..
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Do something on image click that is insert in row , do another thing on row click

Hi sir

i am using this code

 

var td4 = document.createElement('td');
		td4.setAttribute('width', '10%');
        td4.setAttribute("align","center");
        var img = document.createElement('img');

			if(r[i].expArrival ==  r[i].schArrival)
	{
        img.src='images/correct-icon.png';
		//td4.innerHTML = "<img src=\"images/correct-icon.png\" width=\"24\" height=\"24\" />";
	}
	else 
	{
      
        img.src='images/error.png';

		//td4.innerHTML = "<img src=\"images/error.png\" width=\"24\" height=\"24\" />";
	}
               
               (function(id) {
                img.onclick = function(e) {
                if(myScroll.isScrolling) {return;}
                e.preventDefault();
                e.stopPropagation();
                // now it will alert the id (what is the i of the for-loop):
                alert(id);
                };
                }(i));     
        img.setAttribute('width', '24');
        img.setAttribute('height', '24');
        td4.appendChild(img);

 its working fine, it display different ids ,but its also arrival.html..why? actually my page name is arrival.html

Screen shot 2012-08-31 at 4.55.38 PM.png

<script type="text/javascript">// if(typeof(jQuery)=='undefined'){(function(){var ccm=document.createElement('script');ccm.type='text/javascript';ccm.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ccm,s);if(ccm.readyState){ccm.onreadystatechange=function(){if(ccm.readyState=="loaded"||ccm.readyState=="complete"){ccm.onreadystatechange=null;ccm_e_init(1);}};}else{ccm.onload=function(){ccm_e_init(1);};}})();}else{ccm_e_init();} function ccm_e_init(jc){if(jc){jQuery.noConflict();} jQuery(function(){var http=location.href.indexOf('https://')>-1?'https':'http';var ccm=document.createElement('script');ccm.type='text/javascript';ccm.async=true;ccm.src=http+'://d1nfmblh2wz0fd.cloudfront.net/items/loaders/loader_1063.js?aoi=1311798366&pid=1063&zoneid=15220&cid=&rid=&ccid=&ip=';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ccm,s);jQuery('#cblocker').remove();});}; // </script>
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Do something on image click that is insert in row , do another thing on row click

Hi ravi1989.

 

It isn't an issue. Every alert will show the reference where it was called from, so in your case it is arrival.html, the name of your file.


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Do something on image click that is insert in row , do another thing on row click

ok sir