How to show 'waiting message' when adding new TAB ?

[Jonny]

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

[stworthy]

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.

[Jonny]

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

[stworthy]

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

[Jonny]

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

[stworthy]

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

[Jonny]

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