使用ajax重新加载一部分网页?

时间:2017-02-28 00:42:56

标签: javascript php jquery ajax codeigniter

控制器(要求加载特定板):

public function getBoard()
{
    $role       = $this->session->userdata('role');
    $user_id    = $this->session->userdata('user_id');
    $board_id   = $this->input->post('board_id');

    if ($this->session->flashdata('first_board_id') !== null) 
    {
        $board_id = $this->session->flashdata('first_board_id');
    }

    $data['board_id']   = $board_id;
    $data['board_name'] = $this->Board_model->getBoardName($board_id);
    $data['columnData'] = $this->Column_model->getColumns($board_id);
    $data['rowData']    = $this->Row_model->getRows($board_id);
    $data['tasks']      = $this->Task_model->getTasks($board_id);
    $data['pendingSubtasks']   = $this->Task_model->countPendingSubtasks($data['tasks']);
    $data['finishedSubtasks']   = $this->Task_model->countFinishedSubtasks($data['tasks']);
    $data['boards']     = $this->Board_model->getBoards($role, $user_id);

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

来自 templates / header.php

<li class="custom-holder select-board">
        <label class="boostrap-select-label">BOARD:</label>
        <select class="selectpicker" title="CHOOSE BOARD" id='board_selection'>
            <?php 
        if (count($boards) > 0) {
          foreach ($boards as $b) {?>
              <option value="<?php echo $b->id; ?>"><?php echo $b->name; ?></option>
            <?php
          }
        }
  ?>
        </select>
</li>

来自 func_board.js (在页脚中加载;在下拉列表选择更改时调用)

$('.select-board').on('change', '#board_selection', function() {
console.log('Changed board selection.');
var selected_board = $('#board_selection option:selected').val();

$.ajax({
    type: 'POST',
    url: base_url + 'home', //configured this in routes.php
    data: { 'board_id' : selected_board },
    success: function(msg) {
        if (msg != 'failed') 
        {
            console.log('Loading board success!');
            $('.mainboard').load(base_url + 'home', {
                'board_id' : selected_board
            }); //mainboard is the parent div in main_kanban 
                 //that basically contains all the elements for the board
        }
        else 
        {
            console.log('Error >> ' + msg);
        }
    },
    error: function(xhr, error, errorThrown) {
        console.log(xhr.responseText);
        console.log(error);
    }
  });
});

我有一个select或下拉菜单,您可以从中选择要查看的电路板。但是,正如我上面的代码暗示的那样,我使用的是模板。基本上,当您从下拉列表中单击另一个板时,它应该加载该板。董事会的html位于main_kanban。我不认为我可以使用redirect,因为我需要通过视图传递数据。

我已尝试过jQuery的load(),但我遇到了问题。 (每个<td>都有新任务按钮,因为我正在使用电路板的表格。当新任务模式打开时,可以选择< strong> To Date 和 From Date 。当我使用load()时,日期时间选择器无法显示。我使用多个脚本进行自定义加载在templates/footer.php中我也有其他选择菜单。当ajax完成时,这些菜单是空的。) 我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:0)

使用load()的完成回调来初始化日期选择器等插件

  var loadData = {'board_id' : selected_board};

  $('.mainboard').load(base_url + 'home', loadData , function(){
     // new html exists now .. initialize plugins or event listeners    
     $(this).find('.datepickerClass').datepicker({ /* options */})
  });