使用 ajax 在 codeigniter 中通过特定 id 查看模式中的完整数据

Question

我的浏览页

<!-- BEGIN PAGE -->
        <div id="main-content">
            <!-- BEGIN PAGE CONTAINER-->
            <div class="container-fluid">
                <!-- BEGIN PAGE HEADER-->
                <div class="row-fluid">
                    <div class="span12">
                        <!-- BEGIN THEME CUSTOMIZER-->
                        <div id="theme-change" class="hidden-phone">
                            <i class="icon-cogs"></i>
                            
                        </div>
                        <!-- END THEME CUSTOMIZER-->
                        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                        <h3 class="page-title">
                            contactus
                            <small> List </small>
                        </h3>
                        <ul class="breadcrumb">
                            <li>
                                <a href="#"><i class="icon-home"></i></a><span class="divider">&nbsp;</span>
                            </li>
                            <li>
                                <a href="<?php echo base_url('dashboard');?>">Dashboard</a><span class="divider">&nbsp;</span>
                            </li>
                            <li>
                                <a href="#">contactus</a> <span class="divider-last">&nbsp;</span>
                            </li>
                            
                            
                        </ul>
                        
                        <br /><br />
                        
                        <div id="msg">
              <?php
          if($this->session->tempdata('success'))
          {
            ?>
            <div class="alert alert-success hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('success');?>&nbsp;
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
                </div>
            <?php
          }
          if($this->session->tempdata('error'))
          {
            ?>
            <div class="alert alert-danger hide_msg pull" style="width: 95%"> <i class="fa fa-check-circle"></i> <?php echo $this->session->tempdata('error');?>&nbsp;
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
                </div>
            <?php
          }
          ?>
          </div>
          
                        <!-- END PAGE TITLE & BREADCRUMB-->
                    </div>
                </div>
                <!-- END PAGE HEADER-->
                <!-- BEGIN PAGE CONTENT-->
                <div id="page" class="dashboard">
                    <div class="row-fluid">
                        <div class="span12">
                            <!-- BEGIN RECENT ORDERS PORTLET-->
                            <div class="widget">
                                <div class="widget-title">
                                    <h4><i class="icon-reorder"></i> Contactus-List </h4>
                                    <a href="<?php echo base_url('admin/contactus_cont/export_contactus');?>"><button class="btn btn-success" style="float:right"><i class="icon-plus icon-white"></i> EXCEL </button></a>
                                </div>
                                <div class="widget-body">
                        <!-- BEGIN Table-->
               <table class="table table-striped table-advance table-hover" id="sample_1">
                <thead>
                  <tr>
                    <th><i class="icon_profile"></i> S.No. </th>
                    <th> <i class="fa fa-picture-o" aria-hidden="true"></i> Date & Time </th>
                    <th><i class="icon_profile"></i> Name </th>
                    <th> <i class="fa fa-picture-o" aria-hidden="true"></i> Email </th>
                    <th> <i class="fa fa-picture-o" aria-hidden="true"></i> Mobile Number </th>
                    <th><i class="icon_mobile"></i> Message</th>
                    <th><i class="icon_cogs"></i> Action</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                    $i=1;
                  foreach($contactus as $e)
                    {
                    ?>
                    <tr>
                        <td><?php echo $i++;?></td>
                        <td><?php echo $e->date_and_time;?></td>
                        <td><?php echo $e->name;?></td>
                        <td><?php echo $e->email;?></td>
                        <td><?php echo $e->mobile_no;?></td>
                        <td>
                            <?php
                            $string = strip_tags($e->message);
                                $stringCut = substr($string, 0, 15);
                            echo $stringCut."...";?> <a href="<?php echo base_url('view-contactus')."/".$e->id;?>">click to read more</a>
                        </td>
                        <td><div class="btn-group">
                        <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> -->
                         <!--  <a href="<?php echo base_url('view-contactus')."/".$e->id;?>"><button class="btn btn-primary"><i class="icon-eye-open"></i></button></a>  
                         <button class="btn btn-primary view" onclick="view_contact(this.value)" id="user_id" user_id="<?php echo $e->id;?>"><i class="icon-eye-open"></i></button>-->
                         
                         <button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>  
                           
                         <a onclick="return confirm('Are you want to delete ')" href="<?php echo base_url('admin/contactus_cont/delete_contactus')."/".$e->id;?>"> <button class="btn btn-danger"><i class="icon-trash icon-white"></i></button></a>
                      </div></td>
                    </tr>
                    <?php
                    }
                    ?>
                </tbody>
              </table>
                                </div>
                                </div>
                            </div>
                            <!-- END RECENT ORDERS PORTLET-->
                        </div>
                    </div>
                </div>
                <!-- END PAGE CONTENT-->
            </div>
            <!-- END PAGE CONTAINER-->
        </div>
    </div>
    <!-- END CONTAINER -->
    <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 INFO</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>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>  
 $(document).ready(function(){  
  $('.view_data').click(function(){  
       var id = $(this).attr("id");  
       //alert(id);  
       $.ajax({  
            url : "<?php echo base_url('admin/contactus_cont/get_Full_data') ?>", 
            method:"POST",  
            data:{id:id},  
            success:function(data){
            alert(data); 
            //console.log(data); 
             $('#your_modal_detail').html(data);  
             $('#dataModal').modal("show");  
            }
       });  
  });  
 });  
</script>

我想通过 AJAX & JQUERY

查看每个联系人的详细信息

在此我从数据库中获取列表中的所有联系人数据。但是问题是在datail中弹出显示数据。

就像我点击

它应该通过使用特定的 ID 关闭选项显示弹出窗口 window 以及所有详细信息

我的控制器功能：-

public function get_Full_data()
    {
        $id = $this->input->post("id");
        //echo $id; exit;
          $data['fullData'] = $this->contactus_model->view($id);
        $this->load->view('admin/datainModal',$data);
    }

我的模型函数：-

public function view($id)
        {
            $res = $this->db->get_where("contactus",array('id'=>$id));
            return $res->row();
        }

查看页面datainModal.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>Id</label></td>  
             <td width="70%"><?php echo $fullData->id;?></td>  
          </tr> 
        </div>
  <div class='col-md-6'>       
          <tr>
             <td width="30%"><label>Data & Time</label></td>  
             <td width="70%"><?php echo  $fullData->date_and_time;?></td>  
          </tr>
       </div>   
       </div>

</table>
</div>

Answer 1

 $(document).ready(function(){  
  $('.view_data').click(function(){  
       var id = $(this).attr("id");  
       console.log(id);
  });  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>

查看代码：

   <tr>
   <td>
  <button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>
  </td>
</tr>

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 INFO</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 代码:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
 $(document).ready(function(){  
  $('.view_data').click(function(){  
       var id = $(this).attr("id");  
       $.ajax({  
            url : "<?php echo base_url('ControllerName/get_Full_data') ?>", 
            type:"POST",  
            data:{id: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_Full_data(){
      $id = $this->input->post("id");
          
          $this->load->YourModelName();
          
 $data['fullData'] = $this->YourModelName->getDatainModal($id);
$this->load->view('datainModal',$data);

  }
}
?>

模态代码：-

<?php

class YourModelName extends CI_Model {

function getDatainModal($id){

return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row(); 
}   
}
?>

在视图中创建 datainModal.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>Id</label></td>  
             <td width="70%"><?php echo $fullData->id;?></td>  
          </tr> 
        </div>
  <div class='col-md-6'>       
          <tr>
             <td width="30%"><label>Data & Time</label></td>  
             <td width="70%"><?php echo  $fullData->date_and_time;?></td>  
          </tr>
       </div>   
       </div>

</table>
</div>

使用 ajax 在 codeigniter 中通过特定 id 查看模式中的完整数据

view full data in modal by particular id in codeigniter using ajax

javascript

ajax

jquery

codeigniter

bootstrap-modal