Change active tab after user click in a specific link is not working

I have this link "http://proj.test/congress/1/congress-test/registration" where the user has a form to register in a congress. Its a muli step form, in the step 2 there is a message informing the user that he was registered with success.In this message there is a link "My Tickets":

 <a href="{{route('user.index', ['user' => Auth::id()])}}"My Tickes</a>

Route for the link:

    Route::get('/user/profile', [
        'uses' => 'UserController@index',
        'as'   =>'user.index'
    ]);

When the user click in "My Tickets" he goes to " "proj.test/user/profile?user=1" that is the page to edit some user account settings. In this page there are some tabs like "General Info", "My Tickets".

The default tab is "General Info", that is the tab to update some user general info.

Doubt: My doubt is how to turn the "My Tickets" tab active when the user in the congress registration page (http://proj.test/congress/1/congress-test/registration) clicks in "My Tickets".

Do you know how to achieve that?

The links to the tabs "General info" and to the tab "My Tickets" in the uer account page (proj.test/user/profile?user=1) have this hrefs below:

    <ul class="nav nav-pills bg-light-gray account_options" role="tablist">
     <li class="">
        <a class="nav-link active" href="#generalInfo" data-toggle="tab" role="tab">
            <i class="fa fa-user" aria-hidden="true"></i> <span class="d-none d-lg-inline-block">General Info</span></a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#myTickets" data-toggle="tab" role="tab">>MyTickets</span></a>
    </li>
    ...
    </ul>

Then the tabs are like below:

    <div class="tab-content  bg-white" id="myTabContent">
        <div class="tab-pane fade show active clearfix" id="generalInfo" role="tabpanel" aria-labelledby="home-tab">
            <form method="post" action="{{route('user.updateGeneralInfo')}}" class="clearfix">
            {{csrf_field()}}
            ...
            </form>
        </div>
    
        <div class="tab-pane clearfix fade" id="myTickets" role="tabpanel" aria-labelledby="contact-tab">
        ...
        </div>
    </div>

I was trying with jQuery like:

    var path = window.location.href;
        alert(path);
        $('.account_options a').each(function () {
            if (this.href === path) {
                $('a[href="#' + path + '"]').addClass('active');
            }
        });

But its not working.

The "My Tickets" dont become active when the user clicks in the link " <a href="{{route('user.index', ['user' => Auth::id()])}}"My Tickes</a>" in the registration page.

bobbybouwmann

8 years ago

Level 88

You can add the id after the url and it will automatically open that tab for you. So something like this

<a href="{{ route('user.index', ['user' => Auth::id()]) }}#myTickets">My Tickets</a>

2 likes

adamjhn

8 years ago

Level 3

Thanks, do you know also why jQuery is not working?

The alert appears but the active tab dont changes with:

 var path = window.location.href;
                alert(path);
                $('.account_options a').each(function () {
                    if (this.href === path) {

                        $('a[href="#' + path + '"]').addClass('active');
                    }
                });

With the code below when the "My Tickets" is clicked the active tab changes to "My Tickets" but only the tab link changes color but the tab content dont changes it remains the content of the tab 1 (#generalInfo).

var path = window.location.href;
    alert(path);
    $('.account_options a').each(function () {
        if (this.href === path) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });

bobbybouwmann

8 years ago

Best Answer

Level 88

After the # should be the id of the tab, not the full URL! In your case you will get something like this

a[href="#http://example.com/#somehthing"]

So instead use, do something like this

a[href="#myTickets"]

1 like

Please or to participate in this conversation.