重复提交搜索表单时添加和删除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轮播项目的主要内容,如果未能解决你的问题,请参考以下文章

将项目添加到 Owl Carousel 的第一个位置

从 url 中删除搜索查询而不刷新页面?

html表单在特定输入上按Enter键时阻止提交[重复]

如何使用 mouseenter 自动播放 Owl carousel 2 滑块?

token防止前端重复提交

重复使用代码而不提交表单两次