重复提交搜索表单时添加和删除owl轮播项目
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重复提交搜索表单时添加和删除owl轮播项目相关的知识,希望对你有一定的参考价值。
每当按Enter键提交搜索表单时,我都会使用AJAX调用来获取我的轮播项目。我想删除以前的项目,并在按下Enter时将新项目添加到轮播。
它一直运行良好,除非反复按Enter键,它不会删除旧项目只是不断添加新项目。
删除项目
function removeResult() {
var i = 0;
$("#result_section").slideUp(750, function () {
$('.result_item').each(function(){
$(".prof-carousel").trigger('remove.owl.carousel', [i++])
.trigger('refresh.owl.carousel');
});
});
}
添加项目
$("#index_search_btn").click(function (e) {
e.preventDefault();
removeResult();
var formData = new FormData();
formData.append('type', search_type);
formData.append('q', search_q);
$.ajax({
type: "POST",
contentType: false,
processData: false,
url: "/search",
data: formData,
success: function (response) {
$("#result_section").slideDown(750, function () {
$.each(response, function (index, prof) {
var item = '';
item += '<div class="item carousel_ostad_item result_item">'+ 'whatever...'+'</div>';
$('.my-carousel').owlCarousel().trigger('add.owl.carousel',[jQuery(item)]).trigger('refresh.owl.carousel');
});
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError);
}
});
});
答案
可能是因为Ajax异步且更慢并且发生类似于:
Enter -> Remove (old el) -> Ajax call 1 -> Enter -> Remove (nothing) -> Ajax call 2 -> Ajax callback 1 ADD -> Ajax callback 2 ADD
我希望很清楚,我不知道如何表达这一点。
你可以做的是删除success
Ajax回调中的旧元素。
$("#index_search_btn").click(function (e) {
e.preventDefault();
// #### Remove this...
//removeResult();
var formData = new FormData();
formData.append('type', search_type);
formData.append('q', search_q);
$.ajax({
type: "POST",
contentType: false,
processData: false,
url: "/search",
data: formData,
success: function (response) {
// ... and move here. ####
removeResult();
$("#result_section").slideDown(750, function () {
$.each(response, function (index, prof) {
var item = '';
item += '<div class="item carousel_ostad_item result_item">'+ 'whatever...'+'</div>';
$('.my-carousel').owlCarousel().trigger('add.owl.carousel',[jQuery(item)]).trigger('refresh.owl.carousel');
});
});
}, error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError);
}
});
});
另一答案
我确实提出了一个简单的解决方案。按下时禁用搜索按钮(因此无法重复提交表单)并在成功Ajax回调中添加carousal项后再次启用它。
$("#index_search_btn").click(function (e) {
e.preventDefault();
///// disable search button /////
$("#index_search_btn").attr("disabled", true);
removeResult();
var formData = new FormData();
formData.append('type', search_type);
formData.append('q', search_q);
$.ajax({
type: "POST",
contentType: false,
processData: false,
url: "/search",
data: formData,
success: function (response) {
$("#result_section").slideDown(750, function () {
$.each(response, function (index, prof) {
var item = '';
item += '<div class="item carousel_ostad_item result_item">'+ 'whatever...'+'</div>';
$('.my-carousel').owlCarousel().trigger('add.owl.carousel',[jQuery(item)]).trigger('refresh.owl.carousel');
///// enable search button /////
$("#index_search_btn").removeAttr("disabled");
});
});
}, error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError);
}
});
});
以上是关于重复提交搜索表单时添加和删除owl轮播项目的主要内容,如果未能解决你的问题,请参考以下文章