Reload einen Teil der Webseite mit Ajax?

Question

Controller (genannt eine bestimmte Karte zu laden):

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

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

Von func_board.js (in der Fußzeile Loaded, wenn Drop-Down-Auswahl aufgerufen ist geändert)

$('.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); 
    } 
    }); 
}); 

Ich habe eine select oder Dropdown-Menü, aus dem Sie auswählen können, welches Board angezeigt werden soll. Wie oben in meinem Code erwähnt, verwende ich jedoch Vorlagen. Grundsätzlich, wenn Sie auf ein anderes Brett aus dem Dropdown klicken, soll es das Brett laden. Der HTML-Code für das Board lautet main_kanban. Ich glaube nicht, dass ich redirect verwenden kann, da es Daten gibt, die ich mit der Ansicht übergeben muss.

Ich habe versucht, jQuery load(), aber ich habe Probleme damit. (Es gibt eine Neue Aufgabe Schaltfläche in jeder <td> als ich eine Tabelle für die Bretter verwendet wird. Wenn die neue Aufgabe modal es öffnet, ist eine Option, die auszuwählen aktuell und Von Datum. Als ich load() verwenden date time picker taucht nicht auf Ich benutze mehrere Scripte für die Anpassung die im templates/footer.php geladen sind Ich habe noch andere Menüs im Modal. Wenn Ajax beendet ist, sind diese Menüs leer.) Wie kann ich das erreichen? ?

Answer 1

den Abschluss Rückruf von load() verwenden Kommissionierer Plugins wie Datum zu

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