chained select with php mysql jQuery - php

Question

I have a problem with chained selected script in my mvc structure
I have the form view and it contain this:
<div class="col-md-6 col-md-offset-3">
<form action="" method="post" role="form">
<div class="form-group">
<label>Nom de l'annonce:</label>
<input class="form-control input-lg" type="text" name="reg_name">
</div>
<div class="form-group">
<label>Choisi une catégorie:</label>
<select id="first_drop" class="form-control input-lg" name="categories">
<option disabled="disabled" selected="selected">choisi une categorie</option>
<?php
for ($i = 0; $i < count($dispalyCat); $i++) {
echo'<option value="' . $dispalyCat[$i]['id'] . '">' . $dispalyCat[$i]['categorieName'] . '</option>';
}
?>
</select>
</div>
<span id="loading" style="display: none;">
<img alt="Loading..." src="resources/images/loader.gif"/>
</span>
<div class="form-group" id="result" style="display: none">
<label>Choisi une sou-catégorie:</label>
<select id="second_drop" class="form-control input-lg" name="subCategories">
<?php
for ($i = 0; $i < count($dispalySubCat); $i++) {
echo'<option>' . $dispalySubCat[$i]['subCategorieName'] . '</option>';
}
?>
</select>
</div>
<div class="form-group">
<label>Prix:</label>
<input class="form-control input-lg" name="reg_pass2" type="text"/>
</div>
<div class="form-group">
<label>Surface:</label>
<input class="form-control input-lg" name="reg_pass2" type="text"/>
</div>
<div class="form-group">
<label>Description:</label>
<textarea class="form-control input-lg"></textarea>
</div>
<div class="form-group">
<label>Images:</label>
<input type="file" value="Ajouter l'annonce" class="form-control input-lg" multiple="" />
</div>
<div class="form-group">
<input type="submit" value="Ajouter l'annonce" class="btn btn-danger btn-lg" />
</div>
<input type="hidden" name="do" value="register"/>
</form>
</div>
and then the information was manipulated in the controller and this is the code:
<?php
$display = new Display('categories');
$dispalyCat = $display->getAllData();
$func = $_POST['func'];
$drop_val = $_POST['drop_val'];
if (isset($_POST['drop_val'])) {
$display2 = new Display('subcategories');
$dispalySubCat = $display2->getAllDataFromParentId($drop_val, 'categorieId');
}
include 'views/ajouterAnnonce.php';
?>
and the jquery script is:
$(document).ready(function () {
"use strict";
$('#loading').hide();
$('#first_drop').change(function () {
$('#loading').show();
$('#result').hide();
$.post('addAds.php', {
drop_val: $('select[name=categories]').val()
}, function (response) {
$('#result').fadeOut();
setTimeout("finishAjax('result', '" + escape(response) + "')", 400);
});
return false;
});
});
function finishAjax(id, response) {
"use strict";
$('#loading').hide();
$('#' + id).html(unescape(response));
$('#' + id).fadeIn();
}
when I tested this codes and I choose an option from the first select but I had an error message that the class Display not found in line 3 (in 2nd code) although it work in the first select and show me all the categories in the database
where is the problem ?

Answer 1

Divide the problem in 2 parts:
1.- Server side:
//In your file php
<?php
// get values from url, because for a query from a select, is not necessary use request POST
// then
echo $.GET['value'];
// Here you use queries or you do procedures for obtain data related with $.GET['value']
// Last you return data on format Json
?>
// This file php, has a url, for example: get_data_select.php
// Then whitout jquery or javascript, you should test the url, on the browser.
// http://somedomain/get_data_select.php?value=12
// If it return data with header json. server side works good.
2.- Client side: you change selected
$('#idselect').on("change", function(){
var values = '?value=' + $('#idselect').val();
$.get('http://somedomain/get_data_select.php' + values, function(res){
console.log("response", res);
callFunctionRender(res);
});
});
function callFunctionRender(data) {
// here You have data from server
// then you should rendered
};