Web and WebWorks Development

[iruka]

Hi all. I have this app that retrieve data using jQuery $.ajax. While it is retrieving the data, there should be a loader gif but it won't show up on the device.

function getData()
{
  $.ajax({
    type: 'GET',
    url: 'http://www.somedomain.com/somedirectory/webservices',
    data: { some data },
    beforeSend:function() 
    {
      var strLoader = "";
       
      strLoader += '<div id="loaderContainer">';
      strLoader += '<div id="loaderWord">Loading.....</div>';
      strLoader += '<div id="loaderImage"><img src="images/loader.gif" /></div>';
      strLoader += '</div>';//end of loaderContainer

      $('#content').html(strLoader);
    },
    success:function(data) 
    {
      //retrieve data if retrieval is successful
    }
    error:function()
    {
      //display message if there's error
    }
  });
}

 In Ripple Emulator, the loader.gif is shown but when installed on the device it is loader.gif is not shown but the "Loading....." text is being displayed.

Can anyone please help?

Thank you.

[The_Anomaly]

Check the naming of the file and path locations.  I had an image not showing because while testing on windows the uppercase lowercase thing didn't apply but on the device its case sensitive.

[iruka]

The naming of the file and path location are all correct.

[The_Anomaly]

I know its three weeks ago, did you ever get the answer to this?

[iruka]

Still havent' got any answer to it. But maybe it could be bandwidth problem. There are times when the retrieving data from server and the loading time is fast, it's hard to come to this screen. There are times when the retrieving is slow this loader will appear.

[JRab]

Hey iruka,

Have you tried placing the 'beforeSend' code outside of the jquery ajax function to see if you get different results? Try this:

function getData()
{
  var strLoader = "";
   
  strLoader += '<div id="loaderContainer">';
  strLoader += '<div id="loaderWord">Loading.....</div>';
  strLoader += '<div id="loaderImage"><img src="images/loader.gif" /></div>';
  strLoader += '</div>';//end of loaderContainer

  $('#content').html(strLoader);

  $.ajax({
    type: 'GET',
    url: 'http://www.somedomain.com/somedirectory/webservices',
    data&colon; { some data },
    success:function(data) 
    {
      //retrieve data if retrieval is successful
    }
    error:function()
    {
      //display message if there's error
    }
  });
}

 Just in case its the jquery that's causig the hiccup -- good luck!