我有一个表单可以将一个小文本文件发送到服务器,并使用 PHP 处理它的数据。结果显示在颜色框中。它工作正常,但我想在他的数据上传和处理(需要几秒钟)时向我的用户显示一条小消息,并在显示结果后再次隐藏它。但是该消息(span#ajaxloading)
由于某种原因不会出现。
HTML:
<button type="button" id="fixit">Fix it!</button><span id="ajaxloading" style="display:none;">Your data is being processed...</span>
jQuery的:
jQuery("#fixit").click(function() {
if(form.valid() == true ) {
var formData = new FormData(jQuery('#ajastaja')[0]);
jQuery.ajax({
beforeSend: function(){
jQuery('#ajaxloading').show(); // <- Not working!
},
url: '/path/to/my.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
jQuery('#ajaxloading').hide(); // <- Works here
jQuery('#answerbox').html(data);
},
cache: false,
contentType: false,
processData: false
});
jQuery.colorbox({
inline:true,
href:'#answerbox',
width:'500px',
closeButton:false
});
return false;
}
});
当我删除&#34;显示:无&#34;规则它当然显示并隐藏在颜色框弹出后(就像它应该)。那么我做错了什么?提前谢谢!
编辑:我很抱歉这个混乱,代码实际上已经包装在jQuery(document).ready(function(){...}); - 它只包含很多JQuery Validation插件方法,规则等,不应该影响我的问题。
答案 0 :(得分:4)
尝试删除以下行
async: false,
答案 1 :(得分:1)
如果beforeSend功能不起作用,请尝试以这种方式调用您的点击功能..
Jquery的:
jQuery("#fixit").click(function () {
jQuery('#ajaxloading').show();
if (form.valid() == true) {
var formData = new FormData(jQuery('#ajastaja')[0]);
jQuery.ajax({
url: '/path/to/my.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
jQuery('#ajaxloading').hide(); // <- Works here
jQuery('#answerbox').html(data);
},
error:function(data)
{
jQuery('#ajaxloading').hide();
},
cache: false,
contentType: false,
processData: false
});
jQuery.colorbox({
inline: true,
href: '#answerbox',
width: '500px',
closeButton: false
});
return false;
}
else {
jQuery('#ajaxloading').hide();
}
});
答案 2 :(得分:0)
我发现您的代码很好,表单没有在代码段中定义,但beforeSend在这里工作:
和其他答案一样,我不得不把它包装在一个document.ready中,但这可能已经在你的代码片段之外完成了吗?
var formData = new FormData(jQuery('#ajastaja')[0]);
jQuery.ajax({
beforeSend: function(){
console.log('beforeSend')
jQuery('#ajaxloading').show(); // <- Not working!
},
url: '/path/to/my.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
jQuery('#ajaxloading').hide(); // <- Works here
jQuery('#answerbox').html(data);
},
cache: false,
contentType: false,
processData: false
});
答案 3 :(得分:0)
尝试打包您的点击功能:
$(document).ready(function() {
$("#fixit").click(function() {
...
});
});