Codeigniter. Как получить и отобразить данные из таблиц данных в модальном режиме при нажатии кнопки с помощью ajax - PullRequest
Новая
       83

Codeigniter. Как получить и отобразить данные из таблиц данных в модальном режиме при нажатии кнопки с помощью ajax

0 голосов
/ 06 августа 2020

Привет, я здесь уже почти 3 дня. Я хочу получать и отображать данные (из соответствующего первичного ключа) в модальном режиме. когда я нажимаю кнопку просмотра деталей, она всегда обновляется, и модальное окно не отображается. Итак, пожалуйста, помогите мне с этой проблемой

Контроллер: 

public function eventdetails($event_id)
{
$this->load->model("event_models");
$data['results'] = $this->event_models->eventdetails($event_id);
echo json_encode($data);
}

Представления (таблицы данных): 

 <!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">EVSU</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
          <table id="manageMemberTable" class="table table-bordered table-hover">
         
         
         


            <thead>
            <tr>
             <th>Event Title</th>
             <th>Start date</th>
             <th>Status</th>
             <th>Action</th>
            </tr>
            </thead>
            <tbody>
        
              
            <tr>
              <?php foreach ($all_events as $list): ?>



              <td><?php echo $list->event_title; ?></td>
              <td><?php echo $list->start_date;?></td>
              <td>Ongoing</td>
              <td><button name="get" id="<?php echo $list->event_id ?>" 
      class="btn btn-block btn-secondary btn-sm get" data-toggle="modal" 
    data-target=".bd-example-modal-lg" > View Details </button></td>
      
      

            
            </tr>
       <?php endforeach; ?>
          
            </tfoot>

          </table>
        </div>
      </tbody>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->

      
    </div>
    <!-- /.col -->
    </div>
   <!-- /.row -->
   </section>
    <!-- /.content -->
   </div>
   <!-- /.content-wrapper -->

Модальный, где данные будут отображаться: 

       <div class="modal fade bd-example-modal-lg" tabindex="-1" 
    role="dialog" aria- 
       labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
      <div class="modal-content">
   <div class="modal-header">
    <h3 class="modal-title" style="text-align: left;">Event Details</h3>
  </div>
  <div class="card" style="width: auto; height: auto;">
     <img src="assets/css/evsub.jpg" class="card-img-top" alt="...">

     <div class="card-body" id="load_data">
   
      <table class="table table-bordered table-hover">
         <thead>
         <tr>

          <th></th>
       <th></th>  
       </tr>
       </thead>
       <tbody>
       

       <tr>

      <td>Event Title:</td>
        <td></td>
       </tr>



      <tr>
      <td>Event Details:</td>
     <td></td>
     </tr>

    <tr>
     <td>When:</td>
   <td>march 13 2020 - march 15 2020</td>
   </tr>

     <tr>
   <td>Venue:</td>
    <td>Gym</td>
   </tr>

    <tr>
    <td>Course:</td>
      <td>Information Technology</td>
     </tr>

     <tr>
     <td>Year Level:</td>
     <td>4th year</td>
        </tr>

       <tr>
     <td>Sponsor:</td>
       <td>Evsu</td>
         </tr>

        <tr>
       <td>School Year & Semester:</td>
         <td>2019-2020 2nd sem</td>
           </tr>

        </tbody>
        </table>
          </div>
             <p class="card-text"></p>
             </div>
           </div>
          </div>

    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <a href="<?php echo base_url(''); ?>">  <button type="submit" class="btn btn-primary" 
    >Join</button> 
    </a>
     </div>
  
      </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
      <!-- /add mmebers --><!-- /.modal -->
      <!-- /add mmebers -->
      <!-- edit member -->

AJAX: 

$(document).ready(function(){
   $('#manageMemberTable').on('click', '.get', function(){  
       var event_id = $(this).attr("id");  
     
       $.ajax({  
            url:"<?php echo base_url() ?>Events/eventdetails/"+event_id,
            method:"POST",  
            dataType:"json",  
            success:function(data)  
            {  

                 
                 $('#userModal').modal('show');
                 $('[name="event_title "]').val(data.event_title);  
                 $('#event_desc').val(data.event_desc);  
                 $('#event_id').val(event_id);  
                  
            } 
           
      
            })  

            });
                });

1 Ответ

0 голосов
/ 08 августа 2020

Ваше представление с таблицами данных: - 

<td>
<input type="button" value="View Detail Event" id="<?php echo $list->event_id; ?>" class="btn btn-info view_event" />
</td>

Bootstrap Модальный код: -

Поместите это Bootstrap Модальное Код перед закрывающим тегом в вашем файле просмотра, где данные отображаются с помощью кнопки просмотра сведений. 

<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 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 Код: -

положить это после Bootstrap модального кода, но перед закрытием тега в вашем файле просмотра. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
 $(document).ready(function(){  
  $('.view_event').click(function(){  
       var event_id = $(this).attr("id");  
       $.ajax({  
            url : "<?php echo base_url('ControllerName/get_data_in_modal') ?>", 
            method:"POST",  
            data:{event_id:event_id},  
            success:function(data){
            //alert(data);  
             $('#your_modal_detail').html(data);  
             $('#dataModal').modal("show");  
            }  
       });  
  });  
 });  
</script>

Код контроллера: - 

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class ControllerName extends CI_Controller {

public function get_data_in_modal(){
      $event_id = $this->input->post("event_id");
          
          $this->load->YourModelName();
          
 $data['events'] = $this->YourModelName->getDatainModal($event_id);
$this->load->view('eventsinModal',$data);

  }
}
?>

Модальный код: - 

<?php

class YourModelName extends CI_Model {

function getDatainModal($event_id){

        return $event = $this->db->get_where('table_name',array('event_id'=>$event_id))->row_array();   
        }   
}
?>

Создать в папке «Просмотр событий в режиме». 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>Event Title</label></td>  
             <td width="70%"><?php echo $events["event_title"];?></td>  
          </tr> 
        </div>
  <div class='col-md-6'>       
          <tr>
             <td width="30%"><label>Event Start Date</label></td>  
             <td width="70%"><?php echo $events["start_date"];?></td>  
          </tr>
       </div>   
       </div>

</table>
</div>
...