使用 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 的所有詳細信息

我的 controller function：-

 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); }

我的 model function：-

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

在Modal.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> 

引導模式代碼：-

<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>

Controller 代碼：-

<?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(); 
}   
}
?>

在視圖中創建數據inModal.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>