Loading a document ready after AJAX response

Question

Loading a document ready after AJAX response

Navigation

#1 by (2 votes)

2

Good evening, I have a page where clicking on a button clears a div and in it loads a form with a date field (more specifically with the DateTimePicker plugin). In that same file I have a script that loads the datetime configuration to put it in Spanish and a few more variations. The problem is that if I directly execute the html that has the form loaded with the document ready, the configuration is applied correctly, but when it is loaded into the div it is not recognized.

This is the fragment responsible for loading the form:

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

And this is the form, which has the configuration of the date field at the end of the whole:

<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>

I know that the document ready is executed when the page is loaded, and therefore the configuration will probably not be applied correctly, but I do not know how to pass that datetime configuration script in another way. I would really appreciate any help.

javascript jquery datetime

asked by AntonioMP87 18.05.2017 в 01:39

source

1 answer

Menu switch java CSS - Triangulos con box shadows

score 2 · Answer 1

You must make a small adjustment to the code.

Change:

$(document).ready(function(){

By:

$(function ready(){

and then invoke ready() in the function $.get

Example:

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

Here is an example of how to do it (small but functional;)) ...):

$(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>