Load view in a modal with Ajax

Navigation
1

Hello! You see ... I have a dilemma with the load of a file (view) that I need will be in the body of a modal , since, this will be the beginning to be able to show information later. As such, I have the following.

In my view Listing (where I have a table of values) I've assigned it to display the button dynamically, which throws a modal to show a file with values dynamically of the ID that has been selected (That is the goal) . Before that, I was stuck with even showing the file that would load modal .

I show you the 1st code of the button: 

<button type="button" class="btn btn-success btn-view-contrato" value="<?php echo $NewContrato->id_contratos_d;?>" data-toggle="modal" data-target="#modal_contrato"><span class="fa fa-file-text-o"></span></button>

The code of modal : 

<div class="modal fade" id="modal_contrato">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Contrato</h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary btn-print"><span class="fa fa-print"> </span> Imprimir</button>
      </div>
    </div>
  </div>
</div>

The script: 

<script >
     $(document).on("click",".btn-view-contrato", function(){
        valor_IDcontrato = $(this).val();
        $.ajax({
            url: base_url + "clientes/Clientes_controller/contrato_view",
            type:"POST",
            dataType:"html",
            data:{id:valor_IDcontrato},
            success:function(data){
                $("#modal_contrato .modal-body").html(data);
            }
        });
    });
</script>

Watch out! Make sure the most logical thing is that the route was fine both to call the controller and call the file to load.

And finally, the function of the controller: 

   public function contrato_view(){
        $New_id_Contrato = $this->input->post("id");

        $this->load->view("admin/clientes/contrato");
    }

But it does not load the view and only appears in white:

NOTE: I know that I am not passing information to the modality so far, but first of all I need to show the view that I am passing through to you until now ( $this->load->view("admin/clientes/contrato"); ) since to pass information belonging, I manage passing a data from a ARRAY .

Thank you very much for reading this in the 1st instance: D

    
asked by González 22.12.2017 в 20:29
source

2 answers

2

Your mistake is to use the sucesss for that, there is a difference between the sucess and the done

to make it work you have to do 

$.ajax({
     url: base_url + "clientes/Clientes_controller/contrato_view",
     type:"POST",
     dataType:"html",
     data:{id:valor_IDcontrato},
}).done(function(data) {
     $("#modal_contrato .modal-body").html(data);
});

documentation for done

difference between success and done (in English)

    
answered by 22.12.2017 / 20:42
source
2

In the $.ajax() request, the dataType you specify is html , and in data you pass a json , delete the dataType or put json , which is the type of data you send.

Note: Keep in mind what you receive in the data of the success function of ajax , if you receive an object equal, with the information serious data.valiarbleConInformacion

I recommend using .done , since from jquery 1.5, requests ajax are implemented following the interface of promises, using its methods and properties, see more , in this case it would be as indicated, referencing the link : 

$.ajax({
     url: base_url + "clientes/Clientes_controller/contrato_view",
     type:"POST",
     data:{id:valor_IDcontrato}
}).done(function(data) {
     $("#modal_contrato .modal-body").html(data);
});

This solution would be correct, since I would expect the request to be successful, and then I would get the data to be displayed.

Just like you use the .done , you can use .fail() to know if the request is failing and discard, example: 

function xhr_get(url) {

  return $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    beforeSend: mostrarImagenCargando
  })
  .always(function() {
    // Por ejemplo removemos la imagen "cargando..."
  })
  .fail(function() {
    // Manejar errores
  });

}
    
answered by 22.12.2017 в 20:35
Activities on android [closed] Problem with clear: left;