topic Java Script Having a Loading ICON when click the search tab in ArcGIS JavaScript Maps SDK Questions

Java Script Having a Loading ICON when click the search tab

DanPajak — Fri, 21 May 2010 14:04:13 GMT

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>
 
<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>Full Address</td><td nowrap>GIS Key</td><td nowrap>PIN#</td><td nowrap>Owner</td><td nowrap>Owner Address</td><td nowrap>Owner City</td><td nowrap>Owner State</td><td nowrap>Owner ZIP</td><td nowrap>Owner Date</td><td nowrap>Update Date</td><td nowrap>Occupant</td><td nowrap>Occupant Phone# 1</td><td nowrap>Occupant Phone# 2</td><td nowrap>In Village</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> " + attribs.Full_Address + "</td><td nowrap>" + attribs.GIS_Key + "</td><td nowrap>" + attribs.PIN + "</td><td nowrap>" + attribs.OWNER_NAME + "</td><td nowrap>" + attribs.OWNER_ADDRESS +"</td><td nowrap>" +attribs.OWNER_CITY +"</td><td nowrap>" +attribs.OWNER_STATE +"</td><td nowrap>" +attribs.OWNER_ZIP +"</td><td nowrap>" +attribs.OWNER_DATE +"</td><td nowrap>" +attribs.UPDATE_DATE +"</td><td nowrap>" +attribs.OCCUPANT +"</td><td nowrap>" +attribs.OCCUPANT_PHONE1 +"</td><td nowrap>" +attribs.OCCUPANT_PHONE2 +"</td><td nowrap>" +attribs.Village +"</td></tr>");
 }
else if (attribs.Village === "Y") {
 s.push("<tr style=\"background-color:YELLOW;\"><td nowrap> " + attribs.Full_Address + "</td><td nowrap>" + attribs.GIS_Key + "</td><td nowrap>" + attribs.PIN + "</td><td nowrap>" + attribs.OWNER_NAME + "</td><td nowrap>" + attribs.OWNER_ADDRESS +"</td><td nowrap>" +attribs.OWNER_CITY +"</td><td nowrap>" +attribs.OWNER_STATE +"</td><td nowrap>" +attribs.OWNER_ZIP +"</td><td nowrap>" +attribs.OWNER_DATE +"</td><td nowrap>" +attribs.UPDATE_DATE +"</td><td nowrap>" +attribs.OCCUPANT +"</td><td nowrap>" +attribs.OCCUPANT_PHONE1 +"</td><td nowrap>" +attribs.OCCUPANT_PHONE2 +"</td><td nowrap>" +attribs.Village +"</td></tr>");
 }
else {
s.push("<tr><td nowrap> " + attribs.Full_Address +"</td><td nowrap>" +attribs.GIS_Key +"</td><td nowrap>" +attribs.PIN +"</td><td nowrap>" +attribs.OWNER_NAME +"</td><td nowrap>" +attribs.OWNER_ADDRESS +"</td><td nowrap>" +attribs.OWNER_CITY +"</td><td nowrap>" +attribs.OWNER_STATE +"</td><td nowrap>" +attribs.OWNER_ZIP +"</td><td nowrap>" +attribs.OWNER_DATE +"</td><td nowrap>" +attribs.UPDATE_DATE +"</td><td nowrap>" +attribs.OCCUPANT +"</td><td nowrap>" +attribs.OCCUPANT_PHONE1 +"</td><td nowrap>" +attribs.OCCUPANT_PHONE2 +"</td><td nowrap>" +attribs.Village +"</td></tr>");
 }

}

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

 }
 dojo.addOnLoad(init);
 </script>

</head>
<body class="tundra">
 
<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>
 
<center><div id="tbl"></div></center>

</body>
</html>

Thanks for your help in advance.

Re: Java Script Having a Loading ICON when click the search tab

DerekSwingley — Fri, 21 May 2010 19:29:06 GMT

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

Re: Java Script Having a Loading ICON when click the search tab

DanPajak — Tue, 25 May 2010 14:39:42 GMT

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.

Re: Java Script Having a Loading ICON when click the search tab

DerekSwingley — Sun, 12 Dec 2021 16:32:16 GMT

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.

Re: Java Script Having a Loading ICON when click the search tab

DanPajak — Tue, 25 May 2010 17:27:11 GMT

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.

Re: Java Script Having a Loading ICON when click the search tab

derekswingley1 — Tue, 25 May 2010 18:24:21 GMT

Glad to help!

Re: Java Script Having a Loading ICON when click the search tab

DanPajak — Wed, 14 Jul 2010 17:58:47 GMT

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.