Hello guys,

Please am having some difficulty in getting encoded json array into the input field in jquery.

I used

$("input#no".val(data.result['no']);
$("input#no".html(data.result['no']);
$("input#no".text(data.result['no']);

to no avail.

Looking at the pictures below, i used firebug to step in through the code to no avail.

Please kindly look at the picture below and please make suggestions.

thanks

Please paste the code from
success: function(){ ... }
This will enable me to understand how you came about data.result['no'].

Adesege:
Please paste the code from

success: function(){
...
}

This will enable me to understand how you came about data.result['no'].

Ok do you mean the php or jquery? well if i understand your statement, here it is again

Paste and not screenshot.

uvalued:


Ok do you mean the php or jquery? well if i understand your statement, here it is again

Try parsing the data with JSON.parse();

Adesege:
Paste and not screenshot.

ok

$(document).ready(function () {
    $('#no').keyup(function () { //keyup event responds
        var loc = $('#no').val();

        $.ajax({ 
            dataType: "json",
            url: "/php/barry.php",
            data: ({
                loc: loc
            }),
            async: false,
            type: "GET",
            contentType: "application/json; charset=utf-8",
             success: function (data) {
			
                $.each(data.result, function () {
                    $("input#no".val(data.result['no']);  
                    $("input#name".val(data.result['name']);
		      });
            
			
			
			
			//this is end of success
			}
        });
    });
});

PHP

<?php
include_once('/db.php');
if(isset($_GET['loc'])){

$fille = $_GET['loc'];
 //echo "this is $fille";
 //exit;

//$fille = '0000';
$sql = "SELECT * FROM barry where no='$fille'";
$res = mysql_query($sql);
$result = array();
while( $row = mysql_fetch_array($res) )
array_push($result, array('no' => $row[0],
							'name'=> $row[1]
							)
							);
							//print_r($result);
							echo json_encode(array("result" => $result));
}

Thanks

JackOfAllTrades:
Try parsing the data with JSON.parse();

thanks for the suggestion, but i have already set the dataType:"json" which will parse it. Tried it anyway and it gave me null when i alerted it.

uvalued:

thanks for the suggestion, but i have already set the dataType:"json" which will parse it. Tried it anyway and it gave me null when i alerted it.

it gives you null because your php script is not outputting anything, you need to add this in the php after the while loop

print_r( json_encode($result) );

Setting data type to json in JQuery doesn't automatically parse it to json unless you set the MIME response of the server to application/json
Then the JQuery success callback will return a JavaScript object
Add this line in the beginning of your php script to set mime of the php script
header('Content-type: application/json');

I think firebug is printing the json string instead of the object and that's why you should parse it

IMHO, you've taken it too far. In your php, edit the sql statement. Instead of selecting all the columns in the table, be specific. I.e SELECT no, name FROM your_table blah blah.

The while loop will not be neccessary if the column type for no is unique. But in this case, i'll assume it's not unique.

While you are fetching, replace the statement inside the while loop with

$data[]=array_map('utf8_encode', $row);

Close the while loop. Replace your json_encode echo statement with

echo json_encode($data);

Having done this, save the page and visit the page on your browser, start typing something into the input form. Check your console, and you should see something like

{{ ...some data }}

Don't worry if you don't see that. I just realized there are alot of bug in your code. But i'll address that at the end of this.

Assume you saw the {{ ...some data }}, this implies that the json is nested. This is so because of the $data[]=...

In your Jquery, starting from the each control structure, delete everything till the last closing braces.

To access your values, you'll type

$('input#no".val(data[0].no);

$('input#name".val(data[0].name);

So this is everything in one.

$(document).ready(function () {
$('#no').keyup(function () { //keyup event responds
var loc = $('#no').val();
var dat='loc='+loc;
$.ajax({
dataType: "JSON",
url: "/php/barry.php",
data: dat,
async: false,
global:false,
type: "POST",
success: function (data) {
$("input#no".val(data[0].no);
$("input#name".val(data[0].name);
//this is end of success
},
error: function(xhr,ajaxOptions, thrownError){
alert(xhr.status+" "+thrownError);
}
});
});
});

PHP

<?php
include_once('/db.php');
if(isset($_POST['loc'])){
$fille = $_POST['loc'];
//echo "this is $fille";
//exit;
//$fille = '0000';
$sql = "SELECT no,name FROM barry where no='$fille'";
$res = mysql_query($sql);
while( $row = mysql_fetch_array($res) ){
$data[]=array_map('utf8_encode', $row);
}
//print_r($data);
echo json_encode($data);
}
?>

Endeavour to validate user input please.

Let me know if it helps

uvalued:

.

JackOfAllTrades:
it gives you null because your php script is not outputting anything, you need to add this in the php after the while loop

print_r( json_encode($result) );

i did it and this is the result [First Image]

JackOfAllTrades:

Setting data type to json in JQuery doesn't automatically parse it to json unless you set the MIME response of the server to application/json
Then the JQuery success callback will return a JavaScript object
Add this line in the beginning of your php script to set mime of the php script
header('Content-type: application/json');

I think firebug is printing the json string instead of the object and that's why you should parse it

I did add the header and it gave the [first image] below. On the firebug, look at the Second image, it shows the array has been captured after success: (function). However it still did not send it to the input field [no and name].

Adesege:
IMHO, you've taken it too far. In your php, edit the sql statement. Instead of selecting all the columns in the table, be specific. I.e SELECT no, name FROM your_table blah blah.

The while loop will not be neccessary if the column type for no is unique. But in this case, i'll assume it's not unique.

While you are fetching, replace the statement inside the while loop with

$data[]=array_map('utf8_encode', $row);

Close the while loop. Replace your json_encode echo statement with

echo json_encode($data);

Having done this, save the page and visit the page on your browser, start typing something into the input form. Check your console, and you should see something like

{{ ...some data }}

Don't worry if you don't see that. I just realized there are alot of bug in your code. But i'll address that at the end of this.

Assume you saw the {{ ...some data }}, this implies that the json is nested. This is so because of the $data[]=...

In your Jquery, starting from the each control structure, delete everything till the last closing braces.

To access your values, you'll type

$('input#no".val(data[0].no);

$('input#name".val(data[0].name);

So this is everything in one.

$(document).ready(function () {
$('#no').keyup(function () { //keyup event responds
var loc = $('#no').val();
var dat='loc='+loc;
$.ajax({
dataType: "JSON",
url: "/php/barry.php",
data: dat,
async: false,
global:false,
type: "POST",
success: function (data) {
$("input#no".val(data[0].no);
$("input#name".val(data[0].name);
//this is end of success
},
error: function(xhr,ajaxOptions, thrownError){
alert(xhr.status+" "+thrownError);
}
});
});
});

PHP

<?php
include_once('/db.php');
if(isset($_POST['loc'])){
$fille = $_POST['loc'];
//echo "this is $fille";
//exit;
//$fille = '0000';
$sql = "SELECT no,name FROM barry where no='$fille'";
$res = mysql_query($sql);
while( $row = mysql_fetch_array($res) ){
$data[]=array_map('utf8_encode', $row);
}
//print_r($data);
echo json_encode($data);
}
?>

Endeavour to validate user input please.

Let me know if it helps

PHP
Yes it did help as i was able to do some correction. However, on running the php code you posted separately, it gave this result of the encoded array [First Image).

AJAX
After success:function, it did not display any argument as you can see from the second image.

Running previous AJAX after modifying it according to your suggestions, i discovered that the arguments [json array] from PHP was showing the values. Third image . But still it did not transfer the result into the INPUT fields on the main page.

Thanks for your suggestion.

@op i just tested your code it appears if you remove the dataType and ContentType options it runs fine

Datatype is needed.

JackOfAllTrades:
@op i just tested your code it appears if you remove the dataType and ContentType options it runs fine

Gotcha! I'll advice you use the php code i gave you instead of yours cos from the var_dump of your php code, you'll agree with me that your json decoded array is three steps deep. Though, that doesn't pose a problem, but it's advisable.

The problem why it's not showing in your input form is cos of your selector.

Try something like

$('input[id="no"]').val(...);

or

$('#no').val(...);

You can check the jQuery documentation for list of selectors. There are a bunch of them.

Peace!

Adesege:
Datatype is needed.

JQuery always perform intelligent guess in ajax response once the server set it to application/json it will return a JavaScript object other wise it will return a string of the response, so data type can be optional

That's true but from the php code over there, you'll agree me that there is no header to force php to render it in json. That's the php json header.

So it's advisable he leaves it as it is.

JackOfAllTrades:

JQuery always perform intelligent guess in ajax response once the server set it to application/json it will return a JavaScript object other wise it will return a string of the response, so data type can be optional

Thanks guys i did as you recommended and voila its running great.


thank you all for your quick and wise response.

Its most appreciated.

So what did you do differently?

Please post what worked and went wrong for future reference

uvalued:
Thanks guys i did as you recommended and voila its running great.


thank you all for your quick and wise response.

Its most appreciated.

Sure guys.

this is what i did different from my earlier mistake

 
                 document.getElementById(no).value = data.result[0].no;
		document.getElementById(name).value = data.result[0].name;
							    

this worked the magic