1

Buenas noches, tengo una pagina en la que al pulsar sobre un boton se limpia un div y en el se carga un formulario con un campo de fecha (mas concretamente con el plugin DateTimePicker). En ese mismo archivo tengo un script que carga la configuracion del datetime para ponerlo en español y unas cuantas variaciones mas. El problema esta en que si ejecuto directamente el html que tiene cargado el formulario con el document ready la configuracion se me aplica correctamente, pero al ser cargado a en el div no se reconoce.

Este es el fragmento encargado de la carga del formulario:

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

Y este es el formulario, que tiene al final del todo la configuracion del campo fecha:

<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="delegacion" class="oculto">
              <select class="select2" id="listaDeleg">
                <option value="0">-- Seleccione una clínica --</option>
              </select>
            </div> 
            <div  id="datos" class="oculto">
              <select class="select2" id="listEspec" onchange="cambioMedico()">
                <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">
    </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;
    })
  })
</script>

Se que el document ready se ejecuta al cargar la pagina, y por eso seguramente no se aplique la configuracion correctamente, pero no se como pasar ese script de configuracion de datetime de otro modo. Agradeceria mucho cualquier ayuda.

1 respuesta 1

1

Debes hacer un pequeño ajuste al codigo.

Cambia:

$(document).ready(function(){

Por:

$(function ready(){

y luego invocas ready() en la function $.get

Ejemplo:

$.get( "form.html", function( data ) {
  $("#carga").html('');
  $("#carga").html(data);
  ready();
  delegacion();
  selecEspecialidad();
});           

Aquí te dejo un ejemplo de como hacerlo (pequeño pero funcional ;))...):

$(function ready() {
 console.log("ready!!...");
 $("button").on("click", function () {
  console.log("click!!...");
  ready();
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click to ready</button>

4
  • hola, gracias por tu ayuda. Acabo de probar lo que me has sugerido, pero en este caso me da un fallo distinto (ready is not defined) el 18 may. 2017 a las 1:00
  • Probaste el ejemplo que te deje? que explorador usas?
    – fwBasic
    el 18 may. 2017 a las 2:01
  • lo probe pero me daba ese error tambien. Uso para las pruebas tanto Firefox como Chrome. el 18 may. 2017 a las 21:37
  • Que extraño he probado con firefox / chrome y funciona perfectamente.
    – fwBasic
    el 18 may. 2017 a las 22:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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