0

Tengo un problema al enviar datos de una modal a jQuery. No sé por qué no aparece el código, ¿podrían ayudarme a editar y decirme cuál es el problema para que no vuelva a pasar?

El error que recibo es el siguiente (captura de pantalla del error):

$ is not defined

Éste es el código:

<!doctype html>
<html lang="es">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <!-- Jquery ui -->
  <link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.min.css">
  <script type="text/javascript">
  $('#formularioeditar').submit(function(e){
    console.log("llegaron los datos");
  });
</script>
</head>
<body>

  <!-- Modal editar-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="formularioeditar">
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>



  <!-- jQuery first -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <!-- BOOTSTRAP MIN -->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery para ui -->
  <script src="js/jquery/jquery-3.2.1.js"></script>
  <script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <!-- codigo del calendario en assets -->
  <script src="assets/calendario/calendario.js"></script>
  <script src="js/index/index.js"></script>
</body>
</html>
2
  • El error que recibes es porque estás usando jQuery en el head ($('#formularioeditar').submit(function(e){ console.log("llegaron los datos"); });) antes de incluir jQuery al final del body. ¿Ese código lo incluiste después para hacer pruebas o es la causa real del problema?
    – Alvaro Montoro
    Commented el 22 jul. 2017 a las 22:47
  • es parte del codigo con el que tengo problemas, ya lo intente abajo de jquery y no me arroja nada , tambien lo llame desde otra pagina marca el mismo error gyazo.com/41e3ecb4dddbacd75912d6bf4e512a0a Commented el 22 jul. 2017 a las 23:54

2 respuestas 2

1

Te falto agregar el siguiente código y meter tu código dentro de este para que funcione:

$(document).ready(function() {

});

Tu código quedaría algo así:

$(document).ready(function() {
    $('#formularioeditar').submit(function(e){
    console.log("llegaron los datos");
  });
});

Intenta este método si no funciona me avisas, saludos

0

Toda la pinta de que estás usando un Wordpress,

Este error es bastante común verlo allí, lo que debes hacer al principio de tu hoja JS es declarar la variable

var $ = jQuery;

Con esto estarás declarando la variable $ como la librería jQuery a partir de ahí no tendrás problema.

Puedes probar lo siguiente para ver si cargó bien:

var $ = jQuery;
$(document).ready(function(){
alert('asd');
})

Y si al cargar la página te tira un Alert es que ya te funciona JQuery en el archivo.

Nos cuentas como te fue.

1
  • Disculpa, no me di cuenta, cuidado con esto: donde tienes esta línea $('#formularioeditar').submit(function(e){ ese script lo debes de invocar despues del llamado a JQuery que lo tienes en el footer. El problema es que estás intentando usar JQuery antes de incluirlo, recuerda que el navegador lee de arriba a abajo. Commented el 23 mar. 2018 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.