All geek questions in one place

JQuery tabs - display indicator in div container during ajax loading

jQuery 1.7.1, jQuery UI tabs. I have the following HTML representing tabs,

<div id="tabs"> <ul> <li><a href="t1" title="content">Gallery</a></li> <li><a href="t2" title="content">Polls</a></li> <li><a href="t3" title="content">Events</a></li> </ul> <div id="content"></div> </div>

I need to show an indicator in the content div container when I click or select a tab. I tried the following:

HTML

 <div id="content"><img id="ind" src="images/indicator.gif" alt="Loading..." style="display:none"/></div>

Javascript

 $.ajaxSetup({ cache:false, beforeSend: function() { $('#ind').show() }, complete: function(){ $('#ind').hide() }, success: function() {} });

This works with the following tab selection code, which I execute to select the default tab when the page loads,

 var $tabs = $('#tabs').tabs(); $tabs.tabs('select', 1);

But whenever I click on the tab, the indicator is not displayed. Any idea why?

+4
source share
3 answers

You do not call any ajax in the tab selection.

if you call the contents of the tab using ajax to be displayed.

I checked this with a small example added below.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Load Demo</title> <link rel="stylesheet" href="demos.css"> <link rel="stylesheet" href="jquery.ui.tabs.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery.ui.tabs.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajaxSetup({ cache:false, beforeSend: function() { $('#ind').show() }, complete: function(){ $('#ind').hide() }, success: function() {} }); $( "#tabs" ).tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } } }); }); </script> </head> <body> <div id="content" style="border:1px solid red"><img id="ind" src="images/indicator.gif" alt="Loading..." style="display:none"/></div> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="load.php?url=http://www.google.com">Tab 1</a></li> <li><a href="load.php?url=http://www.yahoo.com">Tab 2</a></li> <li><a href="load.php?url=http://www.msn.com">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </body> </html>

New code with optional jQuery plugin

 <!DOCTYPE html> <html lang="en"> <!-- Created using / Source can be edited via /iwajir/8/edit --> <head> <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script class="jsbin" src="http://malsup.github.com/jquery.blockUI.js"></script> <meta charset="utf-8"> <title>jQuery UI Tabs - Content via Ajax</title> <script> $.ajaxSetup({ cache:false, beforeSend: function() { $('#content').block({ message: '<img id="ind" src="images/indicator.gif" alt="Loading..." style="border: 1px solid red"/>', css: { width: '100%', width: '100%', padding: '5px', backgroundColor: '#FFF', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', color: '#000' } }); }, complete: function(){ }, success: function() {} }); $(function() { $( "#tabs" ).tabs({ ajaxOptions: { success:function() { $('#content').unblock(); }, error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } } }); }); </script> </head> <body> <div id="tabs" style="position:relative"> <ul> <li><a href="http://jsbin.com/ewoyos/2" title="content">Tab 1</a></li> <li><a href="http://jsbin.com/imakug/3" title="content">Tab 2</a></li> <li><a href="http://jsbin.com/ayocul" title="content">Tab 3</a></li> </ul> <div id="content" style="border: 1px solid red"></div> </div> </body> </html>
+4
source

This is not the answer to your specific question, but to achieve a similar result, I used the following:

 $('#loading_indicator').show(); $('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); }, load: function(event, ui) { $('#loading_indicator').hide(); }});
+1
source

The jQuery UI Tabs widget has a special beforeLoad event for this.

If you look at the official jQuery UI demo for Ajax , you will see how this event is used to handle errors. And it is also useful for customizing the contents inside tabs at startup.

Here is a snippet of working code (there is only one important line in JS and 3 lines in HTML):

 $(function() { $("#tabs").tabs({ beforeLoad: function( event, ui ) { ui.panel.html($('#ind').clone()); // the only line one I added to the official sample ui.jqXHR.fail(function() { ui.panel.html("ERROR: Couldn't load this tab."); }); } }); }); 
 <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="https://rawgit.com/jquery/jquery-ui/master/tests/unit/tabs/data/test.html">Tab 1</a></li> <li><a href="https://hub.github.com/hub.1.html">Tab 2</a></li> <li><a href="http://google.com/not-found-ajax-content">Tab 3 (broken)</a></li> </ul> <div id="tabs-1"> <p>Preloaded tab content</p> </div> </div> <!-- important lines below (the HTML of the loading indicator) --> <div style="display:none"> <img id="ind" src="http://www.ajaxload.info/images/exemples/1.gif" alt="Loading..."/> </div>

Please note that the download indicator is located inside the HTML hidden <div> , and it is copied inside the contents of the tab during loading (which will be automatically replaced immediately after loading the tab).

+1
source

Source: https://habr.com/ru/post/1396553/

More articles:


All Articles