JQuery help

Hi,

I have following script, and I want the user to see a loading message until the .each is complete. I can show that message on an existing div tag on an HTML page. How do I modify following JQuery function, so that the user sees that message and it disappeas once everything is loaded?

  function GetLocations() {
              
              $.getJSON('/_vti_bin/listdata.svc/MasterSiteList?$select=PROPERTY,PROPERTYNAME,PROPERTYLATITUDE,PROPERTYLONGITUDE,PROPERTYSTREETADDRESS,PROPERTYCITYLOCALE,PROPERTYSTATEPROVINCE,PROPERTYCOUNTRY,PROPERTYZIPCODE,StatusValue', function (data) {
                  $.each(data.d.results, function (i, result) {
                      if (result.PROPERTYLATITUDE && result.PROPERTYLONGITUDE) {
                          var site = new VELatLong(result.PROPERTYLATITUDE, result.PROPERTYLONGITUDE);
                          var siteShape = new VEShape(VEShapeType.Pushpin, site);
                          var siteStatus = result.StatusValue
                          siteShape.SetCustomIcon(setIcon(siteStatus));
                          siteShape.SetDescription(mwhMap_setItemDescription(result));
                          mwhMap_map.AddShape(siteShape);

                      }

                  });
              });

          }


Any help is appreciated,
TechsavyAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
async or sync, the callback function (the each loop) is executed at the end of the call
0
 
leakim971PluritechnicianCommented:
 function GetLocations() {
              $("#loadingDiv").show();
              $.getJSON('/_vti_bin/listdata.svc/MasterSiteList?$select=PROPERTY,PROPERTYNAME,PROPERTYLATITUDE,PROPERTYLONGITUDE,PROPERTYSTREETADDRESS,PROPERTYCITYLOCALE,PROPERTYSTATEPROVINCE,PROPERTYCOUNTRY,PROPERTYZIPCODE,StatusValue', function (data) {
$("#loadingDiv").hide();
       $.each(data.d.results, function (i, result) {

put this somewhere :
<div id="loadingDiv" style="display:none;position:absolute;top:100px;left:100px"><img src="http://www.assises-orl.com/Images/loading.gif" /></div>

Open in new window

0
 
TechsavyAuthor Commented:
Hi leakim971:

Thank you for the quick response. I tried this and it works fine but there is one caveat. Since .getJSON method happens asynchronously, the loading hides a little earlier before all the results are processed using .each.

0
 
leakim971PluritechnicianCommented:
try to put the hide after the each
0
 
TechsavyAuthor Commented:
Hi leakim 971,

Thank you again. I think that will not solve the problem either because .getJSON executes asynchrounously. Therefore i think, replacing .getJSON with .ajax with async = false would be a good solution to use your trick. will let you know. thanks again!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.