How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

Question

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to make it functional. Any insights or suggestions on how to tackle this issue would be highly appreciated.

Code

//Load Account Preferences
        function loadAccountPreferences() {
            $.ajax({
                type: "GET",
                dataType: 'json',
                url: '/JsonUserSettings/GetUserSettings',
                success: function (result) {
                    loadDefaultTab(result);                    
                },
                error: function(error) {
                    alert(error);
                }
            });
        }

        loadDefaultTab = function (tabId) {

            $("#dashboardTabs a: tabId").tab('show'); 
        }

jquery css twitter-bootstrap

Answer 1

Answer №1

After experimenting with the code, I managed to find a solution that works! One improvement would be to follow Adriani6's suggestion of storing the default tab value in the database with a # symbol before the tab name. Here is the updated code:

  //Retrieve Account Preferences
    function retrieveAccountPreferences() {
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: '/JsonUserSettings/GetUserSettings',
            success: function(result) {
                displayDefaultTab(result);
            },
            error: function(error) {
                alert(error);
            }
        });
    }

    displayDefaultTab = function(tabId) {
        let defaultTab = '#' + tabId;
        $('.nav a[href="#"]').attr("href",defaultTab).tab('show');
    }

Answer 2

After experimenting with the code, I managed to find a solution that works! One improvement would be to follow Adriani6's suggestion of storing the default tab value in the database with a # symbol before the tab name. Here is the updated code:

  //Retrieve Account Preferences
    function retrieveAccountPreferences() {
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: '/JsonUserSettings/GetUserSettings',
            success: function(result) {
                displayDefaultTab(result);
            },
            error: function(error) {
                alert(error);
            }
        });
    }

    displayDefaultTab = function(tabId) {
        let defaultTab = '#' + tabId;
        $('.nav a[href="#"]').attr("href",defaultTab).tab('show');
    }

Answer 3

Answer №2

I previously mentioned in my comment that the code you posted is incorrect because it will always display the last tab. Here's why...

Let's break down your code to understand what's happening...

$('.nav a[href="#"]') - This line selects all elements (potentially more than one) that are <a> tags with an href value of "#" and are within an element with the class nav.

Consider this example HTML structure...

<div class="nav">
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="/Settings">Third</a>
    <a href="/Help">Fourth</a>
</div>

Your array of elements would include "First" and "Second", and any operations on this array would affect both elements.

With an array of elements identified at this point, the next function performs the same action on each element in the array, resulting in every tab having a href attribute set to defaultTab.

Lastly, when you call .tab('show'), since it's an array and likely only allows one tab to be visible at a time, it consistently displays the last tab.

If your href values are already assigned and not dynamically generated (as your code suggests by applying the same href to all tabs), consider using the selector I suggested in your question:

$("#dashboardTabs a: " + tabId).tab('show');

Your revised solution should resemble this:

$('.nav a[href="'+defaultTab+'"]').tab('show');

This approach achieves the same outcome as before but now matches the intended href values without altering any existing elements.

Answer 4

I previously mentioned in my comment that the code you posted is incorrect because it will always display the last tab. Here's why...

Let's break down your code to understand what's happening...

$('.nav a[href="#"]') - This line selects all elements (potentially more than one) that are <a> tags with an href value of "#" and are within an element with the class nav.

Consider this example HTML structure...

<div class="nav">
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="/Settings">Third</a>
    <a href="/Help">Fourth</a>
</div>

Your array of elements would include "First" and "Second", and any operations on this array would affect both elements.

With an array of elements identified at this point, the next function performs the same action on each element in the array, resulting in every tab having a href attribute set to defaultTab.

Lastly, when you call .tab('show'), since it's an array and likely only allows one tab to be visible at a time, it consistently displays the last tab.

If your href values are already assigned and not dynamically generated (as your code suggests by applying the same href to all tabs), consider using the selector I suggested in your question:

$("#dashboardTabs a: " + tabId).tab('show');

Your revised solution should resemble this:

$('.nav a[href="'+defaultTab+'"]').tab('show');

This approach achieves the same outcome as before but now matches the intended href values without altering any existing elements.

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

Answer №1

Answer №2

Similar questions

The link that has been clicked on should remain in an active state

Modifying SASS variable values based on the presence of specific text in the page URL

The jQuery function fails to execute when the script source is included in the head of the document

Performing calculations using jQuery and organizing sub-totals into groups

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

Issues have been encountered with jQuery on function when it comes to dynamically inserted elements

Tips for ensuring the drop down button remains selected

Using arrow keys and return to effortlessly navigate through text input fields

Incorporating jQuery into Rails 6.1

Aligning icons side by side using only CSS styling

The <nav> and <section> elements are not appearing on the page

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

Error: The term "Particles" has not been defined

Looking for a prerequisite for running this script?

Removing a row from an HTML table using JavaScript

Move Picture with Click (like the action on Google Maps)

Embarking on the GSAP journey

Validate forms using jQuery with the power of ajax

Improving large JSON data with multiple calls

Make sure that the input field and label are aligned side by side in the