Java Script Having a Loading ICON when click the search tab

658
6
05-21-2010 07:04 AM
DanPajak
Occasional Contributor
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;
   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.
0 Kudos
6 Replies
DerekSwingley
Occasional Contributor
Put a loading image in a div or a span and make that hidden when the page loads. When your doFind() function runs, show your icon. When your showResults() function runs, hide the icon. This sample might help you too:  http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/map_showloading.html
0 Kudos
DanPajak
Occasional Contributor
Do you have any better examples.  The example link you gave me is directed torward a map search not on a  table.    I am still having trouble getting a loading icon to show when there is search going on .  Can you elaborate your solution a little more I am fairly new to javascript.  Thanks for help again.
0 Kudos
DerekSwingley
Occasional Contributor
How about this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Simple Find</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
    <script type="text/javascript">
      dojo.require("esri.tasks.find");

      var find, params;
      function init() {
        esri.hide(dojo.byId('loading'));
        find = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/");
        params = new esri.tasks.FindParameters();
        params.layerIds = [2];
        params.searchFields = ["STATE_NAME","STATE_FIPS"];
      }

      function doFind() {
        esri.show(dojo.byId('loading'));
        params.searchText = dojo.byId("searchText").value;
        find.execute(params, showResults);
      }

      function showResults(results) {
        esri.hide(dojo.byId('loading'));
        var result, attribs;
        var s = ["<table border=\"1\"><thead><tr style=\"background-color:#ccc;\"><td>State Name</td><td>FIPS</td><td>Population (1990)</td><td>Population (1999)</td></tr></thead><tbody id=\"states\">"];
        for (var i=0, il=results.length; i<il; i++) {
          result = results;
          attribs = result.feature.attributes;
          s.push("<tr><td>" + attribs.STATE_NAME + "</td><td>" + attribs.STATE_FIPS + "</td><td>" + attribs.POP1990 + "</td><td>" + attribs.POP1999 + "</td></tr>");
        }
        s.push("</tbody></table>");
        dojo.byId("tbl").innerHTML = s.join("");
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="tundra">
    Find by State Name or State FIPS: <input type="text" id="searchText" size="40" value="Kansas" />
    <input type="button" value="Find" onclick="doFind()" />
    <div id="loading"><img src="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/images/loading.gif" /></div>
    <div id="tbl"></div>

  </body>
</html>


That's the simple find task sample. The lines I added are in red.
0 Kudos
DanPajak
Occasional Contributor
Derek, Thanks for the help everything worked out perfectly with my code. Now the users can see that something is going on when they are doing a mass search on the data instead of a blank screen.
0 Kudos
derekswingley1
Frequent Contributor
Glad to help!
0 Kudos
DanPajak
Occasional Contributor
Derek, I was wondering if you know how to get results into a table after querying from a buffer.  As of right now have it where a list will pop up and be seperated by a comma.  Everytime I try to change this and have it open to a table it fails.   Was wondering if you had any pointers that would help.  Attached is a zip .txt file with the code I am trying fix to my needs.
0 Kudos