dmt dmt - 6 months ago 24
Javascript Question

AJAX Loading Icon

I am using the following AJAX to pull some post content into a lightbox. All works great but is a bit slow. Could anyone give me some pointers with adding a loader icon to the following code?

Thank you!

jQuery(document).ready(function ($) {

$(".getpostidlink").unbind('click');

$(".getpostidlink").mouseover(function (event) {
$(".getpostidlink").unbind('click');
var postlinkid = $(this).data("postid");
var data = {
action: 'getpostidhref_action',
security: getpostidhref.security,
postdata: postlinkid,
complete: function () {
$(".getpostidlink").unbind('click');
}
};
$.post(getpostidhref.ajaxurl, data, function (response) {
$(".getpostidlink").colorbox({
inline: true,
width: "90%",
maxWidth: 800,
open: false,
onClosed: function () {
window.location.reload();
}
})
$("div.dynamicloadcontent").replaceWith(response);
});
});
});

Answer

If you check the jQuery docs for the ajax method, there are a couple of params you can include to help here.

Specifically you could use beforeSend and complete to show and hide a loading icon before and after the ajax has completed.

See here for more info:

http://api.jquery.com/jquery.ajax/

Comments