jquery loading when load

Question

i have script like this

function manualSeat(){
    $('.dimmed').show();
    $("#petaKursi").load('url');
    $('#wagonCode').val('');
    $('#wagonNumber').val('');
    $('#selSeats').val('');
    selectedGerbong = '';
    selectedSeats = Array();
    $('#manualSeatMap').show();
    $('.dimmed').hide(); 
}

that code above doesn't work maybe because code doesn't wait until load syntax finish loading,..(maybe)

what i want to ask is,how to make my $('.dimmed') works like loading that start when begin(show) loading and stop when loading finish(hide)

what i want is like this:: page load(with every div)=>click a button=>load a page to div(when loading,showLoader),when finish loading (hideLoader)

You must have a loader element in DOM which will have some gif or css3 loader and initialled its css display property will be set to block, once you know that window.onload event is triggered, hide the loader element.. — Rayon
– Rayon, Commented Aug 29, 2015 at 7:49
Tyre to load the JQuery Lib first <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> then try your request in script tag. — SaviNuclear
– SaviNuclear, Commented Aug 29, 2015 at 8:01

Rayon · Accepted Answer · 2015-08-29 07:54:52Z

2

try this:

var dimmed = $('.dimmed');
var showLoader = function () {
    dimmed.fadeIn();
};
var hideLoader = function () {
    dimmed.fadeOut();
};
document.addEventListener('DOMContentLoaded', showLoader);
window.onload = hideLoader;

You can call showLoader and hideLoader methods whenever you want to show or hide the loader element.

answered Aug 29, 2015 at 7:54

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Arief Over a year ago

so close sir, but what i want is like this loading appear when whole page is loading, not the "$("#petaKursi").load('url');" page load(with every div)=>click a button=>load a page to div(when loading,showLoader),when finish loading (hideLoader)

Rayon Over a year ago

Are you trying to load external URL in DOM ?

Ryan Arief Over a year ago

yes sir, i did modified your script, and it works fine now,.. thanks to you

Ryan Arief · Accepted Answer · 2015-08-29 08:54:05Z

0

thanks to Rayon Dabre what i actually want is like this

function manualSeat(){
    dimmed.fadeIn();
    $("#petaKursi").load('blablabla', function() {
       dimmed.fadeOut();
        });
    $('#wagonCode').val('');
    $('#wagonNumber').val('');
    $('#selSeats').val('');
    selectedGerbong = '';
    selectedSeats = Array();
    $('#manualSeatMap').fadeIn(); 
}

answered Aug 29, 2015 at 8:54

Ryan Arief

1,0553 gold badges19 silver badges39 bronze badges

Comments

user2399035 · Accepted Answer · 2015-08-29 08:54:14Z

The best way to do what you want is to use AjaxStart and AjaxStop function. This way you will fire when the Ajax call (.load is one of them) it will perform some actions.

So in your case:

$(document).ajaxStart(function (){
    //I begin the ajax call so I show the layer
    $('.dimmed').show();
    //you can also do other stuffs like changing the tab title
    document.title = 'loading...';
}).ajaxStop(function (){
    //The ajax loading has ended
    $('.dimmed').hide();
    document.title = 'page';
});

I'd go for an ID for the layer that you use while loading to identify it. If you want to fire this event only for some ajax call and not for other add the

global: false

attribute to that specific ajax call.

Collectives™ on Stack Overflow

jquery loading when load

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related