Question

I’m using jQuery Mobile with SPServices to pull in SharePoint data to a mobile page. All data actually loads, but I haven’t had success getting the spinner to load while it’s pulling data.

I had read on a few pages that you had to set async: true to get this to work, but it didn’t help. I’ve also tried a couple methods for showing and hiding the spinner which neither worked.

• jQuery 1.7.2
• jQuery Mobile 1.1.0
• SPServices 0.7.1a http://spservices.codeplex.com/

Any ideas?

Doesn’t work

$(document).delegate('#top-stories', 'pageshow', function () {
    function getList(){
             // ....
    } // end function
    $.mobile.showPageLoadingMsg();
    getList();
    $.mobile.hidePageLoadingMsg();
});

Doesn’t Work

$(document).delegate('#top-stories', 'pageshow', function () {
    function getList(){
        $.mobile.showPageLoadingMsg();
        $().SPServices({
            // ....
        });
        $.mobile.hidePageLoadingMsg();
    } // end function
    getList();  
});

Code that loads the items and works, just no spinner

$(document).delegate('#top-stories', 'pageshow', function () {
    function getList(){
        $().SPServices({
            operation: "GetListItems",
            listName: "Posts",
            webURL: "/SiteDirectory/news_and_updates",
            async: true,
            CAMLRowLimit: 15,
            CAMLQuery: "<Query><OrderBy><FieldRef Name='Created' Ascending='FALSE' /></OrderBy><Where><Eq><FieldRef Name='PostCategory' /><Value Type='Choice'>Announcements</Value></Eq></Where></Query>",
            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /></ViewFields>",
            completefunc: function (xData, Status) {
              $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var liHtml = "<li data-theme=\"c\"><a href=\"javascript:viewStory(" + $(this).attr("ows_ID") + ")\">" + $(this).attr("ows_Title") + "</a></li>";
                $("#top-stories ul").append(liHtml).listview("refresh");
              });
            }
        });
    } // end function
    getList();
});

Answer 1

Put your call to showPageLoadingMsg in your getList method, right before your call to $().SPServices. Then put your call to hidePageLoadingMsg inside of your completeFunc callback method, before or after the loop through xData.responseXML;