recevoir HTML du serveur dans l'appel ajax et charger la page avec ce HTML

Question

Je travaille sur CodeIgniter et AJAX. Ce que j'essaye de faire que j'ai un datatable qui contient la liste des employés. En cliquant sur le bouton, je reçois le ID de l'employé et l'envoie à mon contrôleur dans lequel je reçois tous les détails nécessaires de la DB de cet employé spécifique. J'ai déjà fait ça. Le problème auquel je suis confronté est que comment puis-je rediriger vers la page viewEmployeeProfile après un appel ajax réussi avec ce détail spécifique employé.

Voici mon code:

JS

$('#viewAllEmployeeTable tbody').on('click', '.viewEmployeeDetail', function() { 
    var data = viewAllEmployeeTable.row($(this).parents('tr')).data(); 
    employeeID = data.employeeID; 
    $.ajax({ 
     url: "/ackamarackus/employee/viewEmployeeProfile", 
     type: "POST", 
     data: { 
      "employeeID": employeeID 
     }, 
     dataType: "json", 
     success: function(data) { 
      console.log(data); 
     }, 
     error: function(error) { 
      //console.log(error); 
     } 
    }); 
}); 

viewEmployeeProfile Fonction

public function viewEmployeeProfile() { 
    $employeeID = $this->input->post('employeeID'); 
    $data['employeeBasicDetails'] = $this -> getemployeeBasicDetailsFromDatabase($employeeID); 
    $data['employeeDepartmentalDeails'] = $this -> getemployeeDepartmentalDeailsFromDatabase($employeeID); 
    $data['employeeSalaryDetails'] = $this -> getemployeeSalaryDetailsFromDatabase($employeeID); 
    $data['employeeEducationDetails'] = $this -> getemployeeEducationDetailsFromDatabase($employeeID); 
    $data['employeeJobHistoryDetails'] = $this -> getemployeeJobHistoryDetailsFromDatabase($employeeID); 
    $data['employeeTrainingDetails'] = $this -> getemployeeTrainingDetailsFromDatabase($employeeID); 
    $data['header'] = 'template/header'; 
    $data['sidebar'] = 'template/sidebar'; 
    $data['main_content'] = 'viewEmployeeProfile'; 
    $data['footer'] = 'template/footer'; 

    echo $this -> load -> view('template/template', $data, TRUE); 
} 

vue modèle/template

//This view is generic and implements templating 
$this->load->view($header); 
$this->load->view($sidebar); 
$this->load->view($main_content); 
$this->load->view($footer); 

après la demande console.log(data); me donne le HTML de viewEmployeeProfile view J'ai également essayé d'écho le contenu du tableau $ data comme print_r($employeeBasicDetails); et il me donne l'information correcte. MAIS je ne sais pas comment charger cette vue avec le HTML reçu de l'appel ajax?

Une idée de comment faire cela ou y at-il un bon hack pour cette solution, peut-être que je fais tout faux. Toute contribution à cela sera très appréciée. Merci.

Answer 1

Cette ligne de votre appel ajax spécifie le type de données à attendre en retour du serveur. Si vous produisez HTML vous devez changer comme vous dites actuellement la demande ajax attendre JSON en retour

dataType: "json" 

Pour l'insérer dans votre page, vous avez juste besoin de spécifier où vous le voulez. Créez un span/div vide et donnez-lui un identifiant, puis dans votre callback réussi, vous pouvez insérer les données retournées dans cet élément sur votre page. Supposons que votre div id était employé alors vous ajoutez ce qui suit à votre rappel de succès:

$('#employee').html(data);