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.

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

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

<?php
$CI = & get_instance();
$baseurl = $CI->config->base_url();
if($query->num_rows()>0)
{ 
$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>&nbsp;</td>
<td>&nbsp;</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]

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

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