JSON Problem

[12many]

Hi There

Im trying to create a little dialog where a net user can select a previous destination for a trip request.

Ive got a bit stuck working with the JSON
This is my entire class, I have used someone else's work to help me with get the visual box up.

The problem i think that i have is on the build_PastDestinations() function, Its doesn't seem to get past the starting $(function() and moves straight to the end of the function
it never seems get to here 'tablebody += "<tr><td>" + destination.Address + "</td></tr>";' before the the box appears.

The Json Looks like this [{"Address":"address1"},{"Address":"address2"}]

var winaddpick;
var AddPick;
var ExAddress;
var PickerSpanId = "PickerBoarder";
var apLeft = 0;
var apTop = 0;
var apWidth = 600;
var xpos = 0;
var ypos = 0;
var apHeight = 0;
var apPosOffsetX = -200; //X position offset relative to calendar icon, can be negative value
var apPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value

//Add Picker Prototype
function build_PastDestinations(){
	var tablebody = "<tbody>\n";
	$(function(){
		$.getJSON("phpscripts/getpastdestinations.php",function(data){
			var destination="";
			$.each(data,function(index,destination){
				tablebody += "<tr><td>" + destination.Address + "</td></tr>\n";
			});
		});
	});
	tablebody += "</tbody>\n"
	return tablebody;
}

function show_addpicker()
{
	var myaddresss = new Array();
	myaddresss[0] = "address 1";
	myaddresss[1] = "address 2";
	myaddresss[2] = "address 3";
	var PickerData = "<Span style='cursor:auto;'>";
	var vPickerHeader = "<Table Style='width:500px;padding:0;margin:5px auto 5px auto;text-align:center;'>/n<thead><tr><th>Previous Destinations</th></tr></thead>\n";
	
	var PickerBody = build_PastDestinations(); //"<tbody>\n";
	// var length = myaddresss.length;
	// for (var i = 0; i < length; i++) 
	// {
		// PickerBody += "<tr><td>" + myaddresss[i] + "</td></tr>\n"; 
	// }
	var PickerCloser = "\n<tr>\n<td colspan='7' style=\"text-align:right;\">";
	PickerCloser += "<img onmousedown='javascript:close_win();' src='javascripts/dtp/images2/cal_close.gif'>";
	PickerCloser + "</td></tr>\n</tbody>\n</table>\n</span>";
	apHeight = 400;
	if (ypos > apHeight)
	{
		ypos = ypos - calHeight;
	}
	if (!winaddpick)
	{
		span = document.createElement("span");
		span.id = PickerSpanId;
		span.style.position = "absolute";
		span.style.left = (xpos + apPosOffsetX) + 'px';
		span.style.top = (ypos - apPosOffsetY) + 'px';
		span.style.width = apWidth + 'px';
		span.style.border = "solid 1pt #000000";
		span.style.padding = "0";
		span.style.backgroundColor = "#ffffff";
		span.style.zIndex = 100;
		document.body.appendChild(span);
		winaddpick = document.getElementById(PickerSpanId);
	}
	else
	{
		winaddpick.style.visibility = "visible";
		winaddpick.style.Height = apHeight;
		
	}
	winaddpick.innerHTML = PickerData + vPickerHeader + PickerBody + PickerCloser;
	return true;
}
function close_win()
{
	winaddpick.style.visibility = 'hidden';
}
function get_mPos(evt)
{
	var objectID,
	dom,
	de,
	b;
	
	if (document.addEventListener)
	{ // w3c
		objectID = evt.target.id;
		if (objectID.indexOf(PickerSpanId) !== -1)
		{
			dom = document.getElementById(objectID);
			cnLeft = evt.pageX;
			cnTop = evt.pageY;

			if (dom.offsetLeft)
			{
				cnLeft = (cnLeft - dom.offsetLeft);
				cnTop = (cnTop - dom.offsetTop);
			}
		}
		xpos = (evt.pageX);
		ypos = (evt.pageY);
	}
	else
	{
		de = document.documentElement;
		b = document.body;
		xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
		ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
	}
}

document.onmousedown = get_mPos;

Id be quite happy to convert the JSON to an array first if that help. I can tell by using firebug that it is calling the PHP file and getting a response but nothing seems to happen with it

Hope some one can help

IAN

[szlamany]

Did you set a breakpoint in the function? FB will not step into that function, afaik...

Does FIREBUG show the POST under the CONSOLE tab - so you can see the response?

[12many]

Hi szlamany

Thanks for the reply

In the FB Console its shows as a "GET http://address.php"

and the response is this this
[{"Address":"address1"},{"Address":"address2"}]

I have been trying it with this

{"results":[{"Address":"address1"},{"Address":"address2"}]}

but that won't work either.

I think that with FB you have to have a breakpoint at the address of the function that you are calling,(Which in JQUERY i have found a bit of a pain)

Any way thanks again for any help

IAN

[szlamany]

You should set a break at every single line so that you can see how far into that EACH function it's getting.

Also - change this

var destination="";

to this:

var destination={};

[edit] Oddly it's an array of objects... [/edit]

[12many]

Hi Hi szlamany

When i get to here in jQuery the call back is undefined. Does it matter that im using this function with no data??

getJSON: function( url, data, callback ) {
return jQuery.get( url, data, callback, "json" );
}

Ian

[szlamany]

With the callback undefined does it actually "return" data right at that moment? I do not use getJSON - and I do like to use callbacks myself...

What do you mean "with no data"?

[12many]

when i have used this function before i have used it like this
$.getJSON("phpscripts/getpastdestinations.php",{"var1":"something"},function(data){
}
but i have found a few example where there is no data, And my php script does not require any data

[szlamany]

Oh - sorry - then you must change this

$.getJSON("phpscripts/getpastdestinations.php",function(data){

to

$.getJSON("phpscripts/getpastdestinations.php",{},function(data){

You must respect the arguments - and pass an empty object for data.

The "function" is the callback - that's loaded up in a kind of closure-space that javascript has.

[12many]

its really wierd.

it fails but once it had already display the box it seems to have another go and then it succeeds But obviously its too late then

scratch that god knows whys thats happening,

[12many]

Hi There

function done( status, nativeStatusText, responses, headers ) When i get to here in jquery none of it has been defined only status where = ""

not sure if this helps.

Ian

[szlamany]

It's an async call - kind of ugly to be breaking while it's delivering the response.

Have you used the getJson successfully elsewhere??

This link

http://api.jquery.com/jQuery.getJSON/

says you can call it with two parameters and leave off the "data" - it must check the type of parameter to figure out how to handle it.

If you look at that link - at the first code example using getJson - I would set a break point at this line

var items = [];

and see if data is filled.

That would be a break point for you at

var destination="";

Can you do that and tell me if data is filled?

If it is not filled - and you see in the console tab that it's returning your data for real - then you are not debugging the correct firing of the call back.

Have you used call back functions a lot?

btw - if you are not changing data on the "server" you should use a POST - and not a GET - afaik.

[12many]

sadly im fairlly new to it all, This is pretty much my first proper website, and ive had pretty much no training. im afraid that i haven't used call back functions a lot?

I set a break point at that line and it never got hit!!!

How can i change to a POST?

Ian