[英]chained select with php mysql jQuery
我的mvc結構中的鏈式選定腳本存在問題,我具有表單視圖,並且包含以下內容:
<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>
然后在控制器中操縱信息,這是代碼:
<?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';
?>
jQuery腳本是:
$(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();
}
當我測試此代碼時,我從第一次選擇中選擇了一個選項,但我收到一條錯誤消息,盡管在第一次選擇中可以使用該類Display並在數據庫中顯示所有類別,但該類在第3行(在第二個代碼中)找不到問題出在哪兒 ?
將問題分為兩部分:
1.-服務器端:
//在您的文件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.-客戶端:您更改選擇
$('#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
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.