Show Page Loading Spinner on Ajax Call in jQuery Mobile

0 votes

I'm using $.ajax() to populate a list in my mobile web app. What I'd like to do is have the jQuery mobile loading spinner appears while this call is being performed and disappear once the list populates. The current version of JQM uses $.mobile.showPageLoadingMsg() and $.mobile.hidePageLoadingMsg() to show and hide the loading spinner, respectively. I can't figure out where exactly to place these statements to get the correct result. This seems like it should be a fairly easy thing to accomplish, I just haven't been able to find anything about this exact scenario.

Here's the ajax call inside the pagecreate function:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                for(i = 0; i < data.length; i++) {
                    $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>');
                    $('#course' + data[i].id).listview();
                    for(j = 0; j < data[i].evaluatedUserIds.length; j++) {
                        $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>');
                    }
                    $('#course' + data[i].id).listview('refresh');
                }
                $('#courses').listview('refresh');
            }
        });
    });

Jun 9 in JQuery by Anchal
• 320 points
76 views

1 answer to this question.

0 votes

 Use the ajaxStart() and ajaxStop() Method

While working with Ajax, showing a loading spinner or displaying a message with some animation like "Loading... Please Wait" is popular way to indicate the user that Ajax request is in progress.

answered Jun 10 by gaurav
• 17,000 points

Related Questions In JQuery

0 votes
1 answer

How to call $(window).on("load", function) in jQuery-3.3.1?

Use $(document).ready() instead of $(window).on("load", function... $(document).ready(function() { ...READ MORE

answered Jun 21 in JQuery by rajatha
• 7,040 points
24 views
0 votes
1 answer

Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

Hii @kartik, It's caused by jquery-ui and bootstrap-button ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
3,024 views
0 votes
1 answer

How to check if button is disabled in jQuery Mobile?

Hello, you can try $("#deliveryNext").is(":disabled") The following code works for ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,740 points
2,239 views
0 votes
1 answer
0 votes
1 answer

jQuery mobile: Enable Word Wrap in ListViews

A listview is coded as a simple ...READ MORE

answered Jun 6 in JQuery by Edureka
• 13,640 points
17 views
0 votes
1 answer

Horizontal scrolling and vertical scrolling in JqueryMobile

I'll go through code's main parts for ...READ MORE

answered Jun 21 in JQuery by rajatha
• 7,040 points
18 views
0 votes
0 answers

Page Reload/Refresh executes $(document).ready() on every page in jQuery Mobile

My jQuery mobile applications consists of multiple ...READ MORE

Jul 22 in Web Development by gaurav
• 17,000 points
11 views
0 votes
1 answer

How to change the jquery mobile flip switch state from code

I've examined the page you posted and ...READ MORE

answered Aug 1 in Web Development by rajatha
• 7,040 points
9 views
0 votes
1 answer

What is the difference between AJAX with JavaScript and jQuery?

JavaScript is a programming language. JQuery is ...READ MORE

answered May 30 in JQuery by gaurav
• 17,000 points
63 views
0 votes
1 answer

Listening for Youtube Event in JavaScript or jQuery

I'm trying to get the onStateChange event ...READ MORE

answered May 30 in JQuery by gaurav
• 17,000 points
36 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP