JS / PHP-根据先前的选择自动填充选择字段

Question

SO I have 3 select fields and I would like to populate the #2 and #3 based on the selected value in #1.

JS is picking up on the field change in #1, submits it successfully to my PHP script, but there I receive an "Array to string conversion" error when inserting the $_POST['problem'] variable into my query to get the related results.

I did try json_encode and made sure the original selected value in the first select field (select id="problem") is an array, hence do not understand where the conversion error comes from.

ERROR:

<b>Notice</b>:  Array to string conversion in <b>Z:\xampp\htdocs\qcisource\ihg\ajax.php</b> on line <b>17</b><br />
{"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null} 

Any suggestions?

HTML

        <p>Problem Experienced</p>
        <!-- Problem -->
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-warning"></i></span>
            <select id="problem" name="problem" class="form-control select2" multiple="multiple" data-placeholder="Select a Problem">
                <option value=""> </option>
                <?php

                // define query
                $sql = "SELECT Issue, Description FROM qci_problems_index_new ORDER BY Issue";

                // query
                $result = $mysqli->query($sql) or die('<p>Query to get Issue from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

                while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $problem = $row['Issue'];
                    $desc = $row['Description'];
                    echo "<option value=\"$problem\" data-desc=\"$desc\">" . $problem . "</option>\n";
                }

                $result->free();
                ?>

            </select>
        </div>

        <p>Problem Category</p>
        <!-- Problem Category -->
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-warning"></i></span>
            <select id="problem_category" name="problem_category" class="form-control select2" multiple="multiple" data-placeholder="Select a Problem Category">
                <option value=""> </option>
                <?php

                // define basic query
                $sql = "SELECT DISTINCT Category FROM qci_problems_index_new ORDER BY Category";

                // query
                $result = $mysqli->query($sql) or die('<p>Query to get Category data from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

                while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $category = $row["Category"];
                    echo "<option value=\"$category\">" . $category . "</option>\n";
                }

                $result->free();
                ?>
            </select>
        </div>

        <p>Department Responsible</p>
        <!-- Department Responsible -->
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-bars"></i></span>
            <select id="department" name="department" class="form-control select2" multiple="multiple" data-placeholder="Select a Department">
                <option value=""> </option>
                <?php

                // define basic query
                $sql = "SELECT DISTINCT Department_Responsible FROM qci_problems_index_new ORDER BY Department_Responsible";

                // query
                $result = $mysqli->query($sql) or die('<p>Query to get department_responsible from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

                while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
                    $dept = $row["Department_Responsible"];
                    echo "<option value=\"$dept\">" . $dept . "</option>\n";
                }

                $result->free();
                ?>
            </select>
        </div>

JS

<script type="text/javascript" language="javascript"> 
$(function () {
    $('#problem').change(function () {
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: {
                problem: $(this).val()
            },
            dataType: 'json',
            success: function (data)
            {
                var Category = data[0]; 
                var Department_Responsible = data[1];
                $('#problem_category').val(Category);
                $('#department').val(Department_Responsible);
            }
        });
    });  
});  
</script>

ajax.php

<?php

if(isset($_POST['problem'])) {

    // Start MySQLi connection
    include './plugins/MySQL/connect_db.php';
    $db = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

    // display error if connection cannot be established
    if($db->connect_errno > 0){
    die('Unable to connect to database [' . $mysqli->connect_error . ']'); }

    // sanitize variables
    $problem = $_POST['problem'];  //mysqli_real_escape throws error, ignore for now

    // run query
    $result = $db->query("SELECT Category, Department_Responsible FROM qci_problems_index_new WHERE Issue= '".$problem."'");

    // return data as array
    $array = mysqli_fetch_array($result);
    echo json_encode($result);

}
?>

Answer 1

Fixed it myself...
Apart from some minor mistakes with the JavaScript, the main problem was that I am using the Jquery Select2 plugin which doesn't handle AJAX in the same way that regular <select> fields do. I had to manually trigger('change') on all my fields to get the AJAX value displayed.

Javascript

<script type="text/javascript" language="javascript"> 
$(function () {
    $('#problem').change(function () {
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: 'problem=' + $(this).val(),
            dataType: 'json',
            success: function (data)
            {
            var data0 = data[0]; 
            var data1 = data[1];
            $('#problem_category').val(data0);
            $('#department').val(data1);

            $('#problem_category').trigger('change');
            $('#department').trigger('change'); 
            }
        });
    });  

});  
</script>

Ajax.php

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

if(isset($_POST['problem'])) {

    // Start MySQLi connection
    include '../../plugins/MySQL/connect_db.php';
    $db = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

    // display error if connection cannot be established
    if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']'); }

    // run query
    $sql = "SELECT Category, Department_Responsible FROM qci_problems_index_new WHERE Issue= '".$_POST['problem']."'";
    $result = $db->query($sql) or die(mysqli_error());

    // return data as array
    $array = mysqli_fetch_array($result);
    echo json_encode($array);
}
?>

HTML:

    <p>Problem Experienced</p>
<!-- Problem -->
<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-warning"></i></span>
    <select id="problem" name="problem" class="form-control select2" data-placeholder="Select a Problem" style="width: 100%;">
        <option value=""> </option>
        <?php

        // define query
        $sql = "SELECT Issue, Description FROM qci_problems_index_new ORDER BY Issue";

        // query
        $result = $mysqli->query($sql) or die('<p>Query to get Issue from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

        while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
            $problem = $row['Issue'];
            $desc = $row['Description'];
            echo "<option value=\"$problem\" data-desc=\"$desc\">" . $problem . "</option>\n";
        }

        $result->free();
        ?>

    </select>
</div>
<p class="help-block" width="100%"><div id="output01" name="output01"></div></p>

<hr />

<p>Problem Category</p>
<!-- Problem Category -->
<select id="problem_category" name="problem_category" class="form-control select2" data-placeholder="Select a Problem Category" style="width: 100%;">
    <option value=""> </option>
    <?php

    // define basic query
    $sql = "SELECT DISTINCT Category FROM qci_problems_index_new ORDER BY Category";

    // query
    $result = $mysqli->query($sql) or die('<p>Query to get Category data from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

    while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
        $category = $row["Category"];
        echo "<option value=\"$category\">" . $category . "</option>\n";
    }

    $result->free();
    ?>
</select>

<hr />

<p>Department Responsible</p>
<!-- Department Responsible -->
<div class="input-group">
    <span class="input-group-addon"><i class="fa fa-bars"></i></span>
    <select id="department" name="department" class="form-control select2" data-placeholder="Select a Department" style="width: 100%;">
        <option value=""> </option>
        <?php

        // define basic query
        $sql = "SELECT DISTINCT Department_Responsible FROM qci_problems_index_new ORDER BY Department_Responsible";

        // query
        $result = $mysqli->query($sql) or die('<p>Query to get department_responsible from qci_problems_index_new table failed: ' . mysql_error() . '</p>');

        while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
            $dept = $row["Department_Responsible"];
            echo "<option value=\"$dept\">" . $dept . "</option>\n";
        }

        $result->free();
        ?>
    </select>
</div>