CODEWITHSUNDEEP
phpjquerymysqlajaxjson
Jroen
Jroen

Reputation: 472

Can't retrieve get JSON values with Jquery

I'm doing something wrong, but I can't seem to figure out what it is.

The $.getJSON line should retrieve the data via an AJAX request, passing it the currently selected fruit name. The data is then looped through (it's an array containing the index 'variety' containing the fruit variety name) and added to an html string, which is then finally injected by Jquery into the web page's #varieties span replacing what was previously there.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Toevoegen</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

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

            var fruitName = $('input[name=fruitName]:checked').val();

            $.getJSON('func.php', {fruitName: fruitName}, function(fruit) {

                var html = '';
                $.each(fruit[fruitName], function(index, array) {
                    html = html + '<label><input type="radio" name="variety" value="' + array['variety'] + '" />' + array['variety'] + '</label> ';
                });
                $('#varieties').html(html);

            });

        }



        populateFruitVariety();
        $('input[name=fruitName]').change(function() {
            populateFruitVariety();
        });

    </script>

</head>
<body>

<form>

    <div>
        <strong>Fruit:</strong>
        <label><input type="radio" name="fruitName" value="Apple" checked="checked" />Apple</label>
        <label><input type="radio" name="fruitName" value="Banana" />Banana</label>
        <label><input type="radio" name="fruitName" value="Orange" />Orange</label>
        <label><input type="radio" name="fruitName" value="Pear" />Pear</label>
    </div>
    <div>
        <strong>Variety:</strong>
        <span id="varieties"></span>
    </div>
    <div>
        <strong>Type:</strong>
        <span id="type"></span>
    </div>
</form>

FUNC.PHP

<?php
$dsn = "mysql:host=localhost;dbname=dbname";
$username = "user";
$password = "pass";



$pdo = new PDO($dsn, $username, $password);


$rows = array();
if(isset($_GET['fruitName'])) {
    $stmt = $pdo->prepare("SELECT DISTINCT variety FROM fruit WHERE name = ? ORDER BY variety");
    $stmt->execute(array($_GET['fruitName']));
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

}

echo json_encode($rows);

?>

For some reason, this is not working properly because Jquery won't pick up the json values as I can see from the console.

When changing the last piece of jquery code into: 

$(function() {
            populateFruitVariety();
            $('input[name=fruitName]').change(function() {
                populateFruitVariety();
            });
        });

The values will be retrieved in the console, but not shown as radioboxes. There's still an error in the console though. (a is undefined)

Upvotes: 1

Views: 462

Answers (2)

Kim &#39;Emax&#39; Stegenborg Madsen
Kim &#39;Emax&#39; Stegenborg Madsen

Reputation: 1

Note to everyone using these tutorials, they are old! and using jQuery 1.4.2 - I just spend more than a day trying to make a simple selectbox work (http://www.electrictoolbox.com/json-data-jquery-php-mysql/, new Option() doesn't seem to work in 1.7.2), didn't work with jQuery 1.7.2, when I switched to jQuery 1.4.2 it worked rightaway.

In the above example jroen is using jQuery 1.6.1, that might be the issue.

Upvotes: 0

ipr101
ipr101

Reputation: 24236

I'm unable to test this but if you change -

$.each(fruit[fruitName], function(index, array) {

to 

$.each(fruit, function(index, array) {

does it work?

Upvotes: 2

Related Questions