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

Disable buttons before webservice response come

Hi

 

How to disable buttons till webservice response came, but when web service respone came it will enable  all button

 

can you give me some suggestion..

 

Thanks

 

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

Re: Disable buttons before webservice response come

Do you want to disable the hardware buttons of a device (which one, which OS) or software buttons within your app?


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

Re: Disable buttons before webservice response come

software button.

 

these are the buttons

<input type=submit class="heading_btn" style="margin-top:10px" value="Get Arrival Schedule" onclick="FillValues();SetAction(1)">
<input type=submit class="heading_btn" style="margin-top:10px" value="Get Departure Schedule" onclick="FillValues();SetAction(2)">

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

Re: Disable buttons before webservice response come

For your input elements you could try using disabled="disabled" attribute, but it might not work really well in every case.

 

<input type="submit" class="heading_btn" style="margin-top:10px" value="Get Arrival Schedule" onclick="FillValues(); SetAction(1)" disabled="disabled" />

 

Most times I use some other elements to create buttons and need something else (like the following) to get it working. If you are using a framework like jQuery it will be easy to do that I think. First, add another empty class to your input element, eg. "btn-disabled", like this:

 

<input type=submit class="heading_btn btn-disabled" style="margin-top:10px" value="Get Arrival Schedule" onclick="FillValues(); SetAction(1)">

Try to summarize your FillValues() and SetAction(..) functions within another function, eg. onBtnHandle() like this:

 

function onBtnHandle(val) {
/* do: handle the disabled buttons */
if(this.className.indexOf("btn-disabled") !== -1) {return;}

 /* do: call functions if button(s) not disabled */
FillValues(); SetAction(val);
}

Now add onBtnHandle(1) or onBtnHandle(2) to your input tags. If the service call is done and the response is there you only need to remove the css class "btn-disabled" from those buttons and thats it.

 

For me it is the easiest way to activate and deactivate buttons. I also use the css class "btn-disabled" to style the buttons if they are disabled, so the user an see the difference.

 


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

Re: Disable buttons before webservice response come

<!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>First Group</title>
	<link href="style/style.css" rel="stylesheet" type="text/css" />
	<script language="javascript" type="text/javascript" src="script/actb.js"></script>
	<script language="javascript" type="text/javascript" src="script/actb2.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<script type="text/javascript" src="script/soapclient.js"></script>
	<script type="text/javascript" src="script/cordova-1.9.0.js"></script>
	<script type="text/javascript">
   		
		//Wait for Cordova to load
	   document.addEventListener("deviceready", onDeviceReady, false);

	    //Cordova is loaded and it is now safe to make calls Cordova methods
	    
	    function onDeviceReady() 
	    {
	        checkConnection();
	    }
	
	    function checkConnection() 
	    {
	        var networkState = navigator.network.connection.type;
	
	        var states = {};
	        states[Connection.UNKNOWN]  = 'Unknown connection';
	        states[Connection.ETHERNET] = 'Ethernet connection';
	        states[Connection.WIFI]     = 'WiFi connection';
	        states[Connection.CELL_2G]  = 'Cell 2G connection';
	        states[Connection.CELL_3G]  = 'Cell 3G connection';
	        states[Connection.CELL_4G]  = 'Cell 4G connection';
	        states[Connection.NONE]     = 'No network connection';
	       	//alert('Connection type: ' + states[networkState]);
			if(states[networkState]=="No network connection")
			{
	  			alert("No Connection Available ");
				navigator.app.exitApp();
			}	
		}
		var stationList = new Array;	
	
   		function GetStationCodes()
  		{    
	  		document.getElementById('loadingImg').style.visibility = "visible"; 
		     var pl = new SOAPClientParameters();
		     var parameter1 = "";
		     var parameter2 = "";
		     pl.add("parameter1", parameter1);
		     pl.add("parameter2", parameter2);
		     SOAPClient.invoke(WSDLURL, "stationSearch", pl, true, GetStationCodes_callBack);
		}
  		function GetStationCodes_callBack(r)
 		{ 
	 		document.getElementById('loadingImg').style.visibility = "hidden";
			for (var i = 0; i < r.length-1; i++)
          	{
	          	stationList[i] = r[i].stationCode + " - " + r[i].stationName;
          	}
		}	
		function SetAction(flag)
		{
			if(flag==1)
			{
				 document.frmIndex.action="arrival.html";
			}
			else
			{
				 document.frmIndex.action="departure.html";
			}
		}
	</script>
</head>
<body onload="GetStationCodes()">
	<div id="wrapper">
		<div class="login_cont">
			<div class="home_icon"><a href="#"><img src="images/home-icon.png" alt="Home" title="Home" /></a></div>
			<h1 class="fr">Station ID</h1>
			<div class="cl"></div>
			<form name="frmIndex" type=get>
				<div class="log_cont">
					<input id="getStationDesc" name="getStationDesc" type="text" class="log_txtfield" />
					<script>
						var obj = actb(document.getElementById('getStationDesc'),stationList);
						//setTimeout(function(){obj.actb_keywords = custom2;},10000);
						this.actb_timeOut = -1;
						// Number of elements autocomplete can show (-1: no limit)
						this.actb_lim = 10;
						// should the auto complete be limited to the beginning of keyword?
						this.actb_firstText = true;
						// Enable Mouse Support
						this.actb_mouse = true;
						// Delimiter for multiple autocomplete.
						// Set it to empty array for single autocomplete
						this.actb_delimiter = new Array(' ',',');
						// Show widget only after this number of characters is typed in.
						this.actb_startcheck = 1;
						
						this.actb_bgColor = '#dbe3ec';
						this.actb_textColor = '#00256a';
						this.actb_hColor = '#dbe3ec';
						this.actb_fFamily = 'arial';
						this.actb_fSize = '12px';	
						this.actb_hStyle = 'text-decoration:underline;font-weight="bold"';
						function FillValues()
						{
							document.getElementById('getStationCode').value = document.getElementById('getStationDesc').value.substring(0,3);				
						}
					</script>
					<div>
  
      <img src="images/ajax-loader.gif" id="loadingImg" visible =true style="margin:auto; position: absolute; left:50%; top:50%;"/>
  
</div>
				
					<input id="getStationCode" name="getStationCode" type="hidden" /></div>
					<input type=submit class="heading_btn" style="margin-top:10px" value="Get Arrival Schedule" onclick="FillValues();SetAction(1)">
					<input type=submit class="heading_btn" style="margin-top:10px" value="Get Departure Schedule" onclick="FillValues();SetAction(2)">
					
				</div>
			</form>
		</div>
	</div>
</body>
</html>
 
body{margin:0px; padding:0px; font:normal 11px Arial, Helvetica, sans-serif; color:#000; background:#fff;}
div, span, applet, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, canvas, embed, figure{margin:0px; padding:0px;}
ul, li{margin:0px; padding:0px; list-style-type:none;}
img{margin:0px; padding:0px; border:none;}
input{margin:0px; padding:0px; vertical-align:middle;}
a{color:#000; text-decoration:none;}
a:hover{color:#104e8b; text-decoration:underline;}
:focus{outline:none;}
.cl{clear:both; margin:0px; padding:0px; height:1px;}
.fl{float:left;}
.fr{float:right;}
#wrapper{width:98%; height: 100%;margin:8px auto; }
.login_cont{margin:0px;}
.login_cont h1{margin:0px; padding:5px 0 0 0; font:bold 18px Arial, Helvetica, sans-serif; color:#00256a;}
.home_icon{width:42px; float:left; margin:0px; padding:0px;}
.log_maincont{position:relative;}
.log_maincont ul{margin:0px; padding:0px;}
.log_maincont ul li{margin:0px; font:bold 12px Arial, Helvetica, sans-serif; color:#002d6f; padding:8px 10px; display:block; border-bottom:1px solid #eaeff4; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius:10px;}
.log_maincont ul li.active{border-bottom:1px solid #eaeff4; background:#adc0d7;}
.log_maincont .srch_arw{position:relative; left:50px; top:-1px; clear:both;}
.log_cont{background:#dbe3ec url(../images/from.png) no-repeat 10px 15px; padding-left:55px; height:42px; position:relative; border:1px solid #7c99be; margin-top:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius:10px;}
.log_txtfield{ border:none; background:#dbe3ec;  border:1px solid red;  padding:13px 0 0 0; border:none; font:bold 14px Arial, Helvetica, sans-serif; width:98%; color:#97a8c0;  }
.login_cont p{margin-top:30px;}
.mid_cont{margin-top:20px;}
.grid_cont{margin:0px; padding:0px;}
.heading_bar{margin:0px; padding:5px; background:#013474; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius:10px;}
.heading_bar h1{font:bold 16px Arial, Helvetica, sans-serif; color:#fff; padding:5px 0px;}
.heading_btn{background:#3e6ba3 url(../images/btn_bg.png) repeat-x left top; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; padding:5px; border:none; cursor:pointer; font:bold 14px Arial, Helvetica, sans-serif; color:#fff; text-align:center;}

.grid_cont{margin:0px; padding:0px;}
.grid_cont table tr td{border-bottom:1px solid #e6ebf0; padding:5px 10px; font:normal 14px Arial, Helvetica, sans-serif; color:#003170;}

.grid_error{margin-top:10px; padding:10px 5px; font:bold 11px Arial, Helvetica, sans-serif; background:#dbe3ec; color:#003170;-moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;}
.grid_error img{vertical-align:middle;}

.scroll-pane
{
  width: 100%;
  height: 440px;
  overflow-y:scroll;
  position: relative;
}
.scroll-pane table tr:hover
{
  background:#dbe3ec;
}

 

 

Thanks sir but i am not able to change in my code , can you do some favor for me.please change only in index.html.so that i can under change it on my code , i will attached my code.

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

Re: Disable buttons before webservice response come

Learning by doing. I attached an example that is doing what you want to do, disable buttons until x, where x in this example is a timeout of 5 seconds to enable the buttons and where x for you would be availability of the webservice response.

All you need to do is:

  • add IDs to your buttons (see the example input elements I used)
  • add the source to remove the "disabled" attribute from those buttons (see the example function i documented)

Thats it.


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

Re: Disable buttons before webservice response come

i integrate your code with my code , it working fine in browser but when i put it into device it is not working....:smileysad:
Please use plain text.
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: Disable buttons before webservice response come

working................:smileyhappy:
Please use plain text.
Developer
Developer
LBP
Posts: 607
Registered: ‎04-29-2011
My Device: PlayBook 16GB, BB10 LE Z10 (red)
My Carrier: none

Re: Disable buttons before webservice response come

Nice to know that it is working for you!! Regards!


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

Re: Disable buttons before webservice response come

Hi 

 

sir one issue more , actually blackscreen displayed for some seconds  after splash screen in anroid using phonegap.

actually i want to display splash screen untl i get webservice respone, no screen in between.can you help me.?

 

 

i use this code

package com.test.cordova;

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.view.View;

public class HelloCordovaActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.main);
        
        
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///android_asset/www/index.html",10000);
        //super.setIntegerProperty("loadUrlTimeoutValue", 10000);  
        
        
       
        
       
    }
}

 

 

Thanks 

Please use plain text.