Opening modal through Update button with specified ID using ajax

Question

symfony : i want to update a conseil through modal opening in the same page display.html.twig , so the adding of the conseil is working correctly (adding and updating has the same form ) , but when i want to update the modal is opening but inside it there is a whole page , i try it with AJAX .

Will you please check my code and tell me what is the solution? Thanks!

$(document).ready(function(){
    $(".update_btn").click(function(event){
        event.preventDefault();
        var ModalURL = $(this).attr('href'); 
        console.log("ModalURL: ", ModalURL);         $.ajax({
            url: ModalURL,
            type: "GET",
            success: function(data) {
                console.log("AJAX Response Data: ", data); 
                $("#myModal .modal-body").html(data); 
                $("#myModal").modal("show"); 
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error: ", error); 
            } 
        });
    });
});

this is the <script>

i tried some solutions like changing this line in script $("#myModal .modal-body").html(data);

by this $("#myModal .modal-body").html(data);

but here he show the form correctly inside the modal but the fields not filled with the selected conseil

  <td>
<a class="update_btn" href="{{ path('conseil_update', {'id': element.idConseil})}}">Update</a>
 </td>

button update

<a class="nav-link btn btn-success create-new-button" id="createbuttonDropdown" data-toggle="modal" data-target="#myModal"  style="margin-left: -500px;" aria-expanded="false" href="#">+ Créer Conseil</a>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="background-color: #191c24;">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Créer Nouveau Conseil</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #f01111;">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form id="conseilForm" action="{{ path('conseil_add') }}" method="post" enctype="multipart/form-data">
          {{ form_widget(fc) }} 
          <input type="hidden" name="_token" value="{{ csrf_token('add_conseil') }}"> 
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

this is the modal code

 #[Route('/update/{id}', name: 'conseil_update')]
    public function updateConseil($id,ConseilRepository $repo,Request $req,ManagerRegistry $manager){
        $conseil =$repo->find($id);
        $form = $this->createForm(ConseilType::class,$conseil);
        $form->handleRequest($req);
        if($form->isSubmitted()){
        $manager->getManager()->flush();
        return $this->redirectToRoute('getAll');
        }
        return $this->render('conseil/AfficherConseils.html.twig',[
            'fc'=>$form->createView(),
            'c' => $repo->findAll()
        ]);
    }

function update in controller