Appcelerator: Simple Zip Code City Finder


/ Published in: JavaScript
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.