« Previous

A YUI Loading Panel Widget

Posted on January 17, 2008
Filed Under Javascript | 17 Comments
Tags: , , ,


Probably needless to say, but here it is. A web page which is processing a lengthy Ajax request and doesn't provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here's a very handy loading indicator widget for Ajax programmers who use YUI.

Files

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>
<script type="text/javascript" src="[PATH_TO_JS]/loadingpanel.js"></script>

How to Use

First, create a new instance of loading panel. After that, you can call show or hide method on the loading panel object.

var loadingPanel = new yuiLoadingPanel();

//loadingPanel.show();
//loadingPanel.show("Processing...");
//loadingPanel.hide();

The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:

loadingPanel.cancelEvent.subscribe(function(e, a, o){
  alert('You clicked cancel!');
});

loadingpanel.js:

$D = YAHOO.util.Dom;
$E = YAHOO.util.Event;
var yuiLoadingPanel = function(conf){
    conf = conf == undefined ? new Array() : conf;
    conf.id = conf.id == undefined ? 'yuiLoadingPanel':confi.id;
    conf.header = conf.header == undefined ? 'Loading, please wait...':conf.header;
    conf.width = conf.width == undefined ? '240px':conf.width;
    this.conf = conf;
    this.cancelEvent = new YAHOO.util.CustomEvent("cancelEvent", this);
    this.init();
	
};

yuiLoadingPanel.prototype = {
    init:function(){
        var loadingPanel = new YAHOO.widget.Panel(this.conf.id,{
            width:this.conf.width,
	    fixedcenter:true,
            close:false,
            draggable:false,
            modal:true,
            visible:false
        });
    
       loadingPanel.setBody(this.conf.header + 
               '<img src="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
               loadingPanel.render(document.body);
               $D.addClass(loadingPanel.id, 'tcc_lightboxLoader');
               var cancelLink = document.createElement('a');
               $D.setStyle(cancelLink, 'cursor', 'pointer');
               cancelLink.appendChild(document.createTextNode('Cancel'));
               $E.on(cancelLink, 'click', function(e, o){
       	           o.self.loadingPanel.hide();
       	           o.self.cancelEvent.fire();
               }, {self:this});
               loadingPanel.appendToBody(document.createElement('br'));
               loadingPanel.appendToBody(cancelLink);
               $D.setStyle(loadingPanel.body, 'text-align', 'center');
               $D.addClass(document.body, 'yui-skin-sam');
        this.loadingPanel = loadingPanel;
    },
    show:function(text){
        if(text != undefined){
            this.loadingPanel.setHeader(text);
        }else{
	    this.loadingPanel.setHeader(this.conf.header);
	}
	this.loadingPanel.show();
    },
    hide:function(){
        this.loadingPanel.hide();
    }
};

Go to Top

More interesting posts ...

Comments
17 Comments so far
  1. Steve January 24, 2008 4:41 pm

    I'd like to ask for some clarifications as I can't get it working and would appreciate some help.

    2. var loadingPanel = new yuiLoadingPanel();

    //loadingPanel.show();
    //loadingPanel.show("Processing...");
    //loadingPanel.hide();

    1. Does this go into , section? I assume it needs to be enclosed into standard JavaScript tags <script., right?

    2. I plugged all code into blank HTML page, into body and nothing happens when I click button. In Firefox, I get an errors:

    YAHOO is not defined
    $D = YAHOO.util.Dom;

    and

    loadingPanel is not defined
    onclick(click clientX=0, clientY=0)

    Do I need to install something else? Thanks.

  2. Cuong January 29, 2008 10:51 am

    @Steve,

    You need to include YUI library files, which is described in the File section of this post.

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css">
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script>
    

    Of course for merely a loading panel, the code above is quite heavy. If you use YUI as your Ajax framework, you will most likely have these files included already. The trade-off now then is just the size of the loadingpanel.js itself, and you can conveniently call loadingPanel.show('bla bla') whenever you need it.

  3. Patrick February 1, 2008 9:46 am

    I noticed that the animated gif sometimes fails to "animate" properly in IE6 after a post back. I found the following fix...

    http://www.mredkj.com/vbnet/AnimatedGifOnPostback.html

    any idea how to fix in your example?

  4. Patrick February 1, 2008 10:30 am

    got it...

    change "show function" to this...

    show:function(text){
    if(text != undefined){
    this.loadingPanel.setHeader(text);
    }else{
    this.loadingPanel.setHeader(this.conf.header);
    setTimeout('document.images["Act"].src = "../Images/Activity.gif"', 200);
    }

  5. DDTech February 5, 2008 12:54 pm

    Lovely!

    thanks for the code. I am playing with the panel, using it as a dialog (don't want to use the "Dialog" widget for some reasons in this case).

    I realized that sometimes submit()'s or onClick()'s fire below the mask so I am disabling all buttons after calling the dlg.show().

    However I did not know how to catch if someone cancels the dialog by clicking on "X" as I did not know how to hook onto the hideEvent(). Your code showed me how to subscribe to that event and it works like a charm.

    Thx

    F.

  6. Faster March 5, 2008 5:37 am

    Hy!

    Sorry for my English.
    I'm absolutely beginner in ajax.

    I'm using a Ajax loader script in my page.

    I understand that if I use YUI for this script. I must use YUI to load my pages on the site? So my Ajax page loader script is unnecessary?

    Thx

    Faster

  7. Cuong March 6, 2008 10:45 pm

    So my Ajax page loader script is unnecessary?

    I am not sure which Ajax script you are referring to, but if you meant this one, then the answer is no. YUI has already encapsulated this functionality into its library, which is called the Connection Manager.

  8. prince March 11, 2008 4:53 am

    Can this loding indicator mask only certain div not the whole body, i think it will be better if this loading indicator will be shown over any element and mask it .. how that thing can be implemented .. ??

  9. Cuong March 12, 2008 11:40 pm

    I am not sure but I think it's doable. A mask in YUI is simply a semi-transparent DIV which placed above all elements in a page. If you want this mask to cover only certain elements, you have to manually position this mask.

    Go to this URL and take a look the code that has "sizeMask: function ()", you'll see how mask is implemented in YUI. Use style.width, height, left, and top to adjust the mask.

    Untested, good luck.

  10. yeah March 22, 2008 8:56 am

    Is there any way i could do this amazing effect without YUI? I mean, using a single js file with all the necessary functions and code to recreate the effect. Thanks.

  11. [...] ????? ??????? ??????? ??????:   ??????????? ???????? ??????  AJAX ?????? ???????????? ???? ????????????? ? ???????-  ?????? ??? ?????????? ?????? ? ???????-  AJAX ?????? ??? ???????? ????? ????????-  ???????? ????????? ????????? ??? ??????? ?? ?????? AJAX [...]

  12. ???? ???????? » ???? ??????? April 15, 2008 12:39 pm

    [...] ??? ????????. ??????, ??? ????? ????, ?? ? ??? ??? ????. ?? ??? ???? ?????? ?? ???????, - [...]

  13. jaxnoob May 3, 2008 2:31 am

    Hi, i am a noob at this and would like to use this preloader on my website but dont have a clue to integrate the script to my pages to get it to work, can someone please assist....

    Many thanks

  14. mp3 bollywood ringtones...

    Get best card credit student apostar jugar portal...

  15. BD-Team August 8, 2008 9:04 am

    When i develop my CMS i integrated 3 useful / for me:) / function.
    Sorry my bad english, i' am from hungary.

    There is the modified source code:

    yuiLoadingPanel.prototype = {
    ...
    ...
    ...
        hide:function(){
            this.loadingPanel.hide();
        },
        updateBody:function(BodyContent,DoNotShowCancelLink){
            this.loadingPanel.setBody(BodyContent);
    		if(!DoNotShowCancelLink){
    			var cancelLink = document.createElement('a');
    			$D.setStyle(cancelLink, 'cursor', 'pointer');
    			cancelLink.appendChild(document.createTextNode('Bezaras'));
    			$E.on(cancelLink, 'click', function(e, o){
    				o.self.loadingPanel.hide();
    				o.self.cancelEvent.fire();
    			}, {self:this});
    			this.loadingPanel.appendToBody(document.createElement('br'));
    			this.loadingPanel.appendToBody(cancelLink);
    		}
    
        },
        updateBodyWithTimedHide:function(BodyContent,Timer){
            this.loadingPanel.setBody(BodyContent);
    		setTimeout(function(){this.loadingPanel.hide();}.bind(this), Timer);
        },
        updateBodyWithTimedFunctionCall:function(BodyContent,FunctionToCall,Timer){
            this.loadingPanel.setBody(BodyContent);
    		eval("setTimeout(function(){this.loadingPanel.hide();" FunctionToCall "}.bind(this), Timer)");
        }
    };
    

    Sample usage:

    ...
    ...
    ...
    var loadingpanelconf2 = new Array();
    
    loadingpanelconf2.header = "A hir torlese folyamatban ...<br/>";
    loadingpanelconf2.width = "450px";
    var loadingPanel2 = new yuiLoadingPanel(loadingpanelconf2);
    
    loadingPanel2.show();
    loadingPanelObj = loadingPanel2;
    
    if(jsonValasz.AjaxEredmeny==0){
      loadingPanelObj.updateBody('<b>SIKERTELEN torlesi keres!<br/> Az adminisztracios rendszer hibat jelzett a torlesi kerelem soran!<br/></b>');
    
    loadingPanel2.cancelEvent.subscribe(function(e, a, o){
      Ajax_ReloadhirLista('kozep');
    });
    
    }
    
    if(jsonValasz.AjaxEredmeny==1){
    
    setTimeout("loadingPanelObj.updateBodyWithTimedFunctionCall('<b>A torles sikeresen vegrehajtva!<br/> Adatfrissites kerese ...</b><br/>',\"Ajax_ReloadhirLista('kozep');\",2000)", 2000);
    
    }
    
    ...
    ...
    ...
    
  16. Maxim August 20, 2008 6:41 pm

    Any have other samples? Just can't search in all Internet!

  17. why NOT September 4, 2008 12:15 am

    hi ! this nice worked . how to load Dynamic page in ( DIV ) with out refresh with this method ?

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

Attention
If you want to post source code, please wrap it with <pre> and </pre>

Categories

Polls

  • Tell us who you are:

    I am a...

    View Results

    Loading ... Loading ...