How to use jquery popup in for loop using codeigniter?
For this we use jquery ui plugin.
Now creating html view using codeigniter, as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php $CI = & get_instance(); $baseurl = $CI->config->base_url(); ?> <div id="editbankloandetails" title="Edit" style="width:900px;display:none"></div> <table> <thead> <tr> <th>Bank Name</th> <th>Vehicle Type</th> <th>Head Quaters Address</th> <th>Website</th> <th>Customercare No</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <?php foreach($query->result() as $row) { ?> <tr class="odd gradeX"> <td><?php echo $row->bank_name;?></td> <td><?php echo $row->vehicle_type;?></td> <td><?php echo $row->bank_hq_address;?></td> <td><?php echo $row->website_address;?></td> <td><?php echo $row->cutomer_care_no;?></td> <td> <a href="javascript:void(0)" onclick="lookUp('<?php echo $row->bank_id;?>')" >Edit</a></td> </tr> <?php } ?> </tbody> </table> <script type="text/javascript" src="<?php echo $baseurl;?>js/jquery.min.js"></script> <script type="text/javascript" src="<?php echo $baseurl;?>js/jquery-ui.min.js"></script> |
In the above code we use foreach condition to display Database table values .
Using this html view we can update the table row , now create lookup function to display editable values in popup window .let’s check below javascript function .
If you are interested in creating your own blog or website using codeigniter framework ,eknowledgetree linked with dreamhost and providing promo code for $47 discount, to avail this offer click below link How to avail $47 discount dreamhost promo code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="application/javascript"> function lookUp(id) { var id = id; $.post('<?php echo base_url();?>dashboard/editbankloansdetails/', { id: id }, function (data) { $("#editbankloandetails").dialog({ resizable: false, modal: true, width: 900, minheight: 500, }); $("#editbankloandetails").html(data); }); } </script> |
In above post method we are passing bank_id to controller dashboard editbankloandetails function. Here in controller we will get details of the table using bank_id and displayed in separate view as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?php $CI = & get_instance(); $baseurl = $CI->config->base_url(); if($query->num_rows()>) { $row = $query->row(); ?> <div class="content"> <div id="editsuccess_msg" style="display:none" class="alert alert-success"></div> <form id="editbankloans" name="editbankloans" method="post"> <table> <tr> <td>Bank Name</td> <input type="hidden" value="<?php echo $bank_id;?>" name="bank_id"/> <td><input type="text" name="bank_name" value="<?php echo $row->bank_name;?>"/></td> <td>Web Address</td> <td><input type="text" name="webaddress" value="<?php echo $row->website_address;?>"/></td> </tr> <tr> <td>Vehicle Type</td> <td><input type="text" name="vehicle_type" value="<?php echo $row->vehicle_type;?>"/></td> <td>Customer Care No</td> <td><input type="text" name="customercare_no" value="<?php echo $row->cutomer_care_no;?>"/></td> </tr> <tr> <td>Customer Care Email Id</td> <td><input type="text" name="cusromercare_emailid" value="<?php echo $row->customer_care_email;?>"/></td> </tr> <tr> <td>Bank HQ Address</td> <td><input type="text" name="bankhq_address" value="<?php echo $row->bank_hq_address;?>"/></td> <td> </td> <td> </td> </tr> <tr> <td colspan="4" align="center"> <button type="button" name="submit" class="btn btn-info" onclick="bankloaneditforminsert()">Save</button> <button type="reset" name="reset" class="btn btn-info">Reset</button> </td> </tr> </table> </form> <div> <?php }?> |
The above view will be displayed in jquery popup window, now we will check controller function to get the values of database table using bank_id which is got from first view as below.
[wp-like-lock]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php class Jquery extends CI_Controller { public function __construct() { parent::__construct(); } public function displayloandetails() { $this->data["query"]=$this->db->query("select * from bankdetails"); $this->load->view("demo/jquery_popup",$this->data); } public function editbankloansdetails() { $id = $this->input->post("id"); $this->data["query"] =$this->db->query("select * from bankdetails where bank_id = $id"); $this->data['bank_id'] = $id; echo $this->load->view("demo/editbankloandetails",$this->data); } } |
Now we will add javascript function to edit the bank loan details, which will add in jquery_poopup view as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="application/javascript"> function bankloaneditforminsert() { var str = $('#editbankloans').serialize(); $('#loading_pic').show(); $.post("<?php echo base_url();?>dashboard/bankloanforminsert", str, function (data) { $('#loading_pic').hide(); if (data == "Success") { $('#editsuccess_msg').show(); $('#editsuccess_msg').text(" Record saved successfully"); } }); } </script> |
[/wp-like-lock]
Here I am not writing insert method in controller, as you know how to write insert method using codeigniter framework. What I am trying to explain is to display popup window in for loop while clicking edit link in the jquery_poopup.php view.
Thanks for reading this article.
