vopgis

Java Script Having a Loading ICON when click the search tab

Discussion created by vopgis on May 21, 2010
Latest reply on Jul 14, 2010 by vopgis
I am triying to have a loading icon show when I click the search button or hit enter.   The reason for this is that when people do a search and it is more of a fuzzy search that will pull a lot of records the page is blank for a bit of time and they dont know if anything is going on.  The Code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<br>
<a href="http://www.palatine.il.us/">
<center><img src="http://www.palatine.il.us/images/logo-txt.gif" border="0"></center>
</a>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Village of Palatine Address Finder</title>
    <link rel="stylesheet" type="text/css"

href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"

>
    <script type="text/javascript"

src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
    <script type="text/javascript">
      dojo.require("esri.tasks.find");

      var find, params;
      function init() {
        find = new esri.tasks.FindTask("http://maps.palatine.il.us/ArcGIS/rest/services/Addressing/MapServer");
        params = new esri.tasks.FindParameters();
        params.layerIds = [0];
        params.searchFields = ["Full_Address","GIS_Key","PIN"];
      }

      function doFind(event) {
        params.searchText = dojo.byId("searchText").value;
        find.execute(params, showResults);
      }

      function showResults(results){
    var result, attribs;
    var s = ["<table border=\"10\"><thead><tr style=\"background-color:#A6D785;\"><td nowrap><font size=2.5><b>Full Address</font></td><td nowrap><font size=2.5><b>GIS Key</font></td><td nowrap><font size=2.5><b>PIN#</font></td><td nowrap><font size=2.5><b>Owner</font></td><td nowrap><font size=2.5><b>Owner Address</font></td><td nowrap><font size=2.5><b>Owner City</font></td><td nowrap><font size=2.5><b>Owner State</font></td><td nowrap><font size=2.5><b>Owner ZIP</font></td><td nowrap><font size=2.5><b>Owner Date</font></td><td nowrap><font size=2.5><b>Update Date</font></td><td nowrap><font size=2.5><b>Occupant</font></td><td nowrap><font size=2.5><b>Occupant Phone# 1</font></td><td nowrap><font size=2.5><b>Occupant Phone# 2</font></td><td nowrap><font size=2.5><b>In Village</font></td></tr></thead><tbody id=\"states\">"];
    for (var i = 0, il = results.length; i < il; i++) {
   result = results[i];
   attribs = result.feature.attributes;
  
if (attribs.Village === "N") {
    s.push("<tr style=\"background-color:#BDBDBD;\"><td nowrap><font size=2.5> " + attribs.Full_Address + "</font></td><td nowrap><font size=2.5>" + attribs.GIS_Key + "</font></td><td nowrap><font size=2.5>" + attribs.PIN + "</font></td><td nowrap><font size=2.5>" + attribs.OWNER_NAME + "</font></td><td nowrap><font size=2.5>" + attribs.OWNER_ADDRESS +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_CITY +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_STATE +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_ZIP +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.UPDATE_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE1 +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE2 +"</font></td><td nowrap><font size=2.5>" +attribs.Village +"</font></td></tr>");
    }
else if (attribs.Village === "Y") {
    s.push("<tr style=\"background-color:YELLOW;\"><td nowrap><font size=2.5> " + attribs.Full_Address + "</font></td><td nowrap><font size=2.5>" + attribs.GIS_Key + "</font></td><td nowrap><font size=2.5>" + attribs.PIN + "</font></td><td nowrap><font size=2.5>" + attribs.OWNER_NAME + "</font></td><td nowrap><font size=2.5>" + attribs.OWNER_ADDRESS +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_CITY +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_STATE +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_ZIP +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.UPDATE_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE1 +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE2 +"</font></td><td nowrap><font size=2.5>" +attribs.Village +"</font></td></tr>");
    }
else {
s.push("<tr><td nowrap><font size=2.5> " + attribs.Full_Address +"</font></td><td  nowrap><font size=2.5>" +attribs.GIS_Key +"</font></td><td nowrap><font size=2.5>" +attribs.PIN +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_NAME +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_ADDRESS +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_CITY +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_STATE +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_ZIP +"</font></td><td nowrap><font size=2.5>" +attribs.OWNER_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.UPDATE_DATE +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE1 +"</font></td><td nowrap><font size=2.5>" +attribs.OCCUPANT_PHONE2 +"</font></td><td nowrap><font size=2.5>" +attribs.Village +"</font></td></tr>");
   }

  }
 
  s.push("</tbody></table>");
  dojo.byId("tbl").innerHTML = s.join("");
   
   }
      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
<br>
<center>Find by Full Address, GIS Key or PIN#:  <input type="text" id="searchText" size="40"

value="" />
<input type="submit" value="Find" onclick="doFind()" /></center>
<br>
<center><div id="tbl"></div></center>

  </body>
</html>

Thanks for your help in advance.

Outcomes