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

How to auto update or refresh page after two second

Hi 

I want to auto  update or refresh page after two seconds . i get web service response , i want to update data from server .

can you do some help.

?

I wil share you my code.

 

<script type="text/javascript">
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;
pl.add("parameter1", parameter1);
SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
}

function GetDepartureStationDashboard_callBack(r)
{
'**********************r is Respone*****************

}
</script>
<body onload="GetDepartureStationDashboard()">
</body>

 

 

I want to auto refresh after 2 second..

 

Thanks

Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to auto update or refresh page after two second

First off all define a global variable just after the script tag and before the function definition:

 

<script type="text/javascript">
   ...
   var myTimedCall;
   ...

To make a function call after 2 sec. you can do something like this:

 

myTimedCall = window.setTimeout(function() {/* you code to be called here */}, 2000);

 If you want to call a function already defined with no arguments, like you "GetDepartureStationDashboard" function you can do this:

 

myTimedCall = window.setTimeout(function() {GetDepartureStationDashboard, 2000);

And, if you want to call something in an interval all 2 sec. you can do this:

 

myTimedCall = window.setInterval(function() {/* you code to be called here */}, 2000);

I would recommend to use the first or second approach using the setTimeout at the end of your Web Service request, when all the data is available. Then you can call again after 2 seconds.

 

In both situations but mainly when using interval you are able to cancel using those things

 

// when using setTimeout
window.clearTimeout(myTimedCall);

// when using setInterval
window.clearInterval(myTimedCall);

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
Developer
Posts: 134
Registered: ‎08-03-2011
My Device: torch, Z10
My Carrier: Vodafone, Airtel

Re: How to auto update or refresh page after two second

HI 

 

Try this

 

location.reload();

 

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;
pl.add("parameter1", parameter1);
SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
}
var t=setTimeout(GetDepartureStationDashboard_callBack,2000)
function GetDepartureStationDashboard_callBack(r)
{
'**********************r is Respone*****************
location.reload();
}
</script>
<body onload="GetDepartureStationDashboard()">
</body>

 

After getting response it will reload current page.

-----------------------------------------------------------------------
"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
-----------------------------------------------------------------------
Developer
Posts: 134
Registered: ‎08-03-2011
My Device: torch, Z10
My Carrier: Vodafone, Airtel

Re: How to auto update or refresh page after two second

if u really want to load page after some time u can use 

var t=setTimeout(showMsg,3000)

function showMsg(){alert("Hello")}

 

-----------------------------------------------------------------------
"Like" if you liked the post.
"Accept as Solution" if the post solves your question.
-----------------------------------------------------------------------
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to auto update or refresh page after two second

It doesn't make sence to reload the page after the response is available since you will loose the data if not stored in DB or local-/sessionStorage. I think it needs only to recall the function used to redraw the table with the response-data, isn't 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: How to auto update or refresh page after two second

yes sir you are write.i want to redraw the table with the response-data..Please help

<!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="style/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="script/iScroll.js"></script>

	<script type="text/javascript">
   		var  stationCode;
   		var myTimedCall;
   		var myScroll;// i declare here vaiable
   		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;
		     pl.add("parameter1", parameter1);
		     SOAPClient.invoke(WSDLURL, "GetDepartureStationDashboard", pl, true, GetDepartureStationDashboard_callBack);
  		}
  		
myTimedCall = window.setInterval(function() {GetDepartureStationDashboard}, 2000);// to recall function again and again

function GetDepartureStationDashboard_callBack(r)
{
	document.getElementById('loadingImg').style.visibility = "hidden";
	var tbl = document.getElementById('mainBodyDivContent');
	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);// to cancel the timer.. 
		 window.location.href="route.html?RID="+r[id].RID+"&StationCode="+stationCode;
			};
		}(i));
		
		var td1 = document.createElement('td');
		td1.setAttribute('width', '30%');
		td1.innerHTML = r[i].platformNo;;
		
		var td2 = document.createElement('td');
		td2.setAttribute('width', '30%');
		td2.innerHTML = r[i].schDepart + " - " + r[i].expDepart;;
		
		var td3 = document.createElement('td');
		td3.setAttribute('width', '35%');
		td3.innerHTML = r[i].stationName + " (" + r[i].crsCode + ")" ;;
		
		var td4 = document.createElement('td');
		td4.setAttribute('width', '5%');
			if(r[i].schDepart == r[i].expDepart)
	{
		td4.innerHTML = "<img src=\"images/correct-icon.png\" width=\"24\" height=\"24\" />";
	}
	else 
	{
		td4.innerHTML = "<img src=\"images/error.png\" width=\"24\" height=\"24\" />";
	}
		
		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()">
<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">
         <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>

 

sir i am not getting by using this. But it look awkward to show image "visible "and then "hidden " after a interval of 2 second.. i want to reload table only from the server

 

Please help 

Highlighted
Developer
Developer
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: How to auto update or refresh page after two second

Add something like this after the source to initialize the iScroll object just before you close the GetDepartureStationDashboard_callBack function (untested):

 

window.setTimeout(GetDepartureStationDashboard, 2000);

And remember, you need to clear the output to add the "new" content from the WebService, so in the GetDepartureStationDashboard_callBack function where you use:

 

var tbl = document.getElementById('mainBodyDivContent');

replace this with the following to remove all content of the table:

 

var tbl = document.getElementById('mainBodyDivContent');
tbl.innerHTML = "";

 This is also untested, but I think it could work.

 

 


"Like" if you liked the post.
"Accept as Solution" if the post solves your question.