json_encode doesnt respond for getJson

Question

I have an html page that would send json request to get the data from a server [though php-mysql]. I see that the response is not being received. I tried debugging through fiddler and could see that "The response does not contain valid json text.

My code is below

html

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-latest.js" 
        type="text/javascript">
</script>

<script type="text/javascript">
function populateFruitVariety() {

    $.getJSON('serverside.php', 
               {fruitName:$('#fruitName').val()}, 
               function(data)  {

    var select = $('#fruitVariety');

    if(select.prop) {
        var options = select.attr('options');
    } else {
        var options = select.attr('options');
    }

    $('option', select).remove();

    $.each(data, function(val, text) {
        options[options.length] = new Option(text, val);
    });
    });
}

$(document).ready(function() {
    populateFruitVariety();
    $('#fruitName').change(function() {
        populateFruitVariety();
    });
});

</script>

<form>
    Fruit:
    <select name="name" id="fruitName">
        <option>Apple</option>
        <option>Banana</option>
        <option>Orange</option>
        <option>Pear</option>
    </select>
    Variety:
    <select name="variety" id="fruitVariety">
    </select>
</form>
</html>

serverside.php

<?php
header('Content-type: application/json');

$host="localhost";
$username="root";
$password="";
$database="db_common";
$table_fruit_info = "fruit_info";
$tc_fruit_id = "fruit_id";
$tc_fruit_index = 'fruit_index';

$con = mysql_connect("$host", "$username", "$password") 
       or die(mysql_error());
mysql_select_db("$database") or die(mysql_error());

if(isset($_GET['fruitName'])) {
    $fruit_id = $_GET['fruitName'];
    $result = mysql_query("SELECT * FROM $table_fruit_info
                WHERE $tc_fruit_id='$fruit_id'");
    while($rows = mysql_fetch_array($result))
    {
        $ret_fruitIndex = $rows[$tc_fruit_index];
    }
}
echo json_encode($ret_fruitIndex);
?>

Thanks for your help!

you should use [mysqli](http://php.net/manual/en/book.mysqli.php). mysql is no longer supported — Mark Meyer, Dec 28 '12 at 20:18
I don't understand the `if` statement in your JS. It sets `options` to the same thing in both branches. — Barmar, Dec 28 '12 at 20:46
**WARNING!** Your code contains an [SQL injection vulnerability](http://en.wikipedia.org/wiki/SQL_injection) -- you are passing raw, unfiltered, unvalidated user input directly into an SQL string. SQL injection is [very easy to fix](http://stackoverflow.com/q/60174/168868). Consider [switching to PDO](http://php.net/book.pdo) or [mysqli](http://php.net/book.mysqli) so you can use [prepared statements with parameterized queries](http://en.wikipedia.org/wiki/Prepared_statement). — Charles, Dec 28 '12 at 21:01

Mike Brant · Accepted Answer · 2012-12-28T21:23:14.813

It looks like $ret_fruitIndex is just a string, which dosn't have an appropirate JSON representative. In your while loop, you are overwriting the value for this variable with each pass, which I assume is not what you are wanting to do.

I assume you really want to so something like:

$ret_fruitIndex[] = $rows[$tc_fruit_index];

As an side you code is very vulnerable to SQL injection and you also should not be using teh mysql_* functions which are deprecated. I would suggest using mysqli_* functions, PDO, or something more modern and secure.

With regards to your jQuery: I am not sure what you are doing here:

if(select.prop) {
    var options = select.attr('options');
} else {
    var options = select.attr('options');
}

As there is not any difference in cases there.

I also believe your each() function is wrong. The parameters passed to the callback function will be the index value of data and the value for that index.

You logic should be to remove all options, than add new options based on data, so I don;t know why the options variable has any involvement in this callback function at all.

Thanks a million. I made $ret_fruitIndex[] and could see that json response comes to the html page [verified through alert(data)]. But the select option doesnt get filled with the data returned. Any problem in my javascript/jquery? — Jithu, Dec 28 '12 at 20:33

score 1 · Answer 2 · answered Dec 28 '12 at 20:27

1

You need an array of fruitnames, so replace $ret_fruitIndex = $rows[$tc_fruit_index];

with $ret_fruitIndex[] = $rows[$tc_fruit_index];

answered Dec 28 '12 at 20:27

joyce

11
1

Thanks joyce, I made $ret_fruitIndex[] and could see that json response comes to the html page [verified through alert(data)]. But the select option doesnt get filled with the data returned. Do you see any problem in my javascript/jquery? – Jithu Dec 28 '12 at 20:36

Barmar · Answer 3 · 2012-12-28T20:57:10.987

0

After fixing your PHP, change the JS callback to:

function(data)  {

    var select = $('#fruitVariety');

    select.empty();

    $.each(data, function(val, text) {
        select.append($('option', {value: val}).text(text));
    });

});

options is not a reference to the array in the DOM, it's a jQuery object, so adding to it doesn't update the DOM.

edited Dec 28 '12 at 20:57

answered Dec 28 '12 at 20:49

Barmar

741,623
53
500
612

json_encode doesnt respond for getJson

html

serverside.php

3 Answers3