title: Have button link to Symfony controller route and open a modal
body: <p>I have a table of entities, where each row has the contents, and buttons to both edit and delete the entity in that row. I am trying to have a button link both link to a route in my controller as well as open up a modal. However, with <code>data-toggle</code> and <code>data-target</code> present the button wont link to the route's function. The link to route works if I don't open the modal. The reason I want to link to a new route is to build the Symfony form for edit in a separate function than the create form.</p>
  
  <p>The controller code</p>
  
  <pre><code>/**
   * @Route(name="editAnnouncement", path="/admin/announcements/edit/{announcementId}", methods={"GET"})
   * @param Request $request
   * @param string  $announcementId
   * @return Response
   * @throws \Doctrine\ORM\NoResultException
   * @throws \Doctrine\ORM\NonUniqueResultException
   */
  public function editAnnouncementAction(Request $request, string $announcementId)
  {
      die(dump("edit function is running"));
      $form = $this-&gt;createForm(FormType::class)
          -&gt;add('edit', SubmitType::class, array(
              'label' =&gt; ' Save changes',
              'attr' =&gt; ['class' =&gt; 'btn btn-primary']
          ))
      ;
  
      $form-&gt;handleRequest($request);
  
      $currentUser = $this-&gt;getUserFromAuth($this-&gt;getDoctrine()-&gt;getManager(), $this-&gt;getUser());
      $em = $this-&gt;getDoctrine()-&gt;getManager();
  
  
      if ($form-&gt;get('edit')-&gt;isClicked() and $form-&gt;isValid()) {
          $announcementToEdit = $em-&gt;getRepository(Announcement::class)
              -&gt;find($announcementId);
          $announcementToEdit-&gt;setContent($request-&gt;get('content'));
          $em-&gt;flush();
  
          $this-&gt;logger-&gt;info(
              'Announcement edited',
              [
                  'user id' =&gt; $currentUser-&gt;getId(),
                  'date created' =&gt; date("Y-m-d h:i:sa"),
                  'announcement id' =&gt; $announcementToEdit-&gt;getId(),
              ]
          );
  
  
          return $this-&gt;redirectToRoute('admin_announcements');
  
      }
  
      return $this-&gt;render(
          'Admin/_fragments/announcementEditModal.html.twig',
          [
              'form' =&gt; $form-&gt;createView()
          ]
      );
  
  }
  </code></pre>
  
  <p>The relevant code from the main Twig template which displays the table</p>
  
  <pre><code>td class="float-right"&gt;
                          &lt;div class="dropdown"&gt;
                              &lt;button class="btn btn-link"
                                  type="button"
                                  data-toggle="dropdown"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                              &gt;
                                  &lt;span class="fa fa-ellipsis-v"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;
                                  &lt;a
                                          role="button"
                                          href="{{ url('editAnnouncement', {'announcementId': announcement.id}) }}"
                                       class="btn btn-sm dropdown-item edit-button" data-toggle="modal" data-target="#announcementEditModal-{{ announcement.id }}" data-content="{{ announcement.content }}"&gt;
                                      &lt;div class="announcement-actions"&gt;
                                          &lt;span class="fas fa-pencil-alt mr-1"&gt;&lt;/span&gt;Edit announcement
                                      &lt;/div&gt;
                                  &lt;/a&gt;
  
                                  &lt;button
                                      class="btn btn-sm dropdown-item delete-announcement-button"  data-toggle="modal" data-target="#delete-announcement-modal-{{ announcement.id }}"  type="button"&gt;
                                      &lt;div class="announcement-actions"&gt;
                                          &lt;span class="fa fa-trash btn-link mr-1"&gt;&lt;/span&gt;Delete announcement
                                      &lt;/div&gt;
                                  &lt;/button&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
  </code></pre>
  
  <p>The edit modal template where I want to render the form.</p>
  
  <pre><code>&lt;div class="modal fade" id="announcementEditModal-{{ announcement.id }}" tabindex="-1" role="dialog" aria-hidden="true"&gt;
  &lt;div class="modal-dialog modal-lg" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header announcement-header"&gt;
              &lt;h5 class="modal-title"&gt;&lt;span class="fas fa-edit"&gt;&lt;/span&gt; Edit new announcement&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div class="announcement-card-header card m-3 border-0"&gt;
              &lt;div class="announcement-card-header card-body border-0 p-1"&gt;
                  &lt;span class="fa fa-info-circle fa-lg header-icon"&gt;&lt;/span&gt;
                  &lt;h5 class="align-header"&gt;ANNOUNCEMENT TEXT&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="announcement-card-body modal-body card border-0"&gt;
  
                  &lt;div class="announcement-card-body"&gt;
  
  
                      &lt;label for="exampleInputEmail1"&gt;ANNOUNCEMENT (SUPPORTS MARKDOWN)&lt;/label&gt;
                      &lt;textarea
                              class="form-control"
                              id="editAnnouncementText"
                              rows="5"
                              name="content"
                              form="edit-form"
                              maxlength="2000"
                      &gt;
                      &lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-footer border-0 bg-white pt-0"&gt;
              &lt;div&gt;
                  &lt;a
                          href="{{ url('editAnnouncement', {'announcementId': announcement.id}) }}"
                      class="btn btn-primary"
                          role="button"
                  &gt;
                      &lt;span class="fa fa-check mr-1"&gt;&lt;/span&gt;Save changes
                  &lt;/a&gt;
  
                  &lt;button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close"&gt;
                      Cancel
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>