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 Village of Palatine Address Finder 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 = [" Full Address GIS Key PIN# Owner Owner Address Owner City Owner State Owner ZIP Owner Date Update Date Occupant Occupant Phone# 1 Occupant Phone# 2 In Village "]; for (var i = 0, il = results.length; i " + attribs.Full_Address + " " + attribs.GIS_Key + " " + attribs.PIN + " " + attribs.OWNER_NAME + " " + attribs.OWNER_ADDRESS +" " +attribs.OWNER_CITY +" " +attribs.OWNER_STATE +" " +attribs.OWNER_ZIP +" " +attribs.OWNER_DATE +" " +attribs.UPDATE_DATE +" " +attribs.OCCUPANT +" " +attribs.OCCUPANT_PHONE1 +" " +attribs.OCCUPANT_PHONE2 +" " +attribs.Village +" "); } else if (attribs.Village === "Y") { s.push(" " + attribs.Full_Address + " " + attribs.GIS_Key + " " + attribs.PIN + " " + attribs.OWNER_NAME + " " + attribs.OWNER_ADDRESS +" " +attribs.OWNER_CITY +" " +attribs.OWNER_STATE +" " +attribs.OWNER_ZIP +" " +attribs.OWNER_DATE +" " +attribs.UPDATE_DATE +" " +attribs.OCCUPANT +" " +attribs.OCCUPANT_PHONE1 +" " +attribs.OCCUPANT_PHONE2 +" " +attribs.Village +" "); } else { s.push(" " + attribs.Full_Address +" " +attribs.GIS_Key +" " +attribs.PIN +" " +attribs.OWNER_NAME +" " +attribs.OWNER_ADDRESS +" " +attribs.OWNER_CITY +" " +attribs.OWNER_STATE +" " +attribs.OWNER_ZIP +" " +attribs.OWNER_DATE +" " +attribs.UPDATE_DATE +" " +attribs.OCCUPANT +" " +attribs.OCCUPANT_PHONE1 +" " +attribs.OCCUPANT_PHONE2 +" " +attribs.Village +" "); } } s.push(" "); dojo.byId("tbl").innerHTML = s.join(""); } dojo.addOnLoad(init); Find by Full Address, GIS Key or PIN#: Thanks for your help in advance.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Java Script Having a Loading ICON when click the search tab

DanPajak

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.

Find more posts tagged with

Accepted answers

All comments

DanPajak

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.

MailingTEST.zip

derekswingley1

Glad to help!

DanPajak

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.

DerekSwingley

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.

DanPajak

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.

DerekSwingley

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.