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

Issues with the alignment of columns using Bootstrap framework

CSS techniques for aligning content

Build a bootstrap table with rounded corners

Ways to prevent animations from displaying solely in IE

Guide to aligning Material UI card in the center (React)

What is the process for rendering content with renderajax?

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

Change the selection so that only the initial one appears in gray

Having difficulty retrieving/binding the correct Entity Id in JQuery, consistently retrieves the first item Id from the iteration

Leveraging jQuery for Sending Form Data to an ASP.NET ASMX Web Service

Utilizing Various jQuery Selectors for Option Values

Amend and refresh information using AJAX technology

Is there a way to show textboxes stacked on top of each other without causing them to

Switch body class when the navbar's collapse show class is toggled

Integrate the element offset into jQuery's offset calculations

Employ JQuery to create a smooth fading effect on a button when hovering over it, and then gradually fade it out

The Django server fails to display the CSS files upon activation

Whenever I try to upload a file using ajax in MVC, I consistently encounter a null Request.Files in action side

Guidelines for redirecting a page after a jQuery ajax call is made?