advanced code snippet search

Posted By

chrisaiv on 12/01/09


Tagged

html jquery iphone Titanium Appcelerator


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

umang_nine
webdents


Appcelerator: Simple Zip Code City Finder

 / Published in: JavaScript
 

URL: http://www.appcelerator.com/products/titanium-mobile/

Appcelerator Titanium Mobile is a framework + IDE designed to help you build iPhone applications using only HTML and Javascript. This example shows how to make a simple Ajax request

Expand | Embed | Plain Text 
  1. <html>
  2. <head>
  3. <title>Find City By ZIP Code</title>
  4. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  5.  
  6. <style type="text/css" media="screen">
  7.  
  8. 	#textField{ width:100px; height:30px }	
  9. 	#search-btn{ width:100px; height:47px; color:#0000ff; }
  10. 	#response-txt{ width:300px; text-align:center; font-family:helvetica, impact, sans-serif; font-weight: bold; }
  11.  
  12. 	.center { margin-right:auto;margin-left:auto;width:320px; }
  13. </style>
  14. <script type="text/javascript" charset="utf-8">
  15. var xhr;
  16. var xhrResponse;
  17. var alert;
  18.  
  19. var xmlCity;
  20. var xmlState;
  21. var zipCode;
  22.  
  23. var tf;
  24. var searchBtn;
  25.  
  26.  
  27. 	function initialize(e){
  28. 		/****************************
  29. 		Create Ajax Request
  30. 		****************************/
  31. 		xhr = Titanium.Network.createHTTPClient();
  32.  
  33. 		xhrResponse = $("#response-txt");
  34.  
  35. 		/****************************
  36. 		Create TextField
  37. 		****************************/
  38.  
  39. 		tf  = Titanium.UI.createTextField({
  40. 			id:'textField',
  41. 			value:'90026',
  42. 			color:'#336699',
  43. 			backgroundColor:'#eeeeee',
  44. 			returnKeyType:Titanium.UI.RETURNKEY_DONE,
  45. 			enableReturnKey:true,
  46. 			keyboardType:Titanium.UI.KEYBOARD,
  47. 			autocorrect:false,
  48. 			hintText:'Enter ZIP',
  49. 			textAlign:'left',
  50. 			clearOnEdit:true,
  51. 			borderStyle:Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
  52. 			clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_NEVER,
  53. 		});
  54.  
  55.  
  56. 		$(tf).bind("change", onTfChangeHandler );
  57. 		function onTfChangeHandler(e){
  58. 			tf.value = e.value;			
  59. 		}
  60.  
  61. 		/****************************
  62. 		Create Search Button
  63. 		****************************/
  64. 		searchBtn = Titanium.UI.createButton({ id:'search-btn', title:'Search' });			
  65.  
  66. 		$(searchBtn).bind("click", onSearchClickHandler );
  67. 		function onSearchClickHandler(e){
  68. 			constructAndSend();			
  69. 		}
  70.  
  71. 		/****************************
  72. 		Ajax onLoad Request
  73. 		****************************/
  74. 		xhr.onload = function()
  75.  
  76. 		{
  77. 		   Titanium.API.info( "xhr.onload: " );
  78. 		   var xml = this.responseXML;
  79. 		   // xml now is a Javascript DOM object you can use
  80. 	  	   var xmlDoc = xml.documentElement;
  81.  
  82. 		   try {
  83. 		   		// get a value of the first tag myelement found in XML doc
  84. 		   		xmlCity = xmlDoc.getElementsByTagName("CITY")[0].childNodes[0].nodeValue.toString();
  85. 		   		xmlState = xmlDoc.getElementsByTagName("STATE")[0].childNodes[0].nodeValue.toString();
  86.  
  87. 		   } catch(err) {
  88. 				$(xhrResponse).html = "";
  89.  
  90. 				constructAlert( "Zip Code Not Found. ");
  91. 		   }
  92.  
  93. 		   //xhrResponse.innerHTML = zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState;
  94. 			$(xhrResponse).html( zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState );
  95. 		};
  96.  
  97. 	}
  98.  
  99. 	function constructAndSend(){
  100. 		//Capture the Zip Code
  101. 	    zipCode = $(tf).val();
  102.  
  103. 		Titanium.API.info( "constructAndSend: " + zipCode );
  104.  
  105. 		//Confirm that a proper Zip Code has been entered
  106. 	    if ( zipCode != null && zipCode.length == 5 ){	
  107. 			//Fire Off the Ajax Request
  108. 			xhr.open("GET","http://www.webservicex.net/uszip.asmx/GetInfoByZIP?USZip=" + zipCode);
  109. 			xhr.send(null);
  110. 		} else {
  111. 			//Show any errors
  112. 			constructAlert( "A 5-digit ZIP Code must be entered." );
  113. 		}
  114. 	}
  115.  
  116. 	/****************************
  117. 	Create Alert Message
  118. 	****************************/
  119. 	function constructAlert( message ){
  120. 		var alert = Titanium.UI.createAlertDialog();
  121. 		    alert.setTitle("Error");
  122. 		    alert.setMessage( message );
  123. 		    alert.show();
  124. 		return;		
  125. 	}
  126. </script>
  127. <script type="text/javascript" charset="utf-8">
  128. $(document).ready(function() {
  129. 	initialize();
  130. });
  131. </script>
  132. <body style="background-color:#999999">
  133.  
  134. 	<div id="textField" class="center"></div>
  135.  
  136. 	<br/>
  137.  
  138. 	<div id="search-btn"  class="center"></div>
  139.  
  140. 	<br/><br/>
  141.  
  142. 	<div id="response-txt"  class="center"></div>
  143. </body>
  144. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: ben84 on January 27, 2011

I tried your code and text boxes cannot be displayed. May I know how to add textboxes with titanium api in html doc? Thanks.

Posted By: chrisaiv on February 2, 2011

Do you have jQuery installed?

Posted By: tradergordo on February 14, 2011

I'm new to development with this tool, I've been looking hard for a small sample like this to work from. But it seems like all code I find does not compile. Can you give any advice? Note, I do have the latest version of titanium and followed all the instructions to get up and running and most importantly, kitchen sink works! jquery-1.3.2.js was included with kitchen sink, so I copied that file to my project resource folder. I'm not sure if I'm supposed to just copy paste your code snippet into "app.js" and it is supposed to work? I'm currently trying this with the andriod emulator (APIs 2.3.1), it installs and beings to run then the andriod emulator (not titanium) shows "syntax error" for line "#textField{ width:100px; height:30px }" (this is line 8 of your code snippet).

Any help would be greatly appreciated.

Thanks!

You need to login to post a comment.