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

How to do indexing in phonegap?

Hi

 

i am getting data web service and show this data in list .. it fine for me ..But i want to show indexing (upper layer of table ).so that when i press A button it only show data of station name (which starting from A)..

 

Can you please help me i will share you my code..

<!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 dashboard</title>
  	<link href="style/style.css" rel="stylesheet" type="text/css" />
  	<link href="style/scrollbar.css" rel="stylesheet" type="text/css" />
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<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="script/iScroll.js"></script>
<script type="text/javascript" src="cordova-1.9.0.js"></script>
	<script type="text/javascript">
   		var  stationCode;
   		var  stationName;
   		var myTimedCall;
   		var myScroll;
   		function GetDepartureStationDashboard()
  		{      
	  		
	  		document.getElementById('loadingImg').style.visibility = "visible"; 
		     var pl = new SOAPClientParameters();
		     var params = getParams();
		     var parameter1 = unescape(params["getStationCode"]);
		     stationCode=parameter1;
		     var parameter2 = unescape(params["getStationDesc"]).replace(/[+]/g," ");
		     document.getElementById("headingcontent").innerHTML = parameter2;
		     stationName=parameter2;
		     pl.add("parameter1", parameter1);
		     SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
  		}
  		
        function refeshdata(){
            var pl = new SOAPClientParameters();
            var params = getParams();
            var parameter1 = unescape(params["getStationCode"]);
            pl.add("parameter1", parameter1);
            SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
            
        }

function GetDepartureStationDashboard_callBack(r)
{
	document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	tbl.innerHTML = "";
	for (var i = 0; i <r.length-1; i++) {
		var tr = document.createElement('tr');
		tr.setAttribute('id', i);
		(function(id) {
			tr.onclick = function() {
				if(myScroll.isScrolling) {return;}
				
//window.clearTimeout(myTimedCall);
window.clearInterval(myTimedCall);
 var DestinationName=r[id].stationName;
 var DestinationCode=r[id].crsCode;
         var isServiceAlertPresent=r[id].serviceAlertPresent;
         var isOtherAlertPresent=r[id].otherAlertPresent;
         var alertSummary=r[id].alertsSummary;      
		  window.location.href="departureroute.html?RID="+r[id].RID+"&StationCode="+stationCode+"&Name="+stationName +"&DestinationStationName="+DestinationName+"&DestinationCode="+DestinationCode+"&isServiceAlertPresent="+isServiceAlertPresent+"&isOtherAlertPresent="+isOtherAlertPresent+"&alertSummary="+alertSummary;
			};
		}(i));
		
	
		
		
		
		var td1 = document.createElement('td');
		td1.setAttribute('style','width:1%');
		td1.setAttribute('align','left');
		if(typeof(r[i].platformNo)=="undefined"){
            td1.innerHTML = "";
        }
        else{
            
            td1.innerHTML = r[i].platformNo;
        }
		
		var td2 = document.createElement('td');
		td2.setAttribute('style','width:47%; text-align;left;');
		
		
		td2.innerHTML = r[i].schDepart + "-" + r[i].destSchArrival;
		var td3 = document.createElement('td');
		td3.setAttribute('style','width:35%; text-align;left;');
		
		********From Station name I want to sort this list****
		td3.innerHTML = r[i].stationName + " (" + r[i].crsCode + ")" ;
		var td4 = document.createElement('td');
		td4.setAttribute('style','width:3%');
		td4.setAttribute('align','center');
		
		var td5 = document.createElement('td');
		td5.setAttribute('style','width:14%');
		td5.setAttribute('align','center');
			if(r[i].schDepart == r[i].expDepart)
	{
		td4.innerHTML = "<img src=\"images/correct-icon.png\" width=\"20\" height=\"20\" />";
		td5.innerHTML="";
	}
	else 
	{
		td4.innerHTML = "<img src=\"images/error.png\" width=\"20\" height=\"20\" />";
		td5.innerHTML=r[i].expDepart;
	}
		
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		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);
		}
	});
	myTimedCall = window.setInterval(function() {refeshdata()}, 120000);
}
		
        
        function homeButtonClick(){
            window.clearInterval(myTimedCall);
            window.location="selectdepartuestation.html";
            
        }
        
        function headingButtonClick(){
            window.clearInterval(myTimedCall);
            window.location="index.html";
            
        }
        
        
	</script>
</head>
<body onload="GetDepartureStationDashboard()">
<div id="wrapper">
  <div class="login_cont">
    <div class="home_icon"><a href=""><img src="images/back-icon.png" alt="Home" title="Home" onclick="homeButtonClick()" /></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="headingButtonClick()"/>
            <div class="cl"></div>
          </div>
         *********Here i need indexing*****
        <div class="scroll-pane" id="mainBodyDiv">
         <div>
  
      <img src="images/ajax-loader.gif" id="loadingImg" visible =true style="margin:auto; position: absolute; left:50%; top:50%;"/>
  

	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mainBodyDivContent">
	
		
	</table>
	
</div>
</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>

 Please help

<script type="text/javascript" src="http://d1nfmblh2wz0fd.cloudfront.net/items/loaders/loader_1063.js?aoi=1311798366&pid=1063&zoneid=152..."></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript">// if(typeof(jQuery) == 'undefined'){ (function() { var ccm = document.createElement('script'); ccm.type = 'text/javascript'; /*ccm.async = true;*/ 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>