Display returned JSON objects with jQuery - php

I'm having trouble figuring out how to display some return JSON objects.
My script works like this:
I'm making an ajax call, sending some params to a CodeIgniter Controller where I'm processing it with a model, making some queries towards an database and then returning the json_encoded rows to the ajax callback function. This works great btw.
Here is what I want to do now and here its where I'm stuck. I want the new JSON objects (contains database rows) to "replace" the old rows in a html table. So I want it to update the table depending on the params I'm passing but only in the tbody mind.
I'm new at jquery so I've tried i few things. I've tried iterate trough the json data and use the $.html(string) function but i guess this replace everything and it will eventually just display the last object(Am i right?).
So I wonder how in a general sense I would do this?

$.ajax({
type: 'GET',
url: 'someSite.com/someEndpoint'
data: xyz.
success: function( response ) {
//lets say you have an object like this: object = { data: { ... } }
var html = '';
for(var i = 0; i<response.data.length; i++) {
html += '<tr><td>'+response.data[i].title+'</td></tr>';
}
$('#someTable tbody').html(html);
}
});

You don't have to return JSON objects in an AJAX request. Try setting the data_type config setting for the $.ajax call to "html" (or leave it blank--jQuery is really good about figuring it out from the response data).
I usually factor out the <tbody>...</tbody> portion of a view to its own view partial. Then, the "original" page load can use it, and so can an updating AJAX call.
The only asterisk to this is if you need some sort of object-oriented response along with the HTML. I would usually do something like this:
{
"stat": "ok",
"payload": "<tr><td>row1</td></tr><tr><td>row2</td></tr>"
}
And then in the ajax success function:
$.post('/controller/action', { some: 'data' }, function(response) {
$('#my_table tbody').append(response.payload);
}, 'json');

What are the params your passing in?
for example you might use a select or input field to trigger an ajax call and pass its value as the param.
var tableObj = {
var init : function(){
//check that your selectors id exists, then call it
this.foo();
},
foo : function(){
var requestAjax = function(param){
var data = {param : param}
$.ajax({
data : data,
success : function(callback){
console.log(callback);//debug it
$("tbody").empty();//remove existing data
for(var i =0; i < callback.data.length; i++){}//run a loop on the data an build tbody contents
$("tbody").append(someElements);//append new data
}
});
}
//trigger event for bar
$("#bar").keyup(function(){
requestAjax($(this).val());
});
}
}
$(function(){
tableObj.init();
})
Your php method
public function my_method(){
if($this->input->is_ajax_request())
{
//change the output, no view
$json = array(
'status' => 'ok',
'data' => $object
);
$this->output
->set_content_type('application/json')
->set_output(json_encode($json));
}
else
{
show_404();
}
}

Related

Use the autocomplete event in the succes of my ajax

I would like to use an autocompletion in my application. I'm trying to use the jquery UI completion but nothing happens. I made an ajax to get all columns with a specific variable written by the user. The query is working, I have my array with all my columns back from the server. With this query reponse, I tried to do the jquery autocompletion in the success ajax but as I said nothing is happening.
Do you have an idea?
function autoCompleteRegate(){
$("#code_regate").keyup(function() {
// AJAX de l'auto-complete
var source = '/gestion/gestDepot/ajaxautocompleteregate';
var codeRegate = $("#code_regate").val();
$.ajax({
type : "POST",
url : source,
async : false,
dataType : 'json',
data : {
'codeRegate' : codeRegate
},
success : function(response) {
var availableTags = response;
$("#code_regate").autocomplete({
source: availableTags
});
}
});
});
public function ajaxautocompleteregateAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
$params = $this->_getAllParams();
$codeRegate = $params['codeRegate'];
$oDepotService = new Services_Depot();
$response = $oDepotService->searchCodeRegate($codeRegate);
echo json_encode($response);
}
Network query - form
Exemple of nothing happening
The answer from the server
You have to directly pass the cd_regate array instead of a multidimensional array. One workaround is you could process the json output on the backend side :
public function ajaxautocompleteregateAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
$params = $this->_getAllParams();
$codeRegate = $params['codeRegate'];
$oDepotService = new Services_Depot();
$response = $oDepotService->searchCodeRegate($codeRegate);
$json = [];
foreach ($response as $key => $value) {
array_push($json, $value->cd_regate); // the output will be "[774970, 774690, 774700,... ]"
}
echo json_encode($json);
}
I would suggest the following for your JavaScript:
$("#code_regate").autocomplete({
source: function(request, response){
$.ajax({
type : "POST",
url : '/gestion/gestDepot/ajaxautocompleteregate',
async : false,
dataType : 'json',
data : {
'codeRegate' : request.term
},
success : function(data) {
response(data);
}
});
}
});
This uses a function as a Source. From the API:
Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp().
When 1 or more letters are entered into the text field, this will be passed to the function under request.term and you can POST that to your script via AJAX. When you get the result data, it must be in an Array or an Object with the right format.

Get JQUERY function return in PHP

I want to know if I can get the return of a JQUERY function, in PHP ?
I have this following jquery function, returning an array and I want to get this array in my PHP, in order to send it to process the data
function getItemMetaList() {
var itemMetaArray = [];
$('.frm_pro_form input, .frm_pro_form select, .frm_pro_form textarea').each(function(cpt){
if($(this).attr('type') != 'hidden' && ($(this).attr("type") != "submit")) {
console.log(cpt);
console.log($(this).attr("name"));
itemMetaArray.push($(this).attr("name"));
}
});
return itemMetaArray;
}
Thanks in advance
function getItemMetaList() {
var itemMetaArray = [];
$('.frm_pro_form input, .frm_pro_form select, .frm_pro_form textarea').each(function(cpt){
if($(this).attr('type') != 'hidden' && ($(this).attr("type") != "submit")) {
itemMetaArray.push($(this).attr("name"));
}
});
$.ajax({
method: "POST",
url: "some.php",
//data: { array: itemMetaArray}
data: JSON.stringify({ array: itemMetaArray})
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
you can send data by this way in a php file like documented here: ajax jquery
The Ajax request returns data for JavaScript in the page loaded in your browser. The browser does not display the data automatically. The answer is captured by .done() in MacBook's example. You can put JavaScript in the done () method to display the data returned. If you wish the page to reload in your browser, Ajax is not the good way. In JavaScript, use form.submit instead. Then you can have your PHP code read the submitted data and generate a new html page and have this displayed by the browser.

parsing and looping through json data

I have been working on this code for some time now and have researched on various solutions on how to solve it, but i have found none.
I am getting the following json data:
{"id":"4","name":"bugatti","details":"the bugatti v8 simplly the best","seats":"2","status":"0","image"
:"","category":"sedean"}{"id":"5","name":"bently","details":"the bently the best of the best","seats"
:"5","status":"0","image":"","category":"SUV"}
I'm having trouble parsing that json data which I get from the jquery ajax $.post request as shown below:
$.post('response.php',
{
task : 'fleet'
},
function(data)
{
data = $.parseJSON(data);
$.each(data , function (key,value)
{
console.log(value);
});
console.log(data.id);
}
).error(
function()
{
}
).success(
);
Here is the response.php data:
if(isset($_POST['task']) && $_POST['task'] == 'fleet')
{
$car = new Cars();
$fleet = $car->getAll();
foreach( $car->data() as $cars )
{
echo json_encode($cars);
}
}
What could be the problem?
I would do something like this
You can also add dataType: 'json' to your $.post function.
// making sure we pass the header for the json output
header('Content-Type: application/json');
// if $car->data() (is the array, just encode it to json)
echo json_encode($car->data());
I ran some examples with your code (without the ajax)
var data = '{"id":"4","name":"bugatti","details":"the bugatti v8 simplly the best"}';
data = $.parseJSON(data);
$.each(data , function (key,value)
{
console.log(value);
});
// key will output id, name, details..
// value will output (what is below)
output :
4
bugatti
the bugatti v8 simplly the best
(remove value.id and just say value)
If you wanted to confirm the param, you can easily do
if (key == 'id')

Cannot populate form with ajax and populate jquery plugin

I'm trying to populate a form with jquery's populate plugin, but using $.ajax
The idea is to retrieve data from my database according to the id in the links (ex of link: get_result_edit.php?id=34), reformulate it to json, return it to my page and fill up the form up with the populate plugin. But somehow i cannot get it to work. Any ideas:
here's the code:
$('a').click(function(){
$('#updatediv').hide('slow');
$.ajax({
type: "GET",
url: "get_result_edit.php",
success: function(data)
{
var $response=$(data);
$('#form1').populate($response);
}
});
$('#updatediv').fadeIn('slow');
return false;
whilst the php file states as follow:
<?php
$conn = new mysqli('localhost', 'XXXX', 'XXXXX', 'XXXXX');
#$query = 'Select * FROM news WHERE id ="'.$_GET['id'].'"';
$stmt = $conn->query($query) or die ($mysql->error());
if ($stmt)
{
$results = $stmt->fetch_object(); // get database data
$json = json_encode($results); // convert to JSON format
echo $json;
}
?>
Now first thing is that the mysql returns a null in this way: is there something wrong with he declaration of the sql statement in the $_GET part? Second is that even if i put a specific record to bring up, populate doesn't populate.
Update:
I changed the populate library with the one called "PHP jQuery helper functions" and the difference is that finally it says something. finally i get an error saying NO SUCH ELEMENT AS
i wen into the library to have a look and up comes the following function
function populateFormElement(form, name, value)
{
// check that the named element exists in the form
var name = name; // handle non-php naming
var element = form[name];
if(element == undefined)
{
debug('No such element as ' + name);
return false;
}
// debug options
if(options.debug)
{
_populate.elements.push(element);
}
}
Now looking at it one can see that it should print out also the name, but its not printing it out. so i'm guessing that retrieving the name form the json is not working correctly.
Link is at http://www.ocdmonline.org/michael/edit_news.php with username: Testing and pass:test123
Any ideas?
First you must set the dataType option for the .ajax call to json:
$.ajax({dataType: 'json', ...
and then in your success function the "data" parameter will already be a object so you just use it, no need to do anything with it (I don't know why you are converting it into a jQuery object in your code).
edit:
$( 'a' ).click ( function () {
$( '#updatediv' ).hide ( 'slow' );
$.ajax ( {
type: "GET",
url: "get_result_edit.php",
success: function ( data ) {
$( '#form1' ).populate ( data );
},
dataType: 'json'
} );
$( '#updatediv' ).fadeIn ( 'slow' );
return false;
}
also consider using $.getJSON instead of $.ajax so you don't have to bother with the dataType
Try imPagePopulate (another jquery plugin). It may be easier to use:
http://grasshopperpebbles.com/ajax/jquery-plugin-impagepopulate/

jQuery + JSON + Open flash chart, how can I create a chart on the fly?

The JS
SWFlocation = "open-flash-chart.swf";
getMyData = function()
{
$.post(
myJsURL,
{
passedval: 1234
},
function (returned_json) {
return returned_json;
},
"json"
);
}
swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "", {"get-data":"getMyData"} );
Using firebug, if I hardcode the returned JSON, the chart works fine. But when I request the data as above - i.e. after the page has loaded, I get a 2032 error.
The getMyData method actually requests data from a PHP script that in turn requests data from and extrnal API (a big one like flickr) so there can be a few seconds delay if the results are not currently cached by us. Maybe I'm going about this the wrong way?
You have to put the swfobject.embedSWF() into the ajax callback.
like this:
SWFlocation = "open-flash-chart.swf";
init_chart = function()
{
$.post(
myJsURL,
{
passedval: 1234
},
function (returned_json) {
swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "", {"get-data":returned_json} );
},
"json"
);
}
init_chart();
just use $.ajaxSetup({async : false}); before you call $.post();
example
function ajaxchart() {
$.ajaxSetup({async : false});
var chart = '';
var url = "data.php";
var data = '';
var callback = function(resp) {
chart = resp;
};
$.post(url, data, callback, 'text');
return chart;
}
$(function() {
$("#test").click(function() {
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0", "expressInstall.swf", {"get-data":"ajaxchart"});
});
});
Just a guess as I don't use Open Flash Chart but since you're making an async ajax call your getMyData function is not actually returning the json value (the callback function you defined is).
Try preloading (maybe make a synchronous ajax call before the swf embed?) the data and storing it in a var, then have your getMyData function simply return that var.
In Javascript, declair a variable flashvars and a var data like this:
var flashvars = {};
var data;
Also, make sure that you have this function, which is automatically called by swfobject.embedSWF:
function open_flash_chart_data(){
return JSON.stringify(data);
}
Now go to your AJAX-function and change your AJAX-Success-call like this:
success: function(returned_json){
// we need to set both
// data and flashvars.ofc
data=returned_json;
flashvars.ofc = returned_json;
swfobject.embedSWF(SWFlocation, "myChartDiv", "650", "200", "9.0.0", "",flashvars);
I had a similar problem, and it was quite hard to debug that you need both vars data and flashvars in the success callback. If these variables (or function open_flash_chart_data() ) are missing, you'll get Error 2032.

Categories