阿贾克斯PHP创建的窗体不提交 [英] Ajax PHP Created Form Not Submitting
问题描述
我有一组三个组合框(下拉菜单)是由PHP填充了从数据库中值。我已经改变了呼应提交按钮测试了这些组合框键入=提交
,并加载PHP页面本身。他们没有工作,以这种方式顺利。
I have a set of three combo boxes (drop downs) that are populated by PHP with values from a database. I've tested these combo boxes by changing the echoed Submit button to type='submit'
, and loading the php page itself. They work without a hitch in this fashion.
不过,当我加载了Ajax页面,提交按钮拒绝触发Ajax功能。我已经通过创建一组静态组合框的HTML测试的页,并且在这种情况下,Ajax的触发顺利。然而,使用创建的PHP组合框不触发Ajax。
However, when I load the Ajax page, the submit button refuses to trigger the Ajax function. I have tested the page by creating a set of static combo boxes with html, and in this case the Ajax fires without a hitch. Yet using the PHP created combo boxes do not trigger the Ajax.
我希望有人能够说明什么问题是关于我的code的一些情况。
I'm hoping someone can shed some light on what the problem is concerning my code.
的HTML和放大器; jQuery的:
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function() {
function loadData(imgFamily, imgClass, imgGender){
$.ajax
({
type: "GET",
url: "filter_test.php",
data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
success: function(data) {
$("#gallery_container").html(data);
},
});
}
loadData(1); // For first time page load default results
//Bind keypress event to Ajax call
$('.filter').keypress(function(e) {
if(e.keyCode == 13) {
var imgFamily = $('#imgFamily').attr('value');
var imgClass = $('#imgClass').attr('value');
var imgGender = $('#imgGender').attr('value');
//Fetch the images
loadData(imgFamily, imgClass, imgGender);
}
});
//Bind the click event to Ajax call on submit
$("#submit").click(function(){
var imgFamily = $('#imgFamily').attr('value');
var imgClass = $('#imgClass').attr('value');
var imgGender = $('#imgGender').attr('value');
//Fetch the images
loadData(imgFamily, imgClass, imgGender);
})
});
的PHP(虽然我不相信问题就出在这里):
我仅列出一个组合框,以节省空间,因为它们都是一样的的
// Queries for combo boxes
$imgFamily_query = "SELECT DISTINCT imgFamily FROM images WHERE $clause";
$imgClass_query = "SELECT DISTINCT imgClass FROM images WHERE $clause";
$imgGender_query = "SELECT DISTINCT imgGender FROM images WHERE $clause";
// Create the form and combo boxes
echo "<form name='refine' action=''>
<fieldset><legend>Refine Results</legend>";
// imgFamily combo box
if($imgFamily_result = mysql_query($imgFamily_query)) {
if($imgFamily_success = mysql_num_rows($imgFamily_result) > 0) {
// Start combo-box
echo "<label for='imgFamily' id='imgFamily_label'>Choose a family</label>\n
<select class='filter' id='imgFamily' name='imgFamily'>\n
<option value='1'></option>\n";
// For each item in the results...
while ($imgFamily_row = mysql_fetch_array($imgFamily_result))
// Add a new option to the combo-box
echo "<option value='$imgFamily_row[imgFamily]'>$imgFamily_row[imgFamily]</option>\n";
// End the combo-box
echo "</select>\n";
} else { echo "No results found."; }
} else { echo "Failed to connect to database."; }
// Add a submit button to the form
echo "</fieldset>
<fieldset><input type='button' name='submit' value='submit' id='submit'></fieldset>
</form>";
非常感谢您的帮助。
Thanks very much for any help.
推荐答案
您插入的形式,从而覆盖到的提交事件绑定的元素。您插入新的表格后,你应该重新执行code结合的事件。
You insert the form and thereby overwrite the elements to which the submit-event is bound. You should re-execute the code that binds the events after you have inserted the new form.
有一个更清洁的方式将返回只包含修改后的信息JSON对象或XML,并且更新当前的形式,而不是插入一个全新的一个,但是这将是更多的工作。
A cleaner way would be to return a JSON object or XML containing just the modified information, and update your current form instead of inserting a whole new one, but that will be more work.
function loadData(imgFamily, imgClass, imgGender){
$.ajax
({
type: "GET",
url: "filter_test.php",
data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender},
success: function(data) {
$("#gallery_container").html(data);
bindEvents(); // <---- Call it here
},
});
}
// Separate function
function bindEvents()
{
//Bind keypress event to Ajax call
$('.filter').keypress(function(e) {
if(e.keyCode == 13) {
var imgFamily = $('#imgFamily').attr('value');
var imgClass = $('#imgClass').attr('value');
var imgGender = $('#imgGender').attr('value');
//Fetch the images
loadData(imgFamily, imgClass, imgGender);
}
});
//Bind the click event to Ajax call on submit
$("#submit").click(function(){
var imgFamily = $('#imgFamily').attr('value');
var imgClass = $('#imgClass').attr('value');
var imgGender = $('#imgGender').attr('value');
//Fetch the images
loadData(imgFamily, imgClass, imgGender);
})
}
$(document).ready(function() {
loadData(1); // For first time page load default results
bindEvents(); // <---- And here (where your code originally was).
});
这篇关于阿贾克斯PHP创建的窗体不提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!