I am new to Jquery and want some help from you guys.
i want to decode json data in jquery as i am able to pass data from php to ajax but after it came back in jquery it is not parsing it says undefined. the code is bellow
JavaSript file
$.post("GetData.php", function(data) {
if(data==false)
var tpl = '<p>no record found<p>'
else
var tpl = DrawTableRowsforSection(data);
$("#result").append($(tpl));
},"json");
function DrawTableRowsforSection(p)
{
alert(p.id[0]);
var o = '<table>';
for (var i = 0; i < p.length; i++)
alert(p.id[i]);
o += '<tr><td>'+p.id[i]+'</td><td>'+p.section_name[i]+'<td></tr>';
o+='</table>'
return O;
}
PHP Script
header('Content-Type: application/json');
mysql_connect('localhost','root','') ;
mysql_select_db('news');
session_start();
$query = 'select id,section_name from section';
if ($result = mysql_query($query)) {
if (!mysql_num_rows($result)==null) {
$myArray = array();
while ($row = mysql_fetch_assoc($result)) {
$id = ToSring($row['id']);
$myArray[] = $row;
}
echo json_encode($myArray);
}
}
The database has a table named section
fields are as follows
id int(11)
section_name varchar(20)
There are total 5 records there.
What I want is to populate a table using returned data.
Can any one guide me where I am making mistake
Regards
Kashif Afzaal
Be sure that mysql returns results and you can take them through ajax.
Also, I've seen the following mistake:
You are using the variable tpl wrong. It is just a js variable, no need to use $ .
Use this way:
$("#result").append(tpl);
OK, from the top in the PHP script:
The MySQL extension is ancient and decrepit. Use MySQLi or PDO.
You never handle a failed MySQL query, so the response will quite possibly be empty. In 99% of cases, any if block should have a corresponding else block.
The result of mysql_num_rows() is never null. Do if (mysql_num_rows($result) > 0), or better yet, just if (mysql_num_rows($result)).
Never do if (!something == something) - it rarely does what you want it to. Do if (something != something)
You never handle mysql_num_rows() failing/giving no rows, so (again) the response will quite possibly be empty.
You never do anything with the $id variable you create.
I'm pretty sure ToSring should read ToString. But there's actually no such function in PHP - you would have either define it or invoke it as a method of a class/object. Indeed, this is likely to be the problem, as it will result in a fatal error.
Related
I need to create this list (in javascript):
var videoList = ['GACS1.mp4','GACS4.mp4'];
From a call to the DB. So within the DB I have a field that I am calling to to get those mp4's back.
Here is the function.php, it is really just an Ajax page that processes the request.
function assignedvideos()
{
global $db_name, $path;
$uid = $_GET['uid'];
$selectedvideos = ORM::for_table('movies1')->raw_query('SELECT B.ID AS bid, B.*, LX.* FROM movies1 LX JOIN movies B ON LX.movieid = B.id JOIN locations L ON LX.locationid = L.id JOIN tablets T ON LX.locationid = T.tabletlocation WHERE T.uniqueid =".uid." ORDER BY LX.order ASC')->find_many();
if($selectedvideos)
{
foreach ($selectedvideos as $row)
{
$row['movielocation'] = stripslashes($row['movielocation']);
$row['moviename'] = stripslashes($row['moviename']);
}
}
die();
}
And ofcourse here is the call to the ajax page to retrieve the function.php page to retrieve the values.
$something = $_GET['uid'];
jQuery.ajax({
url: 'function.php',
type: "POST",
data: 'action=assignedvideos&uid='+$something,
success: function (response) {
},
error: function (response) {
}
});
The question is does this get built in the AJAX and sent back as a string and if so how?
Or does the AJAX return the list of variables and I build the list within the success response of the AJAX call? If so, then how?
To make it easy on yourself, put whatever values you want to send back to the client into a variable, and then call
echo json_encode($somevar);
in your case, there is an additional problem,
foreach ($selectedvideos as $row)
{
$row['movielocation'] = stripslashes($row['movielocation']);
$row['moviename'] = stripslashes($row['moviename']);
}
$row is replaced on each iteration of the loop with new data from the next row in $slectedvideos, so your operation basically does nothing, after the foreach $row will contain the last row of data from $selectedvideos. (also, $row will not modify $selectedvideos). if you wanted to modify $selectedvideos, there's a number of ways to do that, but without changing your code too much, you could do
foreach ($selectedvideos as $key => $row)
{
$selectedvideos[$key]['movielocation'] = stripslashes($row['movielocation']);
$selectedvideos[$key]['moviename'] = stripslashes($row['moviename']);
}
and then
echo json_encode($selectedvideos);
which you can then convert to a javascript object in the success call using JSON.parse()
Note that in this case, the javascript object won't look exactly how you want your data to look, instead it will be an array of objects such that array[0].movielocation will be (if I'm not mistaken) the file location of the first movie etc.
If you want it to be exactly an array of file paths, the foreach loop could look like this:
$output = array();
foreach ($selectedvideos as $row)
{
$output[] = stripslashes($row['movielocation']);
}
echo json_encode($output);
Note also that using stripslashes on the file location will force you to either put all the videos in the same folder on the server or use mod_rewrite in some shape or form.
I was using jQuery and this was done easily but I want to change it to regular javascript because I will be using it with phonegap and I don't want to loop through js frameworks every time I make a request to the server. Maybe it's a bad reason to go away from jQuery but seems like it would make everything faster. So I need some help with this code:
<body onload="init();">
<div id="daily"></div>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState === 4 && xmlhttp.status === 200){
var a = JSON.parse(xmlhttp.responseText);
document.getElementById('daily').innerHTML = a.items;
}
};
xmlhttp.open("GET", serviceURL +"getmainnews.php" , true);
xmlhttp.send();
}
</script>
getmainnews.php
//mysqli query
$daily = array();
while ($r = mysql_fetch_assoc($day)){
$daily[] = $r;
}
echo json_encode(array("items" => $daily, "allitems" => $mainnews,...));
In the Chrome DT, I can see the encoded data which is returned but I can't display the first item into my first div with id="daily". With the code I provided, all I get is [object, Object]. What am I doing wrong?
EDIT:
So my query selects the entire row from my database and it's in an array:
{"items":[{"id":"1","pic":"","topic":"daily","article":" \t\t\t\t\t \t\t\t\t\t\u0417...","link":"http://www....","text_cont":..."}]}
How can I display just the pic and the article without all the other junk? Do I have to modify my php file?
EDIT 2:
$day = mysql_query("SELECT pic, article, link FROM table WHERE topic='daily' ORDER BY id DESC LIMIT 1");
$daily = array();
while ($r = mysql_fetch_assoc($day)){
$daily[] = $r;
}
$exc = mysql_query("SELECT pic, article, link FROM table WHERE topic='exclusive' ORDER BY id DESC LIMIT 1");
$excl = array();
while ($e = mysql_fetch_assoc($exc)){
$excl[] = $e;
}
$mus = mysql_query("SELECT pic, article, link FROM table WHERE topic='must' ORDER BY id DESC LIMIT 1");
$must = array();
while ($m = mysql_fetch_assoc($mus)){
$must[] = $m;
}
echo json_encode(array("items" => $daily, "exc" => $excl, "must" => $must));
That's my full php file with the queries. Items, exc, and must are arrays, so the responseText, I guess, is a multidimensional array? Is that the problem I'm having with displaying it?
EDIT 3:
console.log(a.items) gives me an "undefined" so I logged the xmlhttp.responseText.
Without seeing exactly what your JSON looks like it is hard to know for sure. However since you are encoding an array, I suspect changing:
a.items
to
a[0].items
will do the trick...
Edit
I would do:
document.getElementById('daily').innerHTML = JSON.stringify(a.items);
That will convert your object into a string that can be assigned to the innerHTML of an element. I am not sure if this is exactly what you want to do, but when you find the element you want to display using that method should work.
Edit 2
You could change your PHP to only output what you want. However, you could filter it in your JS as well:
a.items[0].pic
and
a.items[0].article
If those don't display as is you can use the stringify method, but you shouldn't need to since those items appear to be strings.
Also note, if you have multiple items you will need to change the 0 to the index of the item you are targeting.
Pardon me if I am making a silly mistake here... But I am little new to PHP...
I have been stuck at this for long time.
I have tried several methods but I am only able to pass ONe table row , not multiple rows
I've even tried with the following approach, but I landed with the same error.
http://www.electrictoolbox.com/json-data-jquery-php-mysql/
Here's what I am trying to do :
1) Make Ajax call using JQuery, to fetch data from server.
$.ajax({
url: 'test.php', //the script to call to get data
data: "",
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
//use "data"
}
2) fetch table data from MySql database, using PHP.
$result = mysql_query("SELECT username,characterType FROM usertable");
3) pass ALL of the rows as JSON data, back to the calling function.
//This works , Returns one row and I am able to get the result back at AJAX end
$array = mysql_fetch_row($result);
echo json_encode($array);
mysql_fetch_assoc($result) FAILS with the following error :
XML Parsing Error: no element found Location: moz-nullprincipal:{6b1***-****somecrap numbers****-***86} Line Number 17, Column 3:
$array = mysql_fetch_assoc($result);
echo json_encode($array);
I have even tried using mysql_fetch_array($result, MYSQL_NUM) as suggested in the other relevant questions, but I am not able to workaround the problem.
Any Help is greatly appreciated.
============
UPDATE:
I may be wrong but just wanted to know, if this could be the possibility or not... Can this be a local setup related issue ? A Configuration mistake .. ?
I have done my localhost setup using "XAMPP installation" [ Apache / MySQL / Tomcat ... bundled in one package ] ...
When I run the file as "PHP application" it runs just fine ... I am able get "all rows" But when I deploy the code on my apache servers it doesn't run ... The whole php file comes as a response , with "XML parsing Error" [ I am using firebug to track the response ]
Thanks
Pranav
A few things to note here:
As Rup mentioned, $array = mysql_fetch_row($result); only returns a single row.
The other thing is that test.php does not currently return a JSON object; to see whats going on, it helps to comment out dataType: 'json', and use console.log(data); to see what is being returned. Your response probably looks something like this:
["someUsername","someChartype"]
The format of the object you are expecting is probably something more like:
[{"username":"foo","chartype":"admin"},
{"username":"bar","chartype":"user"},
{"username":"fum","chartype":"guest"}]
To get the format of the associative array, use mysql_fetch_assoc($result) instead; that will give
{"username":"someUsername","chracterType":"someChartype"}
To summarize, update your php code to:
Loop through your results, pushing them onto an array.
Encode the entire array at the end
$outputArray = array();
while( $row = mysql_fetch_assoc( $result ) ){
array_push($outputArray, $row);
}
echo json_encode($outputArray);
Take a look at How to build a JSON array from mysql database for more info. Also, as one of the answers mention, its worth using PDO rather than mysql_*
Don't start manually composing a JSON string as #Tuanderful indicated. Let json_encode() handle that -- just give it the right data. Try something like this:
$records = array();
while ( $record = mysql_fetch_assoc( $result ) ) {
$records[] = $record;
}
echo json_encode( $records );
Well I would to like this:
$.ajax({
url: 'test.php', //the script to call to get data
//data: "",
dataType: 'json', //data format
success: somevar
})
var somevar = function(data) //on recieve of reply
{
//use "data"
somevar2 = jQuery.parseJSON(data)
//now You can enter each row/cell from db(/php) like this
// somevar2[0] would be the first row from php
//if You want to do something with every line You can use:
//$.each(somevar2, function(key,value){
//$('#divname').html(value.cellnameoftable)
}
I hope it will help ;)
I'm working on a DB/web based frontend, and have encountered an issue. First off, I have a form with a drop down menu containing a list of contracts. Upon selection of a contract, I'd like for the jobs associated with that contract (fetched from the MySQL DB) to populate a second drop down menu below the first.
I would have just had all the info in one menu, but an 8000 entry drop down menu is a little unwieldy.
My PHP and HTML are barely passable, but enough for my purposes, however my ECMA experience is limited to a little bit of ActionScript in Flash MX, many moons ago.
I'd like to avoid using third party JS libraries (such as jQuery) if at all possible, and I don't mind writing more code. I just need to know whether this is doable, and a little shove in the right direction.
I'll shut up now, heres the form to fetch the contract ID (and the associated client), and the incomplete job menu.
<select name='idcontract' onchange=''>
<!--fetch/display contracts/clients-->
<?php
include 'sqldb.php';
$cntqres = mysqli_query($dbc, 'SELECT * FROM contract');
while ($cntrow = mysqli_fetch_array($cntqres))
{
$cliqres = mysqli_query($dbc, "SELECT * FROM client WHERE idclient = '$cntrow[idclient]'");
while ($clirow = mysqli_fetch_array($cliqres))
{
echo "<option value='$cntrow[idcontract]'>$cntrow[idcontract] $clirow[name]</option>";
}
}
?>
</select>
<select name='idjob'>
<option value='NULL'>Please select a contract</option>
<!--here goes the magical piece of code I don't know how to write-->
</select>
Any help would be much appreciated.
Edit:
Here's the PHP called by FeatherAJAX:
<?php
include 'sqldb.php';
$cnt = mysqli_real_escape_string($dbc, $_GET['cnt']);
$sql = "SELECT * FROM job WHERE idcontract='$cnt' ORDER BY job.idjob";
$jqres = mysqli_query($dbc, $sql);
$i = 1;
while (($jrow = mysqli_fetch_array($jqres)) && ($i < count($jrow)))
{
echo "idjob=><option value='$jrow[idjob]' id='$jrow[idjob]'>Job-$i $jrow[part_desc]</option>";
$i++;
}
?>
First off, you may want to rewrite the chunk of code that produces the contract options. Looping through query results and performing another query for each record is inefficient. Based on your queries, you might be able to use this code, which does a single query and then generate the options based on that. (I had to use made-up column names in the ORDER clause. In general, you should always sort your recordset so that results are in a determinate order -- even if you don't care what that order is.
<select name="idcontract" id="idcontract">
<!--fetch/display contracts/clients-->
<?php
include 'sqldb.php';
$clients = mysqli_query($dbc, '
SELECT ct.idcontract, ct.idclient, cl.name
FROM contract ct LEFT OUTER JOIN client cl ON ct.idclient = cl.idclient
ORDER BY ct.contractname, cl.clientname
');
while ($client = mysqli_fetch_array($clients)) {
echo "<option value=\"{$client[idcontract]}\">{$client[idcontract} {$client[name]}</option>";
}
?>
</select>
<select name="idjob" id="idjob">
<option value="NULL">Please select a contract</option>
</select>
To your question, the code you're looking for actually doesn't go where that comment is. What you need is an event handler that responds to the user picking an option in the first SELECT; it should then grab the value of that option and request from the server a set of key-value pairs to stuff into the second SELECT.
Something like this:
document.getElementById('idcontract').onchange = function(event) {
// grab currently selected value
var sValue = null;
for(var i = 0, imax = this.childNodes.length; i < imax; i++) {
var eOption = this.childNodes[i]; // shorthand
if(eOption.selected) {
sValue = eOption.value;
break;
}
}
if(!sValue) return;
// get the sub-options for this value
getSubOptions(sValue, function(XHR) {
// this code runs once the response comes back from the server
var aPairs = [];
var nlJobs = XHR.getElementsByTagName('jobs'); // assumptions #1 & #2: response is XML, includes <job> tag for each job
// extract key-value pairs from XML
for(var i = 0, imax = nlJobs.length; i < imax; i++) {
var xJob = nlJobs[i]; // shorthand
/*
assumption #3: <job> tag has "id" property
assumption #4: job name appears inside <job> tag
assumption #4.5: you've got an abstraction layer that normalizes XML node interfaces so that "text" and "textContent" are folded into "textContent"
*/
aPairs.push({ 'key': xJob.getAttribute('id'), 'value': xJob.textContent });
}
// given array of key-value pairs, rebuild select box
var eJobs = document.getElementById('idjob');
setOptions(eJobs, aPairs);
});
}
function setOptions(eNode, aPairs) {
if(!eNode || !eNode.nodeName || eNode.nodeName.toUpperCase() !== 'SELECT') return false;
// empty SELECT of all options
while(eNode.firstChild) {
eNode.removeChild(eNode.firstChild);
}
// build up new nodes
var eOpt = null;
for(var i = 0, imax = aPairs.length; i < imax; i++) {
eOpt = document.createElement('OPTION');
eOpt.value = aPairs[i].key;
eOpt.appendChild(document.createTextNode(aPairs[i].value));
eNode.appendChild(eOpt);
}
return true;
}
Of course, this is missing an important piece: you need some kind of AJAX abstraction layer. You don't need to get that from a framework, and a good library for this can be less than 50 lines of code (e.g. see PPK's ajax script on quirksmode.org), but you absolutely need something. That layer will provide two benefits: (1) cross-browser compatibility; (2) syntactic sugar.
For example, the code above doesn't include the definition of getSubOptions. That's because the logic will vary based on the interface provided by your AJAX abstraction. The idea, though, is that you'll perform a GET request against a script you write that accepts arguments and returns data satisfying that request. In the code above, I pretended that the script you write will return properly-formed XML data, with a MIME type identifying it as such. Alternatively, you could use JSON (or JSONP), straight text (e.g. CSV-style data), or even raw HTML that you'll just insert into the page.
The benefit of using a full framework is that they all provide convenient ways of doing DOM manipulation (i.e. syntactic sugar again).
The bottom line: you can absolutely do this with a homegrown approach (and I'm proud to say I've done it myself). But it will take longer -- not just because it's less convenient, but also because you'll have to re-invent the wheel === finding and fixing bugs in your code instead of leveraging well-tested core components from some library.
EDIT: If you want to use JSON as a data interchange format instead of XML, you'd modify the response handler being passed to getSubOptions like so:
getSubOptions(sValue, function(XHR) {
// this code runs once the response comes back from the server
var aPairs = eval(XHR.responseText); // assumes JSON defines an array of key-value pairs
// given array of key-value pairs, rebuild select box
var eJobs = document.getElementById('idjob');
setOptions(eJobs, aPairs);
});
And here's a sample of what that JSON might look like:
[ { key: '1234', value: 'Job #1' },
{ key: '2345', value: 'Job #2' },
...
];
In this example, the JSON structure conveniently mirrors the property names expected by setOptions; that said, key and value seem pretty inoffensive.
If you're set on using JSON for data, you may want to look into JSONP as a more secure alternative. It's real similar, but the design pattern is a little different from the anonymous callback technique above.
EDIT 2: Modified sample code for the responder:
<?php
include 'sqldb.php';
$cnt = mysqli_real_escape_string($dbc, $_GET['cnt']);
$sql = "SELECT * FROM job WHERE idcontract='$cnt' ORDER BY job.idjob";
$jqres = mysqli_query($dbc, $sql);
$i = 1;
// prepare the response
header('Content-Type: text/html');
while (($jrow = mysqli_fetch_array($jqres)) && ($i < count($jrow))) {
echo "<option value=\"$jrow[idjob]\" id=\"$jrow[idjob]\">Job-$i ${htmlentities(jrow[part_desc])}</option>";
$i++;
}
?>
I am trying to use JSON for getting dynamic content to my webpage, using javascript. Something is not correct and I have problem figuring out what it can be. In firebug I can see that the JSON-data is retreived as it should. When looking in Firebug under "DOM", the URL I am accessing for the page (the actual page I have created, not the URL to JSON-data) is coloured red (see screenshot below). Here is my javascript:
$(document).ready(function() {
$('#target').click(function() {
alert("At least I',m reached ");
$.getJSON('http://localhost/timereporting/phpscriptlibrary/get_remaining_hours.php', function(data) {
document.getElementById('errorDiv').innerHTML = "Divtext";
alert("Inside getJason");
});
alert("At least I',m done ");
});
This is the significant part of my php file:
$json_string = "{\"activities\": ";
$json_string = $json_string."[";
for ( $counter = 0; $counter < $num; $counter += 1) {
$json_string = $json_string."[".mysql_result($rows,$counter,'date').", \"".mysql_result($rows,$counter,'activity_id')."\", ".mysql_result($rows,$counter,'hours')."]";
if($counter != ($num-1)){
$json_string = $json_string.", ";
}
}
$json_string = $json_string."]}";
echo $json_string;
I assume that "echo" is the way to "send" the JSON-data to the javascript?
One strange thing is that in firebug the JSON-data is presented in two different ways. If you look at the included screenshots below, the second one has dates like "1988" or similar while on the first one the dates are more complete like "2010-12-10". The first screenshot depicts how it should be and that's how I am trying to send it, and obviously it is received like this at some point.
How come my div-tag isn't updated with the date or that the alert inside the $.getJSON isn't triggered, only the alert before and after?
You don't create your JSON strings properly. Every string has to be enclosed in double quotes. But 2010-12-10 is not and jQuery evaluates this as 2010 - 12 - 10 = 1988.
Don't build your string manually, use json_encode, something like:
$data = array();
while(($row = mysql_fetch_array($result))) {
$data[] = array($row['date'], intval($row['activity_id']), intval($row['hours']));
}
echo json_encode(array('activities' => $data));