Lade JSON-Daten mit jQuery, PHP und MySQL für Radio-Buttons.

Question

Ich versuche, ein drittes Set von Optionsfeldern hinzuzufügen, um das folgende Skript zu ergänzen: http://www.electrictoolbox.com/json-data-jquery-php-radio-buttons/

Aus irgendeinem Grund gelingt es mir nicht, das dritte Set mit den entsprechenden Daten zu füllen. Es bleibt einfach leer :(

Der Aufruf der Funktion populateFruittype() gibt nur [ ] zurück, während populateFruitVariety() die JSON-Daten korrekt zurückgibt.

getdata.php (DB-Verbindung / Abrufen von Daten)

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

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

echo json_encode($rows);

?>

HTML

    Toevoegen

        function populateFruitVariety() {

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

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

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

            });

        }

        function populateFruittype() {

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

            $.getJSON('getdata.php', {fruitVariety: fruitVariety}, function(fruit) {

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

            });

        }

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

        $(function() {
            $('input[name=fruitVariety]').change(function() {
                populateFruittype();
            });
        });

        Obst:
        Apfel
        Banane
        Orange
        Birne

        Sorte:

        Typ:

Die DB-Abfrage und der Inhalt können hier gefunden werden: http://www.electrictoolbox.com/mysql-example-table/

Fügen Sie einfach hinzu:

`fruittype` varchar(50) NOT NULL

und füllen Sie es mit benutzerdefinierten Werten.

Answer 1

1) DB-Update

ALTER TABLE fruit ADD COLUMN `fruittype` varchar(50) NOT NULL;
UPDATE fruit SET fruittype = 'description' /* WHERE name = 'Apple'*/;

2) Code-Update

    Hinzufügen

    $(document).ready(function() {
        $('input[name=fruitName]').change(function() {
            var fruitName = $('input[name=fruitName]:checked').val();
            $.getJSON('test.php', {fruitName: fruitName}, function(fruit) {
                var html = '';
                $.each(fruit, function(index, array) {
                    html = html + '<input type="radio" name="fruitVariety" value="' + array['variety'] + '" /><label>' + array['variety'] + '</label> ';
                });
                $('#varieties').html(html);
            });
        });
        $('input[name=fruitVariety]').live('click', function() {
        var fruitVariety = $('input[name=fruitVariety]:checked').val();
            $.getJSON('test.php', {fruitVariety: fruitVariety}, function(fruit) {
            var html = '';
                $.each(fruit, function(index, array) {
                html = html + '<input type="radio" name="fruitType" value="' + array['fruittype'] + '" /><label>' + array['fruittype'] + '</label> ';
                });
            $('#fruittype').html(html);
            });
        });
    });

        Frucht:
        Apple
        Banana
        Orange
        Pear

        Sorte:

        Typ: