How to redirect in Symfony 5 to specific tab data target

Question

User is on the 3rd tab and clicks on a DELETE button. I would like to redirect user to the same 3rd tab on the page.

**Template:**

<nav>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-target="#cars" data-toggle="tab" >Cars</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-target="#messages" data-toggle="tab" >Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-target="#extras" data-toggle="tab" >Extras</a>
        </li>
    </ul>
</nav>

<div class="tab-content">
    <div id="cars" class="tab-pane active">
      SOME TAB 1 CONTENT
    </div>
    <div id="messages" class="tab-pane fade">
      SOME TAB 2 CONTENT
    </div>
    <div id="extras" class="tab-pane fade">
      SOME TAB 3 CONTENT
    </div>
</div>


**Controller:**

   /**
     * @Route("/extra/{id}", name="extra_delete", methods={"POST"})
     */
    public function extraDelete(Request $request, Extra $extra): Response
    {
        if ($this->isCsrfTokenValid('delete'.$extra->getId(), $request->request->get('_token'))) {
            $entityManager = $this->getDoctrine()->getManager();
            $entityManager->remove($extra);
            $entityManager->flush();
        }

        return $this->redirectToRoute('car_index');**
    }

**I ve already tried this: return $this->redirect($this->generateUrl('car_index').'#extras'); but doesnt work.

Thank you

hi peter, this is not related to symfony or php at all, of course this is about bootstrap and as it is one of bootstraps js-components (tabs) u will have to include a little script, already answered: https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink — john Smith, Jul 05 '21 at 18:34
Does this answer your question? [Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink](https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink) — john Smith, Jul 05 '21 at 18:35
thank you @john Smith for the correct hint. The linked topic pushed to the correct direction. For the exact solution see my answer below. — Peter Tamas Ujj, Jul 06 '21 at 07:57

score 0 · Answer 1 · edited Jul 22 '21 at 17:59

For future reference the solution was indeed Javascript.

In the controller I put a parameterized URL:

 return $this->redirectToRoute('car_index', ['param' => 'extrakTab']);

In the template I run this script:

 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const parameter = urlParams.get('param')
 if(parameter !== null){
     let elements = [];
     elements = document.getElementsByClassName('tab-pane');
     toggleClass();
     function toggleClass(){
         for (let i = 0; i < elements.length; i++) {
             elements[i].classList.remove('active');
             elements[i].classList.add('fade');
             }
         }
     var element = document.getElementById(parameter);
     element.click();
     }

How to redirect in Symfony 5 to specific tab data target

1 Answers1