Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/.

Here is an example of the code:

<div dojoType="dijit.layout.TabContainer" style="width: 100%;height: 100px" tabStrip="true">
    <div dojoType="dijit.layout.ContentPane" title="First tab" selected="true">
        11
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Second tab">
        2222
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Last tab">
        333333
    </div>
</div>

--EDIT--

When the page refreshes every 5 seconds, all three tabs' data is displayed and the page is being loaded. However, I want to prevent showing the data from all tabs while the page is loading. Each tab contains a large amount of data, and displaying all of it upon each refresh is not ideal for my application.

javascriptjqueryhtmljspdojo

Answer №1

I completely agree with xaris08's suggestion on loading tabs without refreshing the page by using tab-specific ajax. However, if you're in a situation where reloading the page is necessary (although not recommended), you can try a workaround like the following code snippet.

<div dojoType="dijit.layout.TabContainer" style="width: 100%;height: 100px" tabStrip="true">
    <div dojoType="dijit.layout.ContentPane" title="First tab" selected="true">
     <div id="content1"></div>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Second tab">
     <div id="content2"></div>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="Last tab">
       <div id="content3"></div>
    </div>
</div>

require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/parser"]);

setTimeout(function () { location.reload(true);}, 8000);

require(["dojo/html", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(html, dom, on){
 setTimeout(function () { 
   html.set(dom.byId("content1"), "11");
   html.set(dom.byId("content2"), "22222");
   html.set(dom.byId("content3"), "33333333");
           }, 1000);
});

In this approach, each time the page loads, there's a delay to allow the tabs to render - one second is sufficient. After that, you inject values into the DOM using `html.set`. Take a look at it here.

Answer №2

To easily access the selected tab, assign an id to the outer div element (container) and use this code snippet:

dijit.byId('id_of_outer_div').selectedChildWidget

However, it is uncertain whether you can reload only the specific tab using location.reload().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...

javascriptpythonhtmlweb

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Recently diving into Angular and facing a perplexing issue: "openClose is not defined at HTMLButtonElement.onclick (index:13)" Even after scouring through various resources, the error seems to be rooted in the index page rather than within any of the app ...

javascripthtmlangulartypescript

Is it possible for a chrome extension to allow only specific third-party cookies and storage to be

My Chrome extension inserts an iframe from foo.com into bar.com, creating a situation where bar.com now includes a foo.com iframe. However, I have observed that this iframe encounters difficulties when attempting to write to localStorage if the user has ...

javascriptgoogle-chromegoogle-chrome-extensionlocal-storage

Error: The JSON data type is not recognized - Asp.Net MVC 4

I've been struggling to send a complex JSON object to my action with no success. Below is my javascript code: $.ajax({ url: "http://localhost:52593/" + urlAction.Controller + "/" + urlAction.Action, type: type, dataType: dataType, da ...

javascriptc#asp.netjsonasp.net-mvc

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

I am working on a web form that includes two select fields: Country and City: <select id="country" onchange="getCity(this);"> <option value="">-- Please select your country --</option> <option value="1">Austria& ...

javascriptjqueryajaxmobilesoft-keyboard

When using Jquery, hovering over an element will cause the full title to be

I have created a toggle div that displays an ellipsis (...) when the long title is longer than 30 characters. Now, I want the full text of the long title to appear when hovering over the div. Check out this JS Fiddle for reference. JS $('#popu ...

javascriptjquery

Unable to store cookie using jQuery on Internet Explorer 9

Having trouble setting a cookie on IE9 and can't figure out why. My objective is to create a cookie that expires after a year, using the code below: $.cookie( name, value, { expires:days } ) where days equals 365. However, the cookie disappears as s ...

javascriptjquerycookiesinternet-explorer-9

How to instantly return progress bar to zero in bootstrap without any animations

I am currently working on a task that involves multiple actions, and I have implemented a bootstrap progress bar to visually represent the progress of each action. However, after completion of an action, the progress bar is reset to zero using the followi ...

javascriptjquerycsstwitter-bootstrap

A guide on linking a jQuery dialog to an HTML element once the data has been updated with an AJAX response

On my PHP page, I have implemented a jQuery script to open a dialog window. The code for this is as follows: <script type="text/javascript"> $(document).ready(function() { var $loading = $('<img src="loading.gif" ...

phpajaxjquery-uijquery

Nullify the unfulfilled fetch call

When a value is entered in the search bar on the webpage, it gets added to a URL and used to retrieve JSON data. Everything works smoothly, but if a value is inputted that the API doesn't have information for, a null response is returned. The questio ...

javascriptreactjsexpressfetch

Anticipating the execution of pool.query within a callback function in the Express framework

Within an Express post endpoint, I am utilizing crypto.generateKeyPair. After generating the key pair, I wish to store it in my database and then return the ID of the inserted row within the same endpoint. Here is the code snippet for the endpoint: app.p ...

javascriptnode.jsexpresspool

Sending an array to another file upon button click event in a React application

Hey everyone, I'm currently getting started with React. I have this interesting situation where I need to handle an array of IDs that are obtained from selected checkboxes. My goal is to pass this array to another file called Employee.js when a button ...

javascriptreactjs

The custom layout in NestJS version 13 failed to display

I have implemented NextJs 13 in my project for building purposes. I am trying to use CustomLayout as the primary layout for my entire website. Even though there are no errors, I am facing an issue where the CustomLayout does not display as expected. ...

javascriptreactjsnext.jsnext.js13

Extracting POST information through PHP's AJAX Request

I am facing an issue where I keep receiving null values when using the following code: Here is my Ajax request: formData = { u: "3959eeadb32e02b85a792e21c", id: "6d7613df26" }; $.ajax({ ...

javascriptphpjqueryajaxnull

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

htmlangularangular-material

Encountering a Django Channels issue while loading the JavaScript wrapper

After successfully running the server, the following appeared in my cmd prompt: System check identified no issues (0 silenced). January 21, 2020 - 17:43:42 Django version 3.0.2, using settings 'crm.settings' Starting ASGI/Channels version 2.4.0 ...

javascripthtmldjangodjango-channels

Having trouble with submitting data in an ExpressJS POST request while using mongoose?

As I embark on building my first express.js application, I encounter my initial obstacle. The setup is rather simple. Routes in app.js: app.get('/', routes.index); app.get('/users', user.list); app.get('/products', product. ...

javascriptnode.jsmongodbexpress

Performing an AJAX call using Object-Oriented Programming in PHP

The application is designed to display an image, along with the name and occupation based on user input when hovered. I am encountering the following issues: Notice: Undefined index: src in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX. ...

phpjqueryajax

React - The issue with my form lies in submitting blank data due to the declaration of variables 'e' and 'data' which are ultimately left unused

Currently, I'm working on incorporating a form using the react-hook-form library. Despite following the documentation and utilizing the handleSubmit function along with a custom Axios post for the onSubmit parameter like this: onSubmit={handleSubmit( ...

javascriptreactjsmaterial-uireact-hook-form

Error found - PHP if condition inside HTML td element

Whenever I open my browser, I encounter this error message: Parse error: syntax error, unexpected 'if' (T_IF) I have been working on creating an HTML table to display prices for a Woocommerce product. Although I've come across similar issu ...

phphtml