在codeigniter中使用jquery / ajax刷新特定div

时间:2018-03-22 09:49:20

标签: php jquery ajax codeigniter refresh

我有一个包含订单的表,我试图每隔5秒刷新一次表,而不刷新整个页面。 经过一些研究后我发现我需要使用这个功能:

<script>
$(document).ready(function(){
    refreshTable();
});
function refreshTable(){
    $('#the_div_you_need_to_refresh').load('path', function(){
        setTimeout(refreshTable, 5000);
    });
}

问题是,我真的不明白我应该放入什么.load('path')如果我像这样写它,它会使我的标题加倍,它会给我一个错误:

.load('<?php echo base_url('page name')?>',function(){
         <--function content-->
})

我的观看页面是:

<h2><?= $title;?></h2>
<div id="table_container">
    <table class="table table-striped table-hover" id="orders_table">
        <thead>
        <--content-->
        </thead>
        <tbody>
        <?php foreach($orders as $order):?>
            <tr class="active">
                <--content-->
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
</div>

我的控制器是这样的:

public function index(){

            if(!$this->session->userdata('logged_in')){
                redirect('users/login');
            }
            $data['title'] = "Comenzi";
            $data['orders'] = $this->order_model->get_orders();

            $this->load->view('templates/header');
            $this->load->view('orders/comenzi',$data);
            $this->load->view('templates/footer');
        }

你能解释一下我该怎么办?

2 个答案:

答案 0 :(得分:0)

这是一个异步请求,用于从其他资源获取数据。为了在每5秒后加载新数据,您需要创建一个页面/控制器,该页面/控制器将受到此加载功能的影响。

您需要在path变量中输入此页面/控制器的网址。

该控制器应该返回您将使用jquery

追加或替换的新数据

答案 1 :(得分:0)

尝试在控制器中创建新操作。例如。

public function newData(){

    if(!$this->session->userdata('logged_in')){
        redirect('users/login');
    }
    $data['title'] = "Comenzi";
    $data['orders'] = $this->order_model->get_orders();

    $this->load->view('path_to_your_table_view',$data);
}
你脚本中的

<script>
    $(document).ready(function(){
        refreshTable();
    });

    function refreshTable(){
        $("#table_container").empty();
        $("#table_container").load("<?php echo base_url('newData')?>", function(){
            setTimeout(refreshTable, 5000);
        });
    }
</script>

我希望它会有所帮助。