CODEWITHSUNDEEP
phpjqueryajaxcodeigniterbootstrap-modal
jaydev vara
jaydev vara

Reputation: 17

bootstrap modal did not pop up after 10 records of pagination datatable in codeigniter

Bootstrap modal did not pop up after 10 record of data table pagination. i don't know why so please help me. i had many tried to solve this but i cant understand this. I don't know idea about jquery so please give me ans. Here is my php code: 

<table id="example1" class="table table-bordered table-striped">
<thead>
    <tr>
        <th>Sr No</th>
        <th>Title</th>
        <th>Description</th>
        <th>Status</th>
        <th>Deadline Date</th>
        <th>Add</th>
        <th>Show</th>
    </tr>
</thead>
<tbody>
 <?php
 $str = 1;
 foreach ($getplan as $key => $get) {
    ?>
    <tr>
        <td><?php echo $str; ?></td>
        <td><?php echo $get['title']; ?></td>
        <td><?php echo $get['description'] ?></td>
        <td><?php echo $get['color'] ?></td>
        <td><?php echo $get['end_date'];?></td>
        <td>
            <?php echo $get['members'] ?><br/>
            <a href="<?php echo base_url() . "welcome/get_member_id/" . $get['id'] ?>"<i class="fa fa-plus" aria-hidden="true"></i>Add Member</a>
        </td>

        <td>
            <input type="button" name="view" value="Show" id="<?php echo $get['id'] ?>" class="btn btn-info btn-xs view_data" />
        </td>

    </tr>
    <?php
    $str++;
}
?>

Here is my Modal:

<div id="dataModal" class="modal fade">  
<div class="modal-dialog modal-lg">  
    <div class="modal-content">  
        <div class="modal-header">  
            <button type="button" class="close" data-dismiss="modal">&times;</button>  
            <h4 class="modal-title">Employee Tast Details</h4>  
        </div>  
        <div class="modal-body" id="employee_detail"> 
        </div>  
        <div class="modal-footer">  
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
        </div>  
    </div>  
</div>

Here my script:

<script type="text/javascript">
$(document).ready(function(){   
    $('.view_data').click(function(){  
        var employee_id = $(this).attr("id");
        $.ajax({  
            url:"<?php echo base_url('welcome/show'); ?>",  
            method:"post",  
            data:{employee_id:employee_id},  
            success:function(data)
            {  
                $('#employee_detail').html(data);  
                $('#dataModal').modal("show");  
            }  
        });  
    });  
});

Upvotes: 0

Views: 1223

Answers (1)

Sorav Garg
Sorav Garg

Reputation: 1067

Please change jQuery code, use click event like this --

$('body').on('click','.view_data',function(){

Instead Of --

$('.view_data').click(function(){

Currently, Your click event not working.

Upvotes: 3

Related Questions