Download data only when the tab is active?

Question

I process all the data on the page once (on one url http: // localhost: 9111 / sale / ').

And showing on different tabs on this page.

<div class="tab-base"> <!--Nav Tabs--> <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#demo-lft-tab-1">Daily Sale</a> </li> <li> <a data-toggle="tab" href="#demo-lft-tab-2">Channel Wise Sale</a> </li> <li> <a data-toggle="tab" href="#demo-lft-tab-3">Returns</a> </li> </ul> </div> <div class="tab-content"> <form method="POST" action="{% url 'sale' %}"> {% csrf_token %} <div id="demo-lft-tab-1" class="tab-pane fade active in"> <div class="panel-body"> <table data-toggle="table"> <thead > <tr> <th data-align="center" data-sortable="true">Day</th> <th data-align="center" data-sortable="true">Sale Value</th> <th data-align="center" data-sortable="true">Quantity Sold</th> </tr> </thead> <tbody> {% for day, val, qty in sale_data %} <tr> <td>{{day}}</td> <td>{{val}}</td> <td>{{qty}}</td> </tr> {% endfor %} </tbody> </table> </div> </div> <div id="demo-lft-tab-2" class="tab-pane fade"> <div class="panel-body"> <table data-toggle="table" > <thead> <tr> <th data-align="center" data-sortable="true">Channel</th> <th data-align="center" data-sortable="true">Brand</th> <th data-align="center" data-sortable="true">Category</th> <th data-align="center" data-sortable="true">Selling Price</th> <th data-align="center" data-sortable="true">Quantity Sold</th> <th data-align="center" data-sortable="true">Percentage %</th> </tr> </thead> <tbody> {% for channel,brand,category,selling_price,quantity_sold, percentage in sal_data %} <tr> <td>{{channel}}</td> <td>{{brand}}</td> <td>{{category}}</td> <td>{{selling_price}}</td> <td>{{quantity_sold}}</td> <td>{{percentage}}%</td> </tr> {% endfor %} </tbody> </table> </div> </div> <!-- here is more code for other tab same as above --> <!-- --> </form> </div> 

But when the render data is large, loading the page takes longer.

Now I want to know how to load data only for the active tab?

Answer 1

Here is my solution:

  $('#tab-nav > a').one('click', function() { // event.preventDefault(); var target = $(this).attr('id'); $("#" + target + "_content .filter_importance .menu div:last-of-type").trigger('click'); // here you can simplify by the use the `load` function instead of triggering a `click` event. }); 

How it works:

• I use SemanticUI for my CSS framework, and #tab-nav > a for tabs. Following my naming policy, on each tab, I also added an identifier attribute, for example id="firsttab" .

• Content id="firsttab_content" have an ID attribute, for example id="firsttab_content" . Notice how the target element is determined using the target variable: $("#" + target + "_content .filter_importance .menu div:last-of-type") produces #firsttab_content .

• Inside the contents of the tab there are buttons that use the jQuery load function to load data.

• The above solution clicks on one of the buttons - trigger('click') .

Notes: 1. If you use one('click', function() , the content will be downloaded only once. If you change the code and do on('click', function() (pay attention to e one → on), the content will load every time you click on a tab.

2. if you want to set a specific tab by default and load the contents inside it, put `trigger ('click') inside

   $ ("document"). ready (function () {});

3. You can decide which content should be preloaded using this code:

   $ ("document"). ready (function () {

    // loads content for tab open on page load var hash = window.location.hash.substr(1); // gets the value of hash from URL $("#" + hash + "_content .filter_importance .menu div:last-of-type").trigger('click'); // targets and clicks the button which loads data inside the tab content area. 

   });

Please note that you can activate the tab with additional code - I do this by reading the hash from the URL in my backend. This is usually done by adding the active class to the element, in this case "#firsttab a" .

Answer 2

Regardless of any backend languages ​​or frameworks that you use, the browser only understands HTML , CSS and JavaScript . It seems that you are developing a Python application using the Django web framework.

The following are approaches to improve page loading and user experience.

• Show only minimal and important data . Provide minimal information only on the server side, where ever user eyes first view it when the page loads.
• Other parts may be empty . You have a place (for example, blank pages) to fill in the data later when the page is loaded into the browser.
• Use Ajax . After loading the page in the browser, you will receive an Ajax call to load the data.
• Loading ... In the meantime, you can display some information saying "Loading ..." or animated images to inform the user about data loading.
• Use client-side Javascript MVC Framework . Instead of displaying everything on the server side, you can transfer most of the rendering task to the client side using JavaScript MVC JavaScript frameworks such as Angular.js , Backbone.js , Ember.js , React.js , Vue.js and etc.
• Pre-populate a large data set . It is sometimes useful to load pre-aggregated data for the first time. When the user clicks on further, you can display detailed information related to the interests of users.
• Use pagination . If you intend to display data in a table, retrieve and show a limited number of rows using podcasting, for example, how the Google search result is displayed.
• Google - make the web faster . Finally, to speed up and optimize the performance of your web application, follow Google - make the web faster .

Answer 3

If you are using the Spring Framework, then use the concept of pagination. He will ensure that the required data needs to be retrieved and quickly