在ajax调用中从服务器接收HTML并使用该HTML加载页面

Question

I am working on CodeIgniter and AJAX . What I am trying to do that I have a datatable which contains list of employee. On button click I get the ID of employee and send it to my controller in which I get all the necessary details from DB of that specific employee. I have already done this. The issue I am facing is that how can I redirect to viewEmployeeProfile page after successful ajax call with that specific Employee Detail.

Here is my 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 Function

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

template/template view

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

after the request console.log(data) ; gives me the HTML of viewEmployeeProfile view I have also tried to echo the content from $data array like print_r($employeeBasicDetails); and it gives me the correct information. BUT I don't know how to load that view with the HTML received from ajax call ?

Any idea how to do this or is there any good hack for this solution, may be I am doing it all wrong. Any input in this will be highly appreciated. Thanks.

Answer 1

This line of your ajax call specifies the type of data to expect in return from the server. If you are outputting HTML you need to change it as currently you are telling the ajax request to expect json in return

dataType: "json"

To insert it into your page you just need to specify where you want it. Create an empty span/div whatever and give it an id, then in your success callback you can insert the returned data into that element on your page. Say your div id was employee then you add the following to your success callback:

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