skip to Main Content

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

2

Answers


  1. In your click function add

    $('.bs-example-modal-center-dr').modal('show'); 
    

    This would force the modal to open using js.

    Login or Signup to reply.
  2. 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">&times;</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> 
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search