Home > Developer > Ajax

JQuery Mobile displays the ajax loader manually and prompts loading..., jqueryajax

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JQuery Mobile displays the ajax loader manually and prompts loading..., jqueryajax

When developing with jQuery Mobile, sometimes we need to display a loading prompt box during the ajax request (for example, a rotating image + a prompt: loading ...). At this time, we can manually display the jQuery Mobile loader. The general process is as follows:

1. Start the loader and display "loading ...";

2. Make an ajax request. After the request is complete, update the page data and refresh the jQuery Mobile control style;

3. Disable the loader.

The following describes how to manually display the loader in jQuery Mobile 1.2.0 and 1.1.0 (very simple, just a few lines of code is OK !).

FirstJQuery Mobile 1.2.0Reference:

[Html]View plaincopy
  1. <! DOCTYPE html>
  2. <Html>
  3. <Head>
  4. <Title> Ajax test </title>
  5. <Meta charset = "gbk">
  6. <Meta name = "viewport" content = "width = device-width, initial-scale = 1">
  7. <! -- Place the files downloaded from the official website in the jquery-mobile Directory of the project -->
  8. <Link rel = "stylesheet" href = "jquery-mobile/jquery.mobile-1.2.0.min.css"/>
  9. <Link rel = "stylesheet" href = "jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
  10. <Script src = "jquery-mobile/jquery-1.8.2.min.js"> </script>
  11. <Script src = "jquery-mobile/jquery. mobile-1.2.0.min.js"> </script>
  12. <Head>

Compile javascript Functions:

[Javascript]View plaincopy
  1. <Script>
  2. // Display the loader
  3. Function showLoader (){
  4. // Display loader. for jQuery Mobile 1.2.0
  5. $. Mobile. loading ('show ',{
  6. Text: 'loading... ', // text displayed in the loader
  7. TextVisible: true, // whether to display text
  8. Theme: 'A', // The theme style of the loader. a-e
  9. Textonly: false, // whether to display only text
  10. Html: "" // html content to be displayed, slice, etc.
  11. });
  12. }
  14. // Hide the loader. for jQuery Mobile 1.2.0
  15. Function hideLoader ()
  16. {
  17. // Hide the loader
  18. $. Mobile. loading ('hide ');
  19. }
  20. </Script>

Prepare two buttons, one for starting (displaying) the loader and the other for stopping (hiding) the loader:

[Html]View plaincopy
  1. <Body>
  2. <Div data-role = "page">
  3. <! -- Header -->
  4. <Div data-role = "header">
  5. <H3> Ajax test
  6. </Div>
  7. <! -- Content -->
  8. <Div data-role = "content">
  9. <H3> Ajax test
  11. <Input type = "button" value = "display ajax loader" onclick = "showLoader ()"/>
  12. <Input type = "button" value = "Hide ajax loader" onclick = "hideLoader ()"/>
  14. </Div>
  15. </Body>

The effect is as follows (Subject: 'A '):

 

Of course, you can adjust the parameters in $. mobile. loading ('show', {...} to experiment with different loaders.

For more information about the loader, see the official demo of jQuery Mobile 1.2.0.:

Http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html

 

Note: The ajax loader in jQuery Mobile1.1.0 is completely different from version 1.2.0! Potholes!

JQuery Mobile 1.1.0 displays the following code for the loader:

[Javascript]View plaincopy
  1. <Script>
  2. // Display the loader
  3. Function showLoader (){
  4. // Display the loader. for jQuery Mobile 1.1.0
  5. $. Mobile. loadingMessage = 'loading... '; // displayed text
  6. $. Mobile. loadingMessageTextVisible = true; // whether to display text
  7. $. Mobile. loadingMessageTheme = 'a'; // The theme style a-e of the loader.
  8. $. Mobile. showPageLoadingMsg (); // display the loader
  9. }
  11. // Hide the loader. for jQuery Mobile 1.1.0
  12. Function hideLoader (){
  13. // Hide the loader
  14. $. Mobile. hidePageLoadingMsg ();
  15. }
  16. </Script>

The display effect is similar.

Official1.2.0In this document1.1.0Is described as follows:

The page loading dialog was previusly configured globally with three settings
$. Mobile. loadingMessage,
$. Mobile. loadingMessageTextVisible, and
$. Mobile. loadingMessageTheme
WhichAre now deprecated. In addition to the methods for showing and hiding,
$. Mobile. showPageLoadingMsg and
$. Mobile. hidePageLoadingMsg areAlso deprecated.

This means that the $. mobile. showPageLoadingMsg and $. mobile. hidePageLoadingMsg methods are not used in version 1.2.0 to display the loader.

 

If you have any questions, please contact us!


How does jQuery Mobile define global loading without AJAX?

Simply use native jQuery to write it. You don't need to use Mobile anyway.

When jquery + ajax is used to query data, the JSP page displays "loading". After the query is complete, the queried data is displayed on the page.

Teach you the simplest. $ (Function () {$. get ("URL", function (Msg) {$ ("where you want to display the prompt" ).html ("data is loading .. "); $ (" Where you want to display the queried data ").html (Msg );});});. Okay, bro. It's detailed enough.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery ajax encoding jquery ajax file upload codeigniter jquery ajax jquery ajax rest jquery ajax upload multiple files php jquery ajax json example linker and loader
Related Article
JQuery AJAX Timeout Timeout problem detailed _jquery
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More