Print Page - How to show 'waiting message' when adding new TAB ?

Title: How to show 'waiting message' when adding new TAB ?
Post by: Jonny on April 09, 2015, 01:37:43 AM

Dear ALL,

Is there any technic to show message when ADDING TAB ?
Sometimes need to be wait so long because of loading heavy page...
User easily become boring waiting for blank screen over 10 seconds...

This is my code to add TAB:
function addTab(title, url){
if ($('#tablgn').tabs('exists', title))
   { $('#tablgn').tabs('select', title); }
   else {

   var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"> Loading Please wait... </iframe>';
   $('#tablgn').tabs('add',{
title:title,
        content: content,
        closable:true,
        bodyCls:'noscroll'
});
}
}

Any help will be appreciated..
Thank you..

Regards,
JONNY

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: stworthy on April 09, 2015, 06:17:33 AM

Please try to call the 'showMask' method to display a loading message on the panel. This method is extended at http://www.jeasyui.com/forum/index.php?topic=3713.msg8561#msg8561.

Code:

$('#tablgn').tabs('add',{
  title: title,
  //...
});
var p = $('#tablgn').tabs('getTab', title);
p.panel('showMask','loading...');

When your page are loaded and parsed successfully, call 'hideMask' method to hide the loading message.

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: Jonny on April 09, 2015, 09:37:59 AM

Thank you for checking my problem....
After following your direction... adding 2 lines of command and add script about -> $.extend($.fn.panel.methods, { showMask: function(jq, msg){ bla bla bla} in <script> area...
The code become:

function addTab(title, url){
   if ($('#tablgn').tabs('exists', title))
   { $('#tablgn').tabs('select', title); }
   else {

   var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"> Loading Please wait... </iframe>';
   $('#tablgn').tabs('add',{
   title:title,
   content: content,
   closable:true,
   bodyCls:'noscroll'
   });

   var p = $('#tablgn').tabs('getTab', title);
   p.panel('showMask','loading...');

   }
}

The message almost not VISIBLE..
Because located on left bottom and showed about 3 digit of all word

Please provide a sample... which set the message location on top left in a TAB..
just make a simple page to be add...
The contain of page --> sleep for 10 seconds then showing a simple word --> HELLO WORLD...
including hideMask after showing HELLO WORLD...

Thank you if you want to help me SOLVE this totally...

Regards,
Jonny

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: stworthy on April 09, 2015, 05:28:40 PM

Please refer to the attached example 'test.zip'.

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: Jonny on April 09, 2015, 07:54:45 PM

Thank you for providing sample....
But still the same result.. only 2 word visible on Bottom Left of TAB
I am expecting the word shown on TOP Left of Tab...

This is the code, I am using word --> "Sorry I cannot see word -> loading..."
   <script type="text/javascript">
      var index = 1;
      function add(){
         var title = 'tab'+(++index);
         var url = 'test.php?title='+title;
         var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"> Loading Please wait... </iframe>';
         $('#tt').tabs('add',{
            title:title,
            content:content,
            closable:true
         });
         var p = $('#tt').tabs('getTab', title);
         p.panel('showMask', 'Sorry I cannot see word -> loading...');
      }
      function hideLoadingMsg(title){
         var p = $('#tt').tabs('getTab', title);
         p.panel('hideMask', 'Sorry I cannot see word -> loading...');
      }
   </script>

Please take a look at the "MISSING.JPG"

Regards,
Jonny

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: stworthy on April 10, 2015, 12:06:54 AM

Please refer to this example http://jsfiddle.net/60rc507m/1/

Title: Re: How to show 'waiting message' when adding new TAB ?
Post by: Jonny on April 10, 2015, 02:51:02 AM

Finally my problem solved...

Apparently need little correction on your sample test.js in line 9 from
var borderSize = parseInt(pal.css('padding'))+1;
to
var borderSize = parseInt(pal.css('padding')||0)+1;

Now the waiting message shown in the center of TAB
Thank you stworthy

Regards,
Jonny

EasyUI Forum

General Category => General Discussion => Topic started by: Jonny on April 09, 2015, 01:37:43 AM