Geek Answers Handbook

How to keep tab active when page reloads?

When the button is pressed Save, the page loads the same way, adding an extra parameterto url:

window.location.replace('https://www.servis-racunara.net/pages/users.php?new_column_added');

So, here is how I check the weather parameter given in the URL:

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {}
});

So the page looks like this: enter image description here

When there is a URL new_column_added(that is, when you click the "Save" button), the page should reload, but the tab Edit User Listmust be active, and it must also contain its content. Here's how to create tabs with Bootstrap:

<ul id="mainTabs" class="nav nav-tabs  users-tabs" role="tablist">
   <li id="glavniUseri" role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">View Users</a></li>
   <li id="editUsers" role="presentation"><a href="#edit-user-list" aria-controls="profile" role="tab" data-toggle="tab">Edit User List</a></li>
   <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Target Groups</a></li>
   <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">API</a></li>
</ul>

And here is how I managed to make it Edit User Listactive:

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {
        console.log('radii ovoo');
        $('#glavniUseri').removeClass('active');
        $('#editUsers').addClass('active');
});

But all this makes it active Edit User List, but the contents of the tab are View Usersloaded after a reboot. I also tried to do this:

$(document).on('load', function () {
            var $link = $('li.active a[data-toggle="tab"]');
            $link.parent().removeClass('active');
            var tabLink = $link.attr('href');
            $('#mainTabs a[href="' + tabLink + '"]').tab('show');
        });

. , , , , . , , , , .

+4
1

:

$(document).ready(function() {
    if (window.location.search.indexOf('new_column_added') > -1) {
        console.log('radii ovoo');
        $('#glavniUseri').removeClass('active');
        $('#editUsers').addClass('active');
         $('#edit-user-list').parent().find('.active').removeClass('active');
        $('#edit-user-list').addClass('active');
});


$('a[href="#edit-user-list"]').tab('show');

https://jsfiddle.net/w8zjhamu/

+2

More articles:


All Articles