Disable buttons before webservice response come

ravi1989 · ‎07-21-2012

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

LBP · ‎04-29-2011

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.

ravi1989 · ‎07-21-2012

software button.

these are the buttons

LBP · ‎04-29-2011

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.

ravi1989 · ‎07-21-2012

<!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.

LBP · ‎04-29-2011

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.

ravi1989 · ‎07-21-2012

i integrate your code with my code , it working fine in browser but when i put it into device it is not working....

ravi1989 · ‎07-21-2012

working................

LBP · ‎04-29-2011

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.

ravi1989 · ‎07-21-2012

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

Welcome!

Web and WebWorks Development

Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come

Re: Disable buttons before webservice response come