I'm trying to show a loading message when a user clicks a collapsible section while an AJAX get is performed. I'm using the SPServices library to perform the get. Basically the loading message does not display. It will display once the SPServices operation and click event is over. Am I defining this click event correctly? Thanks.
$(document).bind('pageinit', function (event) {
$('.ui-collapsible').click(function (event, data) {
$.mobile.showPageLoadingMsg();
var myQueryOptions = "";
var myQuery = "";
if ($(this).attr('id') == "NewsContainer" && $("#NewsList li").size() == 0) {
var myQueryOptions = "<QueryOptions><ViewAttributes Scope='RecursiveAll' IncludeRootFolder='True' /></QueryOptions>";
var myQuery = "<Query><Where><BeginsWith><FieldRef Name='ContentTypeId' /><Value Type='ContentTypeId'>0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900DD0126D65DE8404CB540571DFA751B850301</Value></BeginsWith></Where></Query>";
}
if (myQueryOptions != "" && myQuery != "") {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Pages",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='PublishingPageContent' /><FieldRef Name='NewsDate' /></ViewFields>",
CAMLQuery: myQuery,
CAMLRowLimit: 5,
CAMLQueryOptions: myQueryOptions,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
....
});
}
});
}
});
});