PDA

View Full Version : having trouble getting JSON data using Jquery



jarv
01-27-2011, 10:18 AM
I am going through the example at the bottom of this page:
http://api.jquery.com/jQuery.getJSON/


I am using the following code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>


</head>

<body>
<script>
var id=$("#id").attr("value");
$.getJSON("json.php",{id:id},dates);

function dates(datos) {

$("#list").html("Town:"+datos[1].rsTown+"<br>"+"County:"+datos[1].rsCounty);
}

</script>
<div id="id"></div>
<div id="list"></div>
</body>
</html>



and I'm trying to pull my JSON data from my PHP page:
http://www.mypubspace.com/dashtest/json.php

the JQuery seems to be doing something but nothing is being output to my screen?!

project page
http://www.mypubspace.com/dashtest/json.html

Please help?!

venegal
01-27-2011, 10:42 AM
var id=$("#id").attr("value");

You can't fetch an element by id before the HTML where it's defined has actually been parsed. Use jQuery's DOM ready event. Also, you're talking about a <div> here. That doesn't have a "value" attribute.

Now, the reason why it seems it's doing something is that it's doing something: It's loading in your whole 25MB database, which, depending on your connection, might take a while or even trigger a timeout. Debug your PHP code to make it return only what has actually been requested and *never* the whole thing.

jarv
01-27-2011, 10:48 AM
ok so I've changed the database to just bring back just rsTown, I am still unsure of what to do with the JQuery?!

I just want to show the rsTown list in HTML (well in Dash Code really)

so Binding JSON in a dataSource would be best

jarv
01-27-2011, 10:54 AM
the body of my code now looks like this:



<script>
var PUBID=$("#PUBID").attr("value");
$.getJSON("json.php",{PUBID:PUBID},dates);

$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});

function dates(datos) {

$("#list").html("Town:"+datos[1].rsTown+"<br>"+"County:"+datos[1].rsCounty);
}

</script>
<div id="PUBID"></div>
<div id="list"></div>
<p>Not loaded yet.</p>

jarv
01-27-2011, 11:10 AM
I have also tried this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>

<body>
<script>
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('json.php', function(jd) {
$('#stage').append('<p>Town : ' + jd.rsTown+ '</p>');
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />

</body>
</html>


here: http://www.mypubspace.com/dashtest/json1.html


doesn't work either?!

venegal
01-27-2011, 11:31 AM
The first one definitely won't work because while you're waiting for the DOM to print out the message that the DOM is ready, the really important stuff you're still doing before the DOM is ready.

The second one looks ok, but what your server is returning is not valid JSON. It's just a bunch of objects printed out one after the other, where really there should be only one object.

Use Firebug to see this sort of stuff yourself without having to resort to guesswork.

jarv
01-27-2011, 12:25 PM
ok, so the first one I put the function doing the important stuff in front of the ready part, still nothing.

as for the second one, I need to output my JSON differently? how? is there a tutorial anywhere?

here is how I'm outputting my JSON at the moment:



$db = dbConnect();

$query = "SELECT DISTINCT rsTown FROM pubs";

$result = mysql_query($query) or die(mysql_error());


while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{

echo json_encode($row);

;}

venegal
01-27-2011, 12:41 PM
I think you misunderstand how the DOM ready handler works. It's not about what comes before and what after in your code, it's about what's inside and what's outside. Everything that's outside will be run immediately, no matter if it comes before or after. Everything inside will be delayed until the DOM is ready.

And you are supposed to use echo json_encode only once. If you echo a whole bunch of them, the result will not be valid JSON any more. If you really have to give several mysql rows back to your Javascript, put them all in one array before using json_encode.

jarv
01-27-2011, 12:56 PM
ok, I just tried to put it in an array:

php code now:



while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{

$json_data = array ('Town'=>$row['rsTown']);


}
echo json_encode($json_data);



and I echoed only once and still nothing?!

jarv
01-27-2011, 01:12 PM
can someone please help me?

I am now getting confused with Arrays and mysql_fetch_array

All I want to do it output a list of town in JSON format?!

venegal
01-27-2011, 01:23 PM
ok, I just tried to put it in an array:

php code now:



while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{

$json_data = array ('Town'=>$row['rsTown']);


}
echo json_encode($json_data);



and I echoed only once and still nothing?!

Now you're giving back only the last row, because you're overwriting $json_data on every run through the loop.
And if you manage to do it right, you will still have to change your client code, so it accepts the new format.
And for no good reason you've now changed the URL in your ajax call, so it returns 404.

This is not going to work out.

You're practically making me write the whole thing for you, post by post, line by line. Please do some research into the languages and tools you are working with, and most importantly learn how to debug your scripts using for example Firebug. It lets you analyze your AJAX responses, so you actually see why it's not working.

Please avoid trial and error. You have to know what you are doing, otherwise it will not work. If you don't feel comfortable with that approach, please consider hiring a professional.

If you have done your homework and still have problems, please feel free to come back and ask for help.

Or maybe someone else is feeling more charitable than me and will take you by the hand.

And don't bump your thread after just a few minutes. You should know that by now.

jarv
01-27-2011, 01:36 PM
ok,

I have researched all I can for what I am trying to do, basically, I need to connect to a mySQL database and output the records as JSON using JQuery.

I am very nearly there.... I have a list of towns output in JSON, now I need to use JQuery to connect to my php page to output my results.

I was aware that I changed the path to my php page so I changed so that it is pointing to the right place now

so, where I am now is I get:
Town : undefined
http://www.mypubspace.com/dashtest/json1.html


my only problem now is writing out the array in PHP so that I echo only once?

I am not trying to cause trouble here or bump my posts, I just really want this working, I have been trying for ages now, my first attempt was XML and httpRequest, but I recently discovered I can't use on cross domains?!

I now I have my php Array:


while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$json_data[] = array ('Town'=>$row['rsTown']);
}
echo json_encode($json_data);


and still my page doesn't work?!

jarv
01-27-2011, 02:51 PM
Please can someone help me???

jarv
01-27-2011, 08:42 PM
does anyone know why I am getting Undefined?