the button, use to click that pass direct to open in the modal
<button type="button" class="btn btn-primary waves-effect waves-light debit-btn" data-toggle="modal" data-animation="bounce" data-target=".bs-example-modal-center-dr" data-account_id="" >Debit</button>
modal section, after button clicked the modal suppose to open and show the data
<div class="modal fade bs-example-modal-center-dr" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title mt-0" id="myLargeModalLabel">Add Debit</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body">
Jquery and ajax, i use on click event to get the id and pass then to the ajax in order to return data from a controller
$(document).ready(function() { $('.debit-btn').on('click', function (){ var account_id = $(this).data('account_id'); //alert(account); $.ajax({ url : "<?php echo base_url('Debtors_creditors_more_details/get_credit_trans');?>", method : "POST", data : {account_id: account_id}, async : true, dataType : 'json', success: function(data){ //calculateQuantity(qty, data); $('#model-debit').modal('show'); console.log(data); alert('hello'); } }); return false; }); });
Note:- This cant open a modal after adding on click function, please help
Advertisement
Answer
Your View:-
<td> <input type="button" value="Debit" id="<?php echo $variable_name->account_id; ?>" class="btn btn-info debit_data" /> </td>
Bootstrap Modal Code:-
<div id="dataModal" class="modal fade"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">View Full Debit Details</h4> </div> <div class="modal-body" id="your_modal_detail"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
JQUERY AJAX Code:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.debit_data').click(function(){ var account_id = $(this).attr("id"); $.ajax({ url : "<?php echo base_url('Debtors_creditors_more_details/get_credit_trans') ?>", method:"POST", data:{account_id:account_id}, success:function(data){ //alert(data); $('#your_modal_detail').html(data); $('#dataModal').modal("show"); } }); }); }); </script>
Controller Code:-
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Debtors_creditors_more_details extends CI_Controller { public function get_credit_trans(){ $account_id = $this->input->post("account_id"); $this->load->YourModelName(); $data['account'] = $this->YourModelName->getDatainModal($account_id); $this->load->view('accountinModal',$data); } } ?>
Modal Code:-
<?php class YourModelName extends CI_Model { function getDatainModal($account_id){ return $account = $this->db->get_where('table_name',array('account_id'=>$account_id))->row_array(); } } ?>
Create in View accountinModal.php :-
<div class="table-responsive"> <table class="table table-bordered"> <div class='row col-md-12'> <div class='col-md-6'> <tr> <td width="30%"><label>Acount Id</label></td> <td width="70%"><?php echo $account["account_id"];?></td> </tr> </div> <div class='col-md-6'> <tr> <td width="30%"><label>Acount Name</label></td> <td width="70%"><?php echo $account["account_name"];?></td> </tr> </div> </div> </table> </div>