Блог

Главная - Вопросы по программированию - JS / PHP — автоматическое заполнение полей выбора на основе предыдущего выбора

JS / PHP — автоматическое заполнение полей выбора на основе предыдущего выбора

#php #jquery #ajax

#php #jquery #ajax

Вопрос:

ИТАК, у меня есть 3 поля выбора, и я хотел бы заполнить # 2 и # 3 на основе выбранного значения в # 1.

JS отслеживает изменение поля в # 1, успешно отправляет его в мой PHP-скрипт, но там я получаю ошибку «Преобразование массива в строку» при вставке переменной $ _POST [‘problem’] в мой запрос для получения соответствующих результатов.

Я попробовал json_encode и убедился, что исходное выбранное значение в первом поле выбора (select id =»проблема») является массивом, следовательно, не понимаю, откуда берется ошибка преобразования.

ОШИБКА:

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

Есть предложения?

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);

}
?>

Комментарии:

1. Пожалуйста, добавьте сведения об ошибке…

2. вау, неужели никто …? я наткнулся здесь на загадку или код в порядке, и здесь виноват мой сервер?

Ответ №1:

Исправил это сам…
Помимо некоторых незначительных ошибок с JavaScript, основная проблема заключалась в том, что я использую плагин Jquery Select2, который не обрабатывает AJAX так же, как обычные <select> поля. Мне пришлось вручную trigger('change') обрабатывать все мои поля, чтобы отобразить значение AJAX.

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>