所以,基本上我正在努力实现的目标: 在index.php中 我会输入产品代码来搜索产品信息及其图像(该查询在open_first.php中运行,通过ajax post请求调用)。 它的工作非常完美......
当加载open_first.php时,它会显示一些我可以选择的图像(当我点击图像时,它会检查包含图像ID的相关复选框)。 这也很有效,很好。
,但 如果我在字段中输入代码:“productCodeCopy”并单击“confirmCodeCopy” - 按钮重新加载整个页面,我的意思是index.php,我输入的所有内容都丢失了,我又回到了起点。我不明白为什么会这样做。我想它与事实有关,第二个ajax请求是从一个动态创建的页面(open_first.php)?我是否会错过我应该发布的内容?或者问题是什么,这让我非常沮丧,因为我已经试着解决这个问题几个小时了。
注意: Jquery在index.php,open_first.php和open_second.php中加载,我只是忽略了它以保持代码更简单。
FILE:index.php(“起点”)
<!-- head -->
<script type="text/javascript">
$(document).ready(function() {
$("#confirmCode").on('click', function(){
var productCode = $("#productCode").val();
$.ajax({
url: 'open_first.php',
type: "POST",
data: ({code: productCode}),
success: function(data){
$("#found").html(data);
},
error: _alertError
});
function _alertError() {
alert('error on request');
}
});
});
</script>
<!-- body -->
<input type="text" class="textfields" id="productCode" name="productCode" value="YT-6212">
<input type="button" class="admin-buttons green" name="confirmCode" id="confirmCode" value="Search">
<div id="found"></div>
FILE open_first.php
<script type="text/javascript">
$(function() {
$("#foundImage").on('click', function(){
$('#foundImage').toggleClass("foundImage-selected foundImage");
var myID = $('#foundImage').data('image-id');
var checkBox = $('input[id=selectedImages-'+myID+']');
checkBox.prop("checked", !checkBox.prop("checked"));
});
$("#confirmCodeCopy").on('click', function(){
var checkedItems = $('input:checkbox[name="selectedImages[]"]:checked');
// this code here reloads the whole page / view (as in "index.php")
$.ajax({
url: 'open_second.php',
type: "POST",
data: ({checked: checkedItems, copyTo: productCodeCopy, code: "<?php echo $_POST['code']; ?>"}),
success: function(data){
$("#copyToProducts").append(data);
},
error: _alertError
});
/*
// the code below runs just fine when I hit the button "confirmCodeCopy"
alert('Fuu');
return false;
*/
});
function _alertError() {
alert('error');
}
});
</script>
<!--BODY-->
<!-- these are dynamically generated from php, just to simplify we have checkbox that contains value "1" to be posted in ajax -->
<div class="foundImage" id="foundImage" data-image-id="1"><img src="image.jpg"><input type="checkbox" id="selectedImages-1" name="selectedImages[]" value="1" style="display: none;"></div>
<label for="productCodeCopy">Products code</label>
<input type="text" class="textfields" id="productCodeCopy" name="productCodeCopy">
<br /><br />
<label for="confirmCodeCopy"> </label>
<input type="button" class="admin-buttons green" name="confirmCodeCopy" id="confirmCodeCopy" value="Search">
<div id="copyToProducts"></div>
open_second.php现在只打印出POST变量,所以没什么特别的。
解决
好吧,我解决了。随着dumdum的帮助。
我删除了该行:
$('input:checkbox[name="selectedImages[]"]:checked');
并补充说:
var checkedItems = new Array();
var productToCopy = $('#productCodeCopy').val();
$("input:checkbox[name=selectedImages[]]:checked").each(function() {
checkedItems.push($(this).val());
});
由于没有表单元素存在,除非通过.val()函数“手动检索”,否则它不会获取字段值。愚蠢的我..
我不知道受影响了多少,但我也改变了:
data: ({checked: checkedItems, copyTo: productCodeCopy"})
要
data: {"checked": checkedItems, "copyTo": productToCopy}
所以现在它工作得很好:)很酷!
答案 0 :(得分:1)
当您将事件处理程序应用于按钮或链接以执行ajax时...始终阻止浏览器默认处理对该元素的单击
有两种方法。使用preventDefault()
或从处理程序
false
$("#confirmCodeCopy").on('click', function(event){
/* method one*/
event.preventDefault();
/* handler code here*/
/* method 2*/
return false;
})
向表单添加提交处理程序以使用表单数据执行ajax而不是将表单重定向到其操作URL
也是如此答案 1 :(得分:0)
您的代码$('input:checkbox[name="selectedImages[]"]:checked');
正在返回 undefined ,导致ajax调用中的json数据无效。检查那里的选择器。