Display result dynamically in modal popup using jQuery in codeigniter
Display result dynamically: in your Codeigniter web application, click edit button and display data from database dynamically using jQuery. Follow the example.
If you want to edit user details or table result using jQuery with a modal popup, this tutorial will be helpful for you. What you need to do? Follow the process:
- Define a Edit button, where you fetch data and display result dynamically in a view table page.
- Give a ID name of button and set a value with id name for ID value change dynamically and set default value of variable before start the foreach loop which set in button ID name that’s like:
<?php $editin=1; foreach ($variable as $val) {} ?>
- Set all result in the button with name, which you want to edit.
- Generate a onclick event and give a function name and set a value, which is your primary key of database table.
- Call the function name and set value dynamically in a model to call field id name of modal.
Follow the source code of display result dynamically in modal popup using jQuery in codeignite.
Edit Button:
<button type="button" class="btn" style="border-color: #1818da;" data-toggle="modal" data-target="#myModal" data-material="<?php echo $pvalue->item_name; ?>" data-eid="<?php echo $pvalue->id; ?>" data-price="<?php echo $pvalue->price; ?>" data-qty="<?php echo $pvalue->qty; ?>" id="editid<?php echo $editin; ?>" onclick="edit_bil(<?php echo $editin; ?>)">Edit</button>
Modal:
<div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Edit Bill</h4> </div> <div class="modal-body"> <form action="<?php echo base_url('EditController/edit_user_details'); ?>" method="post"> <input type="hidden" name="eid" id="eid"> <div class="form-group"> <label for="Materials Name">Materials Name: </span></label> <select class="form-control" id="materials_name" onchange="get_qty_val(this.value)"> <!-- <optgroup> --> <option value="">Change Materials</option> <?php foreach($lib as $val){ ?> <option value="<?php echo $val['id'];?>"><?php echo $val['material_name'];?></option> <?php } ?> <!-- </optgroup> --> </select> </div> <div class="form-group"> <label for="Quantity">Change Quantity:</label> <input type="text" class="form-control" id="quantity"> </div> <div class="form-group"> <label for="Price">Price:</label> <input type="text" class="form-control" id="m_price"> </div> <div class="form-group"> <label for="discountprice">Discountprice Price:</label> <input type="number" class="form-control discountprice" id="dis_price"> </div> <div class="form-group"> <label for="Total">Total Price:</label> <input type="text" class="form-control totalvalue" id="total_price"> </div> <button type="button" onclick="material_update()" class="btn btn-info">Submit</button> </form> </div> </div> </div> </div>
Script:
<script> function edit_bil(id){ var eid=$('#editid'+id).data('eid'); document.getElementById('eid').value=eid; var materials_name=$('#editid'+id).data('material'); document.getElementById('material_name').value=materials_name; var quantity=$('#editid'+id).data('qty'); document.getElementById('quantity').value=quantity; var price=$('#editid'+id).data('price'); document.getElementById('total_price').value=price; } </script>
Related posts