return to a specific Nav tab

Asked

Viewed 118 times

0

I have a controller, which after saved, it needs to be given to a specific tab, so I use as a retainer the following parameters.

return Redirect(Url.Action("Editar/" + resultado.Id, "ClienteEmpresa") + "#nav-profile");

With this I can, pick up the url, exactly, to what I want, but I don’t know how to make the Nav-Tab, #Nav-profile, be the one that opens, because you’re still opening, the first Tab.

My Url looks like this when opening

http://localhost:51029/ClienteEmpresa/Editar/14#nav-profile

But the tab that comes open is the #nav-home-tab

This is my HTML.

<div class="default-tab col-lg-12">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Empresa</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Contador</a>
            <a class="nav-item nav-link" id="nav-bloqueios-tab" data-toggle="tab" href="#nav-bloqueios" role="tab" aria-controls="nav-bloqueios" aria-selected="false">Bloqueios</a>
            <a class="nav-item nav-link" id="nav-financeiro-tab" data-toggle="tab" href="#nav-financeiro" role="tab" aria-controls="nav-financeiro" aria-selected="false">Controle de Vencimentos</a>
            <a class="nav-item nav-link" id="nav-cobranca-tab" data-toggle="tab" href="#nav-cobranca" role="tab" aria-controls="nav-cobranca" aria-selected="false">Controle De Cobranças</a>
        </div>
    </nav>
    <div class="tab-content pl-3 pt-2" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">


        </div>
        <div class="tab-pane fade " id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

        </div>
        <div class="tab-pane fade " id="nav-bloqueios" role="tabpanel" aria-labelledby="nav-bloqueios-tab">
            @Html.Action("_tblBloqueios", new { Id = Model.Id })
        </div>
        <div class="tab-pane fade " id="nav-financeiro" role="tabpanel" aria-labelledby="nav-financeiro-tab">
            @Html.Action("_tableVencimentos", new { Id = Model.Id })
        </div>

        <div class="tab-pane fade " id="nav-cobranca" role="tabpanel" aria-labelledby="nav-cobranca-tab">
            @Html.Action("_tableControleDeCobranca", new { Id = Model.Id })
        </div>
    </div>
</div>

How can I do that? I don’t know much about Js or Jquery. so any and all tips will be welcome.

javascript jquery

1 answer

2


This will require checking the presence of a # in the url.

function afterLoad(){
    var url = location.href;
    var splittedUrl = url.split("#");
    if (splittedUrl.length >= 2) {
        var goToTabAriaControls = splittedUrl[splittedUrl.length-1];
        $('a[aria-controls="' + goToTabAriaControls + '"]').click();
    } else {
        //implemente aqui o código caso não seja encontrada a presença de um #
    }
}

You can execute the above code whenever the page loads, for example, at the end of the View you could put that code and run it afterLoad() soon after, or put this code in a previously inserted javascript file and just execute the method, and the execution would still be in the View.

The presence of # url and last part found is used to perform the click action.

goToTabAriaControls will always be the string that is found after the last # found.

  • Please note that there is NO spacing between the a and the [

  • 1

    subarashi! , man, of all the people I’ve looked at on the net, (and I’ve got more than 5 hours of research, your script/explanation, it’s the only one that worked. thank you very much!

  • For nothing! I’m glad I could help

  • Not wanting to abuse, but taking advantage of the hook, would have as well as I direct to the tab, still open a modal? Because the truth is, the main goal is this, it’s a rule. (after I click save to add the client, obligatorily, I have to send the user to the #Nav-profile tab, in this tab I have a button that opens a modal to add a counter, but the truth is, it was to open in the tab, and already open the modal.

  • After executing the .click() check the value of goToTabAriaControls if it is the nav-profile open the modal

  • if (goToTabAriaControls == 'nav-profile') {&#xA; $("#addContador").load("_addContador?id=" + id, function () {&#xA; $("#addContador").modal();&#xA; });&#xA;&#xA; } thus?

  • I think that would be it

  • It didn’t work out so well, but I’ll keep researching here hehe, it’s halfway done!!

Show 3 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.