Como cargar correctamente Jquery y Bootstrap – jquery bootstrap

Pregunta:


Buenos dias a todos, estoy haciendo una web que hace uso de JQuery y de Bootstrap (incluido algunos plugins como DateTimePicker). Mas o menos consigo hacerlo funcionar pero no consigo que me quede claro el tema de las cargas de los distintos scripts y estilos. Por ejemplo, yo tengo la siguiente pagina de inicio, un formulario que valida si existe un usuario:

<html>
<head>
  <title></title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src='js_propio/cookies.js'></script>
  <script src='js_propio/funciones.js'></script>
  <script src='js_propio/eventos.js'></script>


  <!-- -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="assets/css/vendor.css">
  <link rel="stylesheet" type="text/css" href="assets/css/flat-admin.css">

  <!-- Theme -->
  <link rel="stylesheet" type="text/css" href="assets/css/theme/blue-sky.css">
  <link rel="stylesheet" type="text/css" href="assets/css/theme/blue.css">
  <link rel="stylesheet" type="text/css" href="assets/css/theme/red.css">
  <link rel="stylesheet" type="text/css" href="assets/css/theme/yellow.css">  
</head>
<body>

<!-- AQUI VA EL CONTENIDO -->

  <script type="text/javascript" src="assets/js/vendor.js"></script>
  <script type="text/javascript" src="assets/js/app.js"></script>
  <script src='js_propio/cookies.js'></script>

</body>
</html>

Por las funciones que yo tengo programada, realizo las cargas de las otras paginas con un metodo GET, que limpia un determinado DIV y carga dentro el html.

Aqui un ejemplo de la funcion:

 $('body').on('click', "#btnCita", function(ev){
      $.get( "form.html", function( data ) {
           $("#carga").html('');
           $("#carga").html(data);
           selecEspecialidad();
    });           
  });

El problema que surge es que, si dejo las llamadas a scripts que hay en su head(las mismas que las que hay en el head de la pagina principal) muchas veces las funciones se me ejecutan dos veces, en cambio, si las elimino y dejo html solamente, intentando que haga uso de los scripts que hay en la pagina principal, no se ejecutan.

Asimismo, en otra de las cargas, llamo a una pagina con un formulario, en el que uno de los campos es un calendario (en español).

El problema aqui reside en que, la configuracion del calendario se
encuentra dentro de un $(document).ready(function()), por lo que no
se ejecuta correctamente al ejecutarse al cargar la pagina, y no al
ser cargada en la pagina principal (no se si me he explicado bien)

(EDICIÓN : éste ultimo párrafo no lo puedo editar para mejorar la redacción porque no se entiende la idea).

     <div class="row" id="datosCita">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header oculto">
              Rellene los siguientes datos
            </div>
            <div class="card-body">
              <div class="row"> 
                <div  id="datos" class="oculto">
                  <select class="select2" id="listEspec">
                    <option value="0">-- Seleccione una especialidad --</option>
                  </select>
                </div>
                <div id="profesionales" class="oculto">
                  <select class="select2" id="listProf">
                    <option value="0">-- Seleccione un profesional --</option>
                  </select>
                </div>
                <div class="input-group oculto">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input class="form-control" id="date" name="date" placeholder="DD/MM/YYYY" type="text"/>
                </div>
              </div>
              <div id="cargaTablaCitas"></div>     
              <div id="iconosNav">
                <img src="iconos/siguiente.png" id="btnSiguiente" style="cursor: pointer;"/>
              </div>
            </div>
          </div>
            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="form-footer">
            <div class="form-group">
              <div class="col-md-9 col-md-offset-3">
                <button type="submit" class="btn btn-primary">Confirmar cita</button>
                <button type="button" class="btn btn-default">Cancelar</button>
              </div>
            </div>
          </div>
        </form>
            </div>
          </div>
        </div>
      </div>
    </div>

      </div>

      <script type="text/javascript" src="assets/js/vendor.js"></script>
      <script type="text/javascript" src="assets/js/app.js"></script>
       <script src='js_propio/cookies.js'></script>

    <!-- Include Date Range Picker -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.es.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
      $(document).ready(function(){

        var date_input=$('input[name="date"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
        useCurrent: false,
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
        startDate: "today",
        language: 'es'
        }).on('closeUp',function(){
          var marca = true;
          if(marca == true){
             alert($(this).val());

          }
          //alert('a');

        })
      })
    </script>

    <script src='js_propio/eventos.js'></script>

Como he dicho anteriormente, consigo hacerlo funcionar pero cambiando de orden los script a lo loco.

Preguntado por: AntonioMP87

el orden lo explica Minerillo muy bien, yo opto por lo siguiente aunque ya no tiene mucha valides en mi trabajo (después explico porque):

Hojas de Estilo CSS

en el <head>


<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/cssOtrasLibrerias.css" rel="stylesheet">
<link href="css/cssCreadorPorMi.css" rel="stylesheet">
</head>

Recuerda que las CSS se sobre escriben y siempre se toma la ultima, en caso de ser una definición identica, por eso siempre se empieza por el Framework, despues las librerias(como alertas, modales, temas, etc..) y por último las personalizadas.

Métodos y Scripts JS

antes de cerrar el <body>

   <script src="js/jquery.js"></script>
   <script src="js/bootstrap.js"></script>
   <script src="js/pluginX.js"></script>
   <script src="js/libreriaY.js"></script>
   <script src="js/misMetodos.js"></script>
   <script>console.log('otros metodos');</script>
</body>

El orden aquí si influye, pues bootstrap necesita de jquery, asi que necesita que este cargado, y puede que un plugin necesite de otro como el datepickery el datetimepickerque son dependientes.

Todo en orden y muy bien arreglado.

Preguntas Comunes:

¿Por que me ejecuta la función 2 veces?

Por que si cargas un archivo con .load(), vuelve a cargar una página con todos sus scripts, es normal que se ejecute 2 o más veces.

¿Como puedo cargar contenido de otra página sin que esto pase?

Bueno, ya cargaste los CSS y los JS, así que en teoria tus páginas que vas a cargar solo deberian tener el HTML, ya que si no estarías duplicando código.

Pero si cargo solo el HTML ¿Por que mi JS no funciona?

Como dijo @Minerillo, es un problema de querer asignar algo, a otra cosa que aun no existe. y para eso lo siguiente:

supongamos que tienes un código HTML, asi

<div class="contenido">
   <button id="llamar">Llamar Algo</button>
</div>

y que en la primera página tienes un método JS (o función);

$(document).ready(function(){
   $('#llamar').on('click', function(){ alert('llamando')});
});

Ya que el documento esta listo al dar click en el boton ejecuta la llamada, todo chulo hasta aquí.


Ahora tienes otro HTML (boton.html)

<button id="nada">Alertar Nada</button>

lo cargas con .load() al div que mencionamos antes

$(document).ready(function(){
   $('#llamar').on('click', function(){
       $('.contenido').load('boton.html');
   });
});

Y quieres que ahora ese nuevo boton haga algo y lo pones ahi también:

$(document).ready(function(){
   $('#llamar').on('click', function(){
       $('.contenido').load('boton.html')
   });

  $('#nada').on('click', function(){
       alert('Presionaste Nada');
  });
});

pero … no funciona 🙁

¿Por que no funciona el nuevo boton?

Veras, el contenido se carga la primera vez, eso activa el $(document).ready()' cuando tu cargas otro HTML que no existia en el momento que$(document).ready()’ pasó, pues no hay como decir que reaccione a tu evento .on('click') por eso no hace nada.

¿Como te mandaria tu mamá a las tortillas si aun no naces? (Un ejemplo en la vida real)

¿Como solucionarlo?

Veras. supongamos que tu no puedes ordenar algo a algo que no existe, sin embargo sabes donde y cuando va a existir.

Bueno la explicación larga aqui: http://api.jquery.com/on/

Para asignar un evento a algo que sabemos que va a existir, debemos agregarlo a quien lo contiene, en este caso nuestro <div class="contenido">

Entonces:

<!--                           |-- Este hace la magia               -->
<!--                           |                                   -->
$('.contenido').on('click', '#nada', function(){
    alert('Presionaste Nada');
});

Funcionaria por que le estas asignando un evento a algo que ya existe. Y este a su vez va a a conocer que elemento activa el evento.

Nuestro código final queda así:

$(document).ready(function(){
   $('#llamar').on('click', function(){
       $('.contenido').load('boton.html')
   });

  $('.contenido').on('click', '#nada', function(){
       alert('Presionaste Nada');
  });
});

¿Por que decias que ya no se usa la forma de ordenar?

Hoy en día está de moda los precompiladores, transpiladores y empaquetadores. Los cuales juntan todo el código, lo machacan y lo comprimen quedando un sitio que consta de 2 archivos.

Disminuyendo peticiones, aunque sacrificando otras cosas. Entonces al final esa serie de herramientas acomodan todo. Aunque claro no es mágico y se debe tener dominados estos temas para saber que estas haciendo.

Saludos.

La razón principal por la que Bootstrap falla es cuando no tiene Jquery previamente.

En la documentación de Bootstrap comentan la necesidad de que JQuery, este ANTES que Bootstrap JS.

*Primero de todo
<script type="text/javascript" src="assets/js/jquery-X.X.X.min.js"></script>
Puedes encontrar la ultima versión jquery en:
http://jquery.com/download/
*Y despues la de bootstrap
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

Y de seguido el resto de librerias que necesitas y quieras, pero te recomiendo poner estas dos las primeras dentro del script JS.

Buenos días.

Las dependencias en Javascript ES5 se satisfacen en cascada, de forma que primero se incluye en el archivo HTML aquellos ficheros javascript que no dependen de ningún otro fichero, y por último, se añade el que necesita de los anteriores.

En tu caso, como estamos usando Bootstrap 3 sería:

<script type="text/javascript" src="pathTojQuery.min.js"></script>

y luego

<script type="text/javascript" src="pathToBootstrap.min.js"></script>

De esta forma, cuando el archivo bootstrap.min.js busque la dependencia de jQuery necesaria para éste, ya está cargada debido a que se declaró anteriormente y consecuentemente, se cargará antes que bootstrap.

En el caso de Boostrap 4, que aun está en versión alpha, primero tendrías que cargar jQuery, luego tether (otra dependencia de bootstrap 4), y por último bootstrap. De esa forma evitamos que la consola de errores del navegador nos chille con los molestos errores.

Un saludo

Fuente

Related Posts:

¿Cómo obtener la respuesta de una llamada asíncrona (AJAX) fuera de ella? – javascript jquery asincrónico
Pregunta: Actualmente tengo esta función: function devuelveButaca(posicion){ var array = posicion.split('_'); var row = array; var column ...
Como poner una imagen de fondo a pantalla completa – javascript jquery html5
Pregunta: Como puedo hacer que la imagen abarque todo el tamaño de la pantalla. Se que de las propiedad min-width y min-heigth pero ellas no ...
Error de: Uncaught TypeError: url.indexOf is not a function por Jquery – javascript jquery
Pregunta: En el navegador, reviso en inspeccionar elemento, y me sale el siguiente error: Uncaught TypeError: url.indexOf is not a function Me imagino que es ...
Actualizar información con ajax php mysql – php jquery mysql
Pregunta: Tengo esta simple consulta que lo que simplemente me muestra las visitas de la web, pero quisiera que fuera automático con ajax ya que ...
Como validar array checkbox – javascript php jquery
Pregunta: Que tal buen dia, alguien me podria decir como se puede hacer para que cuando presione el boton "BAJAR DATOS" si este esta vacio ...
¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
Como cambiar una propiedad html dependiendo del valor de un perfil recogido de clase java – javascript jquery html
Pregunta: Tengo una caja de texto en la que me gustaría poder escribir o no dependiendo del perfil que utilice la aplicación. Esta caja de ...
Copiar valor a un input que esta dentro de un footer de un datatable – javascript jquery datatables
Pregunta: Estoy usando los DataTables de jQuery y me estoy encontrando con el siguiente problema: cuando pulso en un botón necesito pasarle un valor con ...
¿Cómo rellenar cada circulo al pasar el mouse encima? – javascript jquery html
Pregunta: ¡Hola! Estoy practicando jQuery, y me gustaría poder hacer como un ranking. A lo que quiero llegar es que cada vez que el mouse ...
Ayuda con Javascript & HTML – javascript jquery
Pregunta: Esta pregunta ya tiene una respuesta aquí: ...
Resultado: [object], [object] al importar un archivo JSON – javascript jquery json
Pregunta: Tengo un problema para obtener datos de un archivo JSON, cuándo intento obtener los datos de este archivo, obtengo como resultado: , { ...
Jquery dataTables con Combobox de filtro – jquery datatables
Pregunta: Estoy usando jquery dataTables y quiero agregar un combo de filtrado para un campo especifico en la ubicación a continuacion de "Search"...es posible esto?. ...
insertar automáticamente un caracter mientras escribo en un input – jquery html
Pregunta: Necesito insertar el caracter ":" mientras estoy escribiendo números en un input tipo texto, el ":" debe insertarse automáticamente cuando haya escrito dos números, ...
Estilar un pseudoelemento ::after con jQuery – javascript jquery html
Pregunta: ¿Cómo seleccionar desde jQuery un elemento de este estilo? .page-container .single-page:nth-of-type(2)::after { } La idea es poder modificar ciertas reglas CSS desde JavaScript. ...
jQuery ajax enviando vía GET configurando envío por POST – jquery
Pregunta: Estoy tratando de enviar un formulario por ajax mediante POST desde un sitio (todo local) a otro, pero estoy viendo desde la consola de ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *