How to load a view inside a div using ajax in codeigniter - php

Question

I want to load a view in another view using AJAX in CodeIgniter. I have written this code in the view.
<button class="btn btn-primary shadow" id='add_items'>Add Items</button>
<div class="row-fluid sortable shadow">
<div id="#show"></div>
</div>
$('#add_items').on('click', function(e) {
e.preventDefault();
$.ajax({
url: "<?=base_url();?>Items/add_items",
type: 'get',
dataType: 'html',
success: function(output) {
$('#show').html(output);
}
});
});
This is the controller from which I want to load view inside the <div id="show">
public function add_items()
{
$this->show('admin/Items/index');
}

Answer 1

I think this example of my code with ur Object Oriented Programming skills can help u weel .
just create an xml file content a fiew of views u need, and tage everyone of them by an unic id .
this is a part of my xml file saved on the path :
{project folder}/src/CentralAppView.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<view id="adduser"><!-- choose ur id as libel of ur view must be unic -->
<!-- u can edit/insert everything u need here -->
<fieldset>
<form ...>
....... Content View ....
</form>
</fieldset>
</view>
</root>`
Now
1) u have to create an XMLHttpRequest instance called for example "xmlserver " be like :
var xmlserver = new XMLHttpRequest();
2) When u create this Object instance , u ll must to define for it the abstract methode called :
onreadystatechange
because u need to make a contol for every server state you get it , in this point , you need to check if u get the needed reponse for doing your traitment to your text response using tow XMLHttpRequest object attributes are changing values every server states changing :
xmlserver.status and xmlserver.readyState ( you can change 'xmlserver' by 'this' if you have something ambiguse about ) .
nice , now , u must to know which values can have there attributes and what is the best server state make you ready to do what you need by your server response .
lets begin by the attribue 'status' :
status is a integer attribute and have a values been got from the server juts to indicate the server response tag , there values may be enter an interval that accorded to your server behavior and fonctionality , for your using server , it may be 100 .. 600 , every value have an indicator .
we have a very knew value example :
404 request was not found on this server , so , 'request was not found on this server' is the indicator/meaning accorded to the value 404 of the attribute ' status ' .
200 is the indicator/meaning accorded to a succed access and response .
Now , lets move to the readyState attribute :
readyState is also an integer attribute , its just have the count of ur states got from ur server , his interval is fixed between 0..4 , 0,1,2,3 means an faild network access to ur server and the value 4 is accorded to the access connecting .
i think is also related to the server connection ping count .
Now , if u got 200 states value and 4 readystates , u ll able to do ur traitment and make ur view insert using ur server text response , because it s the only response format using for all servers ( propably) .
See the code and i think u ll understand more :
xmlserver.onreadystatechange = function() {
if (this.status == 200 && this.readyState == 4) {
// do ur response traitment and ur view insert here
}
}
After that , u need to specify which file or which php page u need to load from it ur view contient just by using the XMLHttpRequest Object instance methode 'Open' with passing the following args :
ur sending mode : Get/POST , get is used to get data from , and post used to send text data as an argment of the send method that we ll talk about it later .
.
ur file / content path : in ur situation it must be {project folder}/src/CentralAppView.xml or the same path u used it .
Attention : wrong path can or server shutdown state can return the unwanted values that we tolk about it ago .
and
ur synchronisation level : true/false .
the code ll be :
xmlserver.open("GET", "./src/Containts_Dialogs.xml", true);
finaly in the Ajax part
call the method send to begin transaction between the server and ur browser for getting ur need view from ths server .
xmlserver.send(); // arg is undefined because we used the GET sending mode in the open methode
finaly with DOM to insert ur view in ur Div element
Using predefined XMLDocument Object instance , his getElementById() methode and innerHtml attribute .
getting the DOM element wich have the id 'show' from the XMLDocument
Object instance called document and affect it in a new variable
called for example viewelm.
Updating the view by the new Content ajax response .
Now , we just return to ower 'onreadystatechange' and insert this traitment in the comment that i make it for u , to get the code :
var xmlserver = new XMLHttpRequest();
xmlserver.onreadystatechange = function() {
if (this.status == 200 && this.readyState == 4) {
document.getElementById("show").innerHtml = xmlserver.responseText;
}
}
xmlserver.open("GET", "./src/Containts_Dialogs.xml", true)
xmlserver.send();
Warrning : delete # from your html div id attribute element , to run the code correctly .
Good programing mate :) .

Answer 2

In the controller, You load the html string of the view page you want to load as :
$output = array(
'result' => $this->load->view('admin/Items/index','',true)
);
You send the output as the response to the ajax request :
print(json_encode($output));
You receive the response clientside like :
success: function(output) {
$('#show').html(output.result);
}
After the comment from #Danish, I realized the ajax expects the response to be HTML, in this implementation the server responds with json data.
To be able to use this solution, you need to change the response type of the ajax call to Json.
$('#add_items').on('click', function(e) {
e.preventDefault();
$.ajax({
url: "<?=base_url();?>Items/add_items",
type: 'get',
dataType: 'JSON',
success: function(output) {
$('#show').html(output.result);
}
});
});
Hope This works.