使用Codeigniter和jquery在Modal Bootstrap 3中用DB中的数据填充字段

Question

im using bootstrap 3 framework and codeigniter 3, i want to edit a row from table but i want to display row in thier field in modal

Code Html of table

<div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Nom et prénom</th>
              <th>Age</th>
              <th>Sexe</th>
              <th>Assurance</th>
              <th>Téléphone</th>
              <th>E-mail</th>
              <th></th>
            </tr>
          </thead>
          <tbody>

            <?php
            foreach ($query->result() as $row) 
            {
            ?>
            <tr>
              <td><?php echo $row->no_dossier_pt; ?></td>
              <td><?php echo $row->nom_pt .' '. $row->prenom_pt ?></td>

              <?php
                 $date = new DateTime($row->datenaissance_pt);
                 $now = new DateTime();
                 $interval = $now->diff($date);
              ?>

              <td><?php echo $interval->y .'  ans'; ?></td>
              <td><?php echo $row->sexe_pt; ?></td>
              <td><?php echo $row->assurance_pt; ?></td>
              <td><?php echo $row->telephone_pt; ?></td>
              <td><?php echo $row->email_pt; ?></td>
              <td>
              <a type="button"  href="<?php echo base_url() ?>patient/patient_delete/<?php echo $row->id; ?>" class="btn btn-danger">Supprimer</a> 
              <a type="button" data-toggle="modal"  href="#editpatient" data-id="<?php echo $row->id; ?>"  class="btn btn-warning" >Editer</a>

              <?php $this->load->view('template/patient_update'); ?>
              </td>
            </tr>
            <?php
            }
            ?>

          </tbody>
        </table>
      </div>

    </div>
  </div>
</div>




 <?php
  $this->load->view('template/footer');
?>

but i can't understand how can i pass 'id' of this row to the controller and return the specific data row from controller to thier field in Modal form,

this is code of button

<a type="button" data-toggle="modal"  href="#editpatient" data-id="<?php echo $row->id; ?>"  class="btn btn-warning" >Editer</a> 

and my Modal form Code

 <!-- Modal -->
      <div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <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" id="myModalLabel"> Information patient 2</h4>
            </div>



            <!-- formulaire -->

            <?php echo form_open('patient/patient_update'); // action to the controller?>



            <div class="modal-body">

                    <!-- hidden input montinned with class sr-only -->

                  <label class="sr-only" =""></label>
                      <input type="text"  name="no_dossier_pt" class="sr-only"   >
                  <div class="form-group">
                    <input type="text" class="form-control" id="nom_pt" name="nom_pt" id="nom_pt" placeholder="Nom ...">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="prenom_pt" name="prenom_pt" id="prenom_pt" placeholder="Prénom ....">
                  </div>
                  <div class="form-group">

                               <label for="exampleInputFile">Sexe :   </label>

                               <input type="radio" name="sexe_pt" id="radio-choice-1" value="homme" checked="checked" />
                               <label for="radio-choice-1"> Homme </label>


                                <input type="radio" name="sexe_pt" id="radio-choice-2" value="femme"  />
                                <label for="femme"> Femme </label>



                                <input type="radio" name="sexe_pt" id="radio-choice-3" value="enfant"  />
                                <label for="enfant">Enfant</label>


                  </div>     

                  <div class="form-group ">
                    <div class="input-group">
                     <div class="input-group-addon">
                      <i class="fa fa-calendar">
                      </i>
                     </div>
                     <input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
                    </div>
                  </div>

                  <div class="form-group">
                               <label for="exampleInputFile">Assurance :   </label>
                               <input type="radio" name="assurance_pt" id="radio-choice-1" value="oui" checked="checked" />
                               <label for="radio-choice-1"> Oui </label>

                               <input type="radio" name="assurance_pt" id="radio-choice-2" value="non"  />
                               <label for="femme"> Non </label>                                    

                  </div>

                  <div class="form-group">
                    <input type="text" class="form-control"  name ="telephone_pt" placeholder="Téléphone ...">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control"  name ="email_pt" placeholder="Email ...">
                  </div>

                  <div class="form-group">
                    <textarea class="form-control" cols="40"  name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
                  </div>



             </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                  <button type="submit" class="btn btn-primary">Enregistrer</button>
                </div>
            <?php echo form_close(); ?>
          </div>
        </div>
      </div>

      <!-- Modal -->

Controller Methode to display

public function patient_selectbyid()

{

    $data = array();
    $id = $this->input->post('pt_id');
    $this->load->model('patient_model');
    $data = $this->studentModel->getStudent($id);

    echo $data; 

}

Code jquery

 $(document).ready(function() { var id_edit = $(this).data('id'); var base_url = <? php echo base_url('patient/patient_selectbyid'); ?> ; $('.editStudent').click(function() { $.ajax({ url: base_url, type: 'POST', data: { 'pt_id': id_edit }, dataType: 'JSON'; success: function(result) { $('.modal-body #nom_pt').val(result[0].nom_pt); $('.modal-body #prenom_pt').val(result[0].prenom_pt); } }); }); }); 

I hope someone can help me coding this, thanks you

Answer 1

thanks brother for your recommandations , i had resolve the problem by using event listner as you say, i just sent data DB using data attribute in the button like this:

 <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editPatient" data-id="<?php echo $row->id ?>" data-nom="<?php echo $row->nom_pt ?>" data-prenom="<?php echo $row->prenom_pt ?>" data-nod="<?php echo $row->no_dossier_pt ?>" data-sexe="<?php echo $row->sexe_pt; ?>" data-dn="<?php echo $row->datenaissance_pt; ?>" data-assur="<?php echo $row->assurance_pt; ?>" data-tele="<?php echo $row->telephone_pt; ?>" data-email="<?php echo $row->email_pt; ?>" data-note="<?php echo $row->note_pt; ?>" >
                Modifier

the modal like this

<!-- Modal -->
      <div class="modal fade" id="editPatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <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" id="myModalLabel"> Information patient </h4>
            </div>
            <div class="modal-body">

                <!-- formulaire -->
                <?php echo form_open('patient/patient_update'); ?>

                  <label class="sr-only" =""></label>
                    <input type="text"  name="id" class="sr-only" id="id_hidd"   >
                  <div class="form-group">
                    <input type="text" class="form-control" id="nom_pt" name="nom_pt" placeholder="Nom ...">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id="prenom_pt" name="prenom_pt" placeholder="Prénom ....">
                  </div>
                  <div class="form-group">

                               <label for="exampleInputFile">Sexe :   </label>

                               <input type="radio" name="sexe" id="homme" value="homme" checked="checked" />
                               <label for="homme"> Homme </label>


                                <input type="radio" name="sexe" id="femme" value="femme"  />
                                <label for="femme"> Femme </label>



                                <input type="radio" name="sexe" id="enfant" value="enfant"  />
                                <label for="enfant">Enfant</label>


                  </div>     

                  <div class="form-group ">
                    <div class="input-group">
                     <div class="input-group-addon">
                      <i class="fa fa-calendar">
                      </i>
                     </div>
                     <input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
                    </div>
                  </div>

                  <div class="form-group">
                               <label for="exampleInputFile">Assurance :   </label>
                               <input type="radio" name="assurance" id="assur" value="oui" checked="checked" />
                               <label for="radio-choice-1"> Oui </label>

                               <input type="radio" name="assurance" id="nonassur" value="non"  />
                               <label for="femme"> Non </label>                                    

                  </div>

                  <div class="form-group">
                    <input type="text" class="form-control" id="telephone_pt" name ="telephone_pt" placeholder="Téléphone ...">
                  </div>
                  <div class="form-group">
                    <input type="text" class="form-control" id ="email_pt" name ="email_pt" placeholder="Email ...">
                  </div>

                  <div class="form-group">
                    <textarea class="form-control" cols="40" id="note_pt" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
                  </div>



            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
               <button type="submit" class="btn btn-primary">Enregistrer</button>
            </div>

            <?php echo form_close(); ?>
          </div>
        </div>
      </div>

script that recive data and displayed on Modal form like this:

<script type="text/javascript">
        $('#editPatient').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var id = button.data('id')
        var prenom = button.data('prenom')
        var nom = button.data('nom')
        var nod = button.data('nod')
        var sexe = button.data('sexe')
        var dn = button.data('dn')
        var tele = button.data('tele')
        var email = button.data('email')
        var note = button.data('note')

        if (sexe == 'femme'){
          var id_sexe = "femme"
          document.getElementById(id_sexe).setAttribute("checked", "checked")
        }
        if (sexe == 'homme'){
          var id_sexe = "homme"
          document.getElementById(id_sexe).checked = true
        }
        if (sexe == 'enfant'){
          var id_sexe = "enfant"
          document.getElementById(id_sexe).checked = true
        }
        if (assur == 'oui'){
          var id_assur = "assur"
          document.getElementById(id_assur).checked = true
        }
        if (assur == 'non'){
          var id_assur = "nonassur"
          document.getElementById(id_assur).checked = true
        }

        var modal = $(this)
        modal.find('.modal-title').text('Modifier patient ('+nod+')')
        modal.find('.modal-body #id_hidd').val(id)
        modal.find('.modal-body #nom_pt').val(nom)
        modal.find('.modal-body #prenom_pt').val(prenom)
        modal.find('.modal-body #date').val(dn) 
        modal.find('.modal-body #telephone_pt').val(tele)  
        modal.find('.modal-body #email_pt').val(email) 
        modal.find('.modal-body #note_pt').val(note) 

      })
      </script>

thanks for your help if you have any other suggestion or question i'll be gratfull