Search code examples
javascriptjquerybootstrap5-modal

ReferenceError: $ is not defined - Modal error

I have this code but it gives me an error when opening the modal:

ReferenceError: $ is not defined

Can somebody help me?

First we have the form, almost at the end the modals and then the jquery script.

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
 rel="stylesheet" integrity="sha384- 
 EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
   crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
  <link rel="icon" type="image/jpg" href="./assets/img/cocinando.png" />

  <title>Mi recetario personal</title>
</head>

<body>

This would be the modal that appears when there is success

    <button id="abrirModalCorrecto" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCorrecto" style="display:none;">
    </button>
    <div class="modal fade" id="modalCorrecto" tabindex="-1" aria-labelledby="exampleModalLabelCorrecto" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabelCorrecto">Información</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria- 
       label="Close"></button>
          </div>
          <div class="modal-body">
            Receta insertada correctamente.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs- 
         dismiss="modal">Cerrar</button>
          </div>
        </div>
      </div>
    </div>

This would be the modal that appears when there is error.

<button id="abrirModalError" type="button" class="btn btn-primary" data-bs- 
     toggle="modal" data-bs-target="#modalError" style="display:none;">
</button>
<div class="modal fade" id="modalError" tabindex="-1" aria- 
     labelledby="exampleModalLabelError" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabelError">Error</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria- 
       label="Close"></button>
      </div>
      <div class="modal-body">
        Todos los campos son obligatorios
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs- 
       dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

    <script>
      
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      console.log(urlParams);

      //Si error existe porque todos los campos no están rellenos, abre el modal ERROR
      if (urlParams.get("error") != null && urlParams.get("error") == "1") {
        //alert("Todos los campos son obligatorios");
        $("#abrirModalError").click();
      }
    
    </script>

  </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
  ></script>
  <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
  <script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> 
 </script>


</body>

</html>
Solution

  • You need to load jQuery in the <head> section of your pages or before any custom scripts that use jQuery.

    To fix it move to your head element.

    <head>
...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
...
</head>