在codeigniter中使用AJAX显示数据的模态

时间:2019-01-22 02:24:39

标签: javascript php ajax codeigniter

这几天,我被这个模态事物所困扰。 我有很长的数据列表..为了减少屏幕上显示的太多数据。我计划使用模式,因此当用户想要查看详细信息时。他们只需单击特定数据,然后系统将全部显示。但是,为了显示所有数据,需要有另一个函数来调用。我环顾四周,发现无法调用函数来填充数据,而无法打开模式。因此,我尝试使用AJAX和JS。

我的问题..该功能无法打开模式并显示数据。谢谢,如果你们在那里可以帮助我..在此先感谢。这是我的代码:

模式: modal-finance.php

defined('BASEPATH') or exit('No direct script access allowed');
class Model_finance extends CI_Model {

public function __construct() {
    $this->load->database();
}

// To list HMS data
public function get_hms_data() {

          $query = $this->db->select(array(
             'c.*',
             ), false)
             ->where(
                     'c.pan is NOT NULL',NULL,FALSE
                    ) 
             ->get('coll_tbl c');

         if ($query->num_rows() > 0) {
            return $query->result();
         }
         else {
           return false;
         }
}

// To list HMS data match with PBB data by PAN No
public function matched_by_pan($pan_no){
         $query = $this->db->select(array(
                 'c.*',
                 'p.approval_code',
                 'p.card_no'
             ), false)
             ->join('pbb_cc_tbl p', 'p.approval_code = c.approval_code','left')
             ->like(array(
                     'c.pan' => $pan_no
                    ))
             ->get('coll_tbl c');
         if ($query->num_rows() > 0) {
             return $query->result();
         } else {
             return false;
         }  
}

控制器: Finance.php

class Finance extends CI_Controller {

    public function __construct() {
    parent::__construct();
        $this->load->model('model_finance');
    }

    /* Function to call the view of finance */
    public function index() {
        $this->load->view('pages/finance');
    }


    public function get_matchBYpan()
   {
        $this->load->model('model_finance');

          $cardData = $this->input->post('cardData');
          $last4pan = substr($cardData,12);
          echo $last4pan;


          if(isset($last4pan) and !empty($last4pan))
          {
                 $records = $this->model_finance->matched_by_pan($last4pan);
                 $i=1;
                 $output = '';
                 foreach($records as $row)
                 {
                        $output .= '      
                        <h4 class="text-center">'.$cardData.'</h4><br> 
                        <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                               <th>No</th>
                               <th>Booking ID</th>
                               <th>PAN No</th>
                               <th>Approval Code</th>
                               <th>Method</th>
                               <th>Source</th>
                               <th>OTA</th>
                               <th>Amount</th>     
                        </tr>
                        </thead>
                        <tbody>

                        <tr>
                               <td>'.$i.'</td> 
                               <td>'.$row->booking_id.'</td>
                               <td>'.$row->pan.'</td>
                               <td>'.$row->approval_code.'</td>
                               <td>'.$row->method.'</td>
                               <td>'.$row->source.'</td>
                               <td>'.$row->ota.'</td>
                               <td>'.$row->total.'</td>
                        </tr>
                        </tbody>
                        </table>';
                 $i++;
                 }        
                 echo $output;

          }
   }

观看次数: fin_match.php

<!-- modal-tableHMS starts -->
     <div id="modal_tableHMS" class="modal fade" tabindex="-1">
                                                        <div class="modal-dialog modal-lg">
                                                            <div class="modal-content">
                                                                <div class="modal-header no-padding">
                                                                                <div class="table-header">
                                                                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                                                    <span class="white">&times;</span>
                                                                                                </button>
                                                                                                HMS data matched by last 4 digit PBB Card number (PAN)
                                                                                </div>
                                                                </div>

                                                                <div class="modal-body no-padding">
                                                                    <div id="hms_result"></div>

                                                                </div>
                                                                <div class="modal-footer no-margin-top">
                                                                            <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
                                                                                <i class="ace-icon fa fa-times"></i>
                                                                                Close
                                                                            </button>
                                                                </div>
                                                            </div><!-- /.modal-content -->
                                                        </div><!-- /.modal-dialog -->
                                </div><!-- /.modal-table -->

                </div> <!-- /.main-content-inner -->

<script type="text/javascript">

$(document).ready(function(){
    $('.view_data').click(function(){
        var cardData = $(this).attr('id');

        $.ajax({
            url: "<?php echo base_url() ?>Finance/get_matchBYpan",
            method: "POST",
            data: {cardData:cardData},
            success: function(data){
                $('#hms_result').html(data);
                $('#modal_tableHMS').modal('show');
            }
     });
 });

});
    

<!-- other codes -->

<div class="row">
            <div class="col-xs-6">
                <div class="col-xs-12">
                <center><h3 class="row header smaller lighter blue">
                <span class="col-xs-12"><b> PBB Data </b></span>
                </h3></center>
                <table id="dataTablePBB" class="table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>Transaction Date</th>
                        <th>PBB Card Number</th>
                        <th>Card Type</th>
                        <th>Approval Code</th>
                        <th>Currency</th>
                        <th>Gross Amount</th>
                        <th>Trace No</th>     
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                        if(!empty($PBBdata)):
                        $i=1;
                        foreach($PBBdata as $row)
                        {
                         echo '<tr>';
                         echo '<td>'.$i.'</td>';
                         echo '<td>'.$row->trans_date.'</td>';
                         echo '<td>';
                    ?>
                        <input type="button" name="view" value="<?php echo $row->card_no; ?>" id="<?php echo $row->card_no; ?>" class="btn btn-info btn-sm view_data"">

                    <?php
                         echo '</td>';
                         echo '<td>'.$row->card_type.'</td>';
                         echo '<td>'.$row->approval_code.'</td>';
                         echo '<td>'.$row->gross_cur.'</td>';                                   
                         echo '<td>'.$row->gross_amt.'</td>';
                         echo '<td>'.$row->trace_no.'</td>';
                         echo '</tr>';
                         $i++;
                         }
                         endif;
                    ?>
                    </tbody>
                    </table>
                </div> <!--col-xs-12-->
            </div>

1 个答案:

答案 0 :(得分:0)

似乎您的JS脚本已返回失败。如果您使用的是Chrome,可以在控制台网络-> XHR 上进行检查,有关该错误的详细信息。

$ output变量必须是数组,因为视图需要存储,因为它位于 foreach 循环内,并像这样返回它 * echo json_encode($ output)* 请查看更多here.