Armitage2k Armitage2k - 1 month ago 6
PHP Question

JS/PHP - auto-populate select fields based on previous selection

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

fixed it myself... Apart from some minor mistakes with the JavaScript, the main problem was that I am using the Jquery Select2 plugin which doesnt handle AJAX in the same way that regular 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);
}
?>
Comments