CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
Hige Mynx
Hige Mynx

Reputation: 151

Populate HTML Select Field with JSON data queried from MySQL Database with jQuery and PHP

I'm trying to Populate Database Values to an HTML Dropdown Select Field with jQuery. I found a pretty good example I think if this is the way to go. I'm pretty new to jQuery and JavaScript.

Basically, I'm trying the same as the guy here: https://www.electrictoolbox.com/json-data-jquery-php-mysql/ but it is different though.

To keep it on this example, I just need the "Variety" Dropdown, no "Fruit" dropdown. I want to SELECT savename FROM pdfform; on page load and display the results in the "Lade Datensatz" HTML Dropdown.

Picture

But all that is Happening is that I get an empty Dropdown like the jQuery isn't executing at all. If I call the data.php directly I get JSON Data:

Picture

index.html including JavaScript jQuery:

<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="bg-light" data-spy="scroll" data-target=".navbar" data-offset="50">
    <div class="container">
        <div class="row">
            <div class="col-md-12 mb-3">
                <form id="LoadForm" name="LoadForm">
                    <h5 class="text-center">Lade Datensatz</h5>
                    <label for="load"></label>
                    <select class="custom-select d-block w-100" id="load" name="load">
                    </select>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        // 1st Try
        // function populatedata() {
        // console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             var select = $('#load');
        //             var options = select.prop('options');
        //             $('option', select).remove();
        //             $.each(data, function(index, array) {
        //                 options[options.length] = new Option(array['savename']);
        //             });
        //         });
        // }

        // 2nd Try
        // function populatedata() {
        //     console.log("populatedata Executed!");
        //     $.getJSON('/data.php',
        //         function(data) {
        //             console.log(data);
        //         });
        // }

        // 3rd Try
        function populatedata() {
            console.log("populatedata Executed!");
            $.getJSON('/data.php');
        }

        // Good for all Trys
        $(document).ready(function() {
            populatedata();
            $('#load').change(function() {
                populatedata();
            });
            $('#load').click(function() {
                populatedata();
            });
        });
    </script>
</body>

</html>

My data.php:

<?php
    header('Content-Type: text/html; charset=utf-8');
    $dsn = "mysql:host=192.168.17.61;dbname=mvt_test";
    $username = "mvt_test";
    $password = "wqiM7n4POSW1jpJLPM3u2";

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

    $rows = array();

    $stmt = $pdo->prepare("SELECT savename FROM pdfform");
    // $stmt = $pdo->prepare("SELECT savename FROM pdfform WHERE name = ? ORDER BY savename");
    // $stmt->execute(array($_GET['savename']));
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($rows);
?>

Console Log: Picture

Upvotes: 2

Views: 1204

Answers (1)

abvlle
abvlle

Reputation: 138

I did not pay attention to the jquery you called until you edited your post and add the console log, you're calling the Slim version of jquery which excludes ajax. Check this : JQuery issue "TypeError: $.getJSON is not a function"

You should take a closer look to your console, the error is very clear : $.getJSON is not a function, you have to call the full version of jquery!

Upvotes: 1

Related Questions