Jquery popup in for loop using codeigniter

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.