Recover data in Modal in PHP

Question

I have a button that calls a screen modal, passing the ID of the registration in question. I would like to know how to recover the data from that ID, at the moment that display Modal, so that it can bring the data on the screen?

Modal:

echo '<td><a href="#modal-editar" style="margin-right: 1%" class="btn btn-info tip-top" data-toggle="modal" chamada="'.$r->idChamada.'" title="Editar Valores da Chamada"><i class="icon-pencil icon-white"></i></a></td>';

Modal Estrutura:

<!-- Modal -->
<div id="modal-editar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form action="<?php echo base_url() ?>chamadas/adicional/editar" method="post" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h5 id="myModalLabel">Editar Chamada - Valores</h5>
  </div>
  <div class="modal-body">
    <input type="hidden" id="idChamada" name="idChamada" value="" />
    <table class="table table-bordered ">
        <tr>
            <td style="text-align: right; width: 200px"><strong>CLIENTE</strong></td>
            <td>SAPORITI DO BRASIL LTDA</td>
        </tr>

        <tr>
            <td style="text-align: right; width: 200px"><strong>DATA DA CHAMADA</strong></td>
            <td>10/01/2015</td>
        </tr>
        <tr>
            <td style="text-align: right; width: 200px"><strong>FUNCIONÁRIO</strong></td>
            <td>JOÃO DA SILVA STATUS</td>
        </tr>

        <tr>
            <td style="text-align: right; width: 200px"><strong>VALOR EMPRESA</strong></td>
            <td><input type="number" name="dataInicial" value="10.00" class="span3"></td>
        </tr>

        <tr>
            <td style="text-align: right; width: 200px"><strong>VALOR FUNCIONÁRIO</strong></td>
            <td><input type="number" name="dataInicial" value="5.00" class="span3"></td>
        </tr>
    </table>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-danger">Editar Valores</button>
  </div>
  </form>
</div>

Jquery

$(document).ready(function(){
   $(document).on('click', 'a', function(event) {
        var chamada = $(this).attr('chamada');
        $('#idChamada').val(chamada);
    });
});

Answer 1

For you to recover and display the data in this modal you will have to use Javascript to make a request and return this data.

You can use Jquery.load().

Example

$('#modal-editar').load('chamada?id='+id);

In this case your modal will receive the contents of the page called. With the id per parameter, on the page called you make the query to return the call data.

You can still set the Jquery.load() function to only load a div from the page.

Example

$('#modal-editar').load('chamada?id='+id+' #data');

There is also the option to make a request and return a JSON with the data.

Example:

$.getJSON( "chamada?id="id, function( data ) {

});

In this case your page call should return the data in JSON, and then you distribute the data to your modal.

Edited.

You can do it this way:

$(document).ready(function(){
    $(document).on('click', 'a', function(event) {
        var chamada = $(this).attr('chamada');

        $.getJSON( "chamada?id="chamada, function( data ) {
            $('#nome').text(data['nome']);
            ...
        });

    });
});

I hope I’ve helped! :)