How to display Json Data as variable

[jpknoob]

Evening, I am trying to grab information from a PHP script using JQuery when the user enters a value into a text input field. The text input box has an auto suggest function so that when the user begins tying they can see what matches from the database.
If the user selects one of the options, JQuery's .change() function then uses AJAX to fetch the data from the database and return the values as JSON.
How do I display the JSON information in a format so that i can use it throughout the rest of the page, i.e. populate form fields?

Here is my jQuery/AJAX;

$(document).ready(function()	{

$('#kinaseEntry').change(function ()	{

$('#waiting').show(500);
$('#message').hide(0);
alert("We have a change");

$.ajax({
type : 'POST',
url : 'post.php',
datatype: 'json',
data:	{
	kinaseEntry : $('#kinaseEntry').val()
},
success : function(data)	{
//SUCCESS CODE IN HERE
},
error : function(error)	{
	alert("Oops, there was an error!");
}
});
return false;
});
});

and the php script;

<?php
//Include connection to databse
require_once 'connect.php';

if (isset($_POST['userInput']))	{

	$input = mysql_real_escape_string ($_POST["userInput"]);
	
	$findInput = "SELECT * FROM table where item = '" .$input. "' ";
	
	if ($result = mysql_query($findInput))	{
	
		$row = mysql_fetch_array($result);
		
		$item1 = $row['item1'];
		$item2 = $row['item2'];
		$item3 = $row['item3'];
		$item4 = $row['item4'];
		$item5 = $row['item5'];
		
		
		/* JSON ROW */
		$json = array ("item1" => $item1, "item2" => $item2, "item3" => $item3, "item4" => $item4, "item5" => $item5, ...etc);
		
	} else	{
	
		/* CATCH ANY ERRORS */
		$json = array('error' => 'Mysql Query Error');
	}
	
	/* SEND AS JSON */
	header("Content-Type: application/json", true);
	
	/* RETURN JSON */
	echo json_encode($json);
	
	/* STOP SCRIPT */
	exit;
}
?>

[minitauros]

Is there a specific need to show it as JSON? Also, if you want to display it as HTML output, why not just make your headers output it as HTML?

[jpknoob]

have updated my ajaxSubmit, but cannot seem to get a result back

$(document).ready(function()	{

$('#kinaseEntry').change(function ()	{

var kinaseEntry = $("#kinaseEntry").val();
var dataString = 'kinaseEntry' + kinaseEntry;

$('#waiting').show(500);
$('#message').hide(0);
alert(kinaseEntry);

//Fetch list from database
$.ajax({
type : 'POST',
url : 'post.php',
datatype: 'json',
data: dataString,
success : function(datas)	{
//Put list into Div
	myDivList = datas.result;
	$('#message').html(myDivList.join())
},
error : function(error)	{
	alert("Oops, there was an error!");
}
});
return false;
});
});

When I run the debugger, I get an error saying "throw Components.Exception("prompt aborted by user", Cr.NS_ERROR_NOT_AVAILABLE)".

Can anyone help?

[jpknoob]

Thanks for the reply minitauros. When the AJAX call is made, the data has to be in JSON/JSONP format, just a spec.

[minitauros]

If you put

alert('datas: ' + datas);

(or console.log, whatever you like) in your AJAX' success: ... part, does it output the correct data?

[jpknoob]

I get a crazy error message
"uncaught exception: [Exception... "prompt aborted by user" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: resource:///components/nsPrompter.js :: openTabPrompt :: line 462" data: no]"

If i run the php script by itself, i get a list of the expected output.

[ko ko]

datatype: 'json', should be dataType