JQTOUCH – Anytime loading occurs, add a loading class?

I’m using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.I’d like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when …

via iPhone Developers Faqs » Search Results » ajax:

JQTOUCH – Anytime loading occurs, add a loading class?

I’m using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I’d like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
…………………………………..

This is the basic behavior if your links are li class=”arrow” elements. how are you displaying your links and where do you want the loading-spinner to display?
…………………………………..

the showPageByHref() answer is partially correct.
But, instead of
$(‘body’).append(‘

Loading…

‘);You need
$(‘.current’).append(‘

Loading…

‘);Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
…………………………………..

showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short – add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later “success” or “error”. the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options)

if (href != ‘#’)
$(‘body’).append(‘

Loading…

‘);
$.ajax(
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus)
$(‘#loadinginprogress’).remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)

if (settings.method == ‘GET’ && jQTSettings.cacheGetRequests && settings.$referrer)

settings.$referrer.attr(‘href’, ‘#’ + firstPage.attr(‘id’));

if (settings.callback)
settings.callback(true);

}
},
error: function (data)
$(‘#loadinginprogress’).remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback)
settings.callback(false);

}
});
}

}
css for loading div would be something like:
#loadinginprogress
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;

…………………………………..

Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies. It uses jQuery ajax capabilities.

$(document).ready(function()

$(‘#jqt’).ajaxStart(function()
console.log(“ajaxStart”);

).ajaxSuccess(function()
console.log(“ajaxSuccess”);

).ajaxError(function()
console.log(“ajaxError”);
….
);
….
});more details available in this jQuery doc page.
…………………………………..

You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.

For more info: JQTOUCH – Anytime loading occurs, add a loading class?

iPhone Developers Faqs » Search Results » ajax

JQTOUCH – Anytime loading occurs, add a loading class?

Share this post:

Related Posts

Leave a Comment