DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. Frameworks
  4. Show loading icon in JQuery Ajax request

Show loading icon in JQuery Ajax request

Sachin Khosla user avatar by
Sachin Khosla
·
Oct. 03, 11 · Interview
Like (0)
Save
Tweet
Share
28.14K Views

Join the DZone community and get the full member experience.

Join For Free

JQuery is the most used Javascript framework. It’s exceptionally simpler and famous. The best part of JQuery is that it has very nicely done documentation and lot many resources available online.

Lately, while doing one of my codeigniter I used JQuery and wanted to share a little snippet of code over here. This code helps you to show a loading icon while your Ajax request is being processed in the background.

JQuery has various events associated with Ajax request which can be associated with a set of functions or used to perform certain action(s). From the list of events we are going to use two global functions called ajaxStart & ajaxStop. By global we mean, that you can call it outside the Ajax function i.e. whenever the Ajax request is triggered these functions will be triggered automatically. Since these have global scope, these functions could be present at any part of the script, not necessarily inside the Ajax function. Apparently, this can help manipulation many HTML elements while doing the Ajax operations.

Similarly, we are going to use these two functions to show the loading icon while the Ajax request is processing. Following is the code snippet, which we are going to use.

<script>
// Assuming that the div or any other HTML element has the ID = loading and it contains the necessary loading image.
   $('#loading').hide(); //initially hide the loading icon
 
        $('#loading').ajaxStart(function(){
            $(this).show();
            //console.log('shown');
        });
        $("#loading").ajaxStop(function(){
            $(this).hide();
            //  console.log('hidden');
        }); 
</script>

Initially, we hide the loading icon on the page load using the JQuery’s hide() method. After that we define the above mentioned functions ajaxStart & ajaxStop. When an Ajax request is fired the global event ajaxStart is also fired and hence the associated function is called (as defined above). In this function we are going to show the loading icon using JQuery’s show method. In the same way when the Ajax request is completed successfully and it’s done, it will fire the ajaxStop event. In this function we are going to hide this loading icon and let the real content show inside the div.

There could be many ways to hide/show these elements i.e. you can put some animations etc. Also there would be totally different logic to show the Loading icons, but the best one is which works for you and is easier to impelement. So keep sharing your thoughts and the awesome code.

For now, I am hoping this code snippet would share few minutes of googling different websites.

 

From http://www.digimantra.com/technology/javascript/show-loading-icon-jquery-ajax-request/

Icon Requests JQuery

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Apache Kafka Is NOT Real Real-Time Data Streaming!
  • Using GPT-3 in Our Applications
  • 3 Main Pillars in ReactJS
  • Practical Example of Using CSS Layer

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: