Question

我有一个使用kaminari的ajax搜索表单和ajax分页。我想将其更改为“加载更多”按钮，但我遇到了jquery问题。

对于表单和普通分页，我在index.js.erb;

中使用了它

$('.gig-search-list').html("<%= j render(partial: 'gigs') %>");

这将使用搜索表单中的新结果或使用kaminari gem选择的下一页替换所有当前结果。

我希望“加载更多”按钮将结果添加到页面底部，但搜索表单仍然像以前一样。

通过下面的示例，“加载更多”按钮可以根据需要运行，但搜索表单根本不起作用。

 $('.gig-search-list').append("<%= j render(partial: 'gigs') %>");

然后我尝试将它们分开......

$("#gig_search_form").submit(function() {
    $('.gig-search-list').html("<%= j render(partial: 'gigs') %>")
            $('#map').html('<%= j render("map") %>');
});

$(".pagination").click(function(){
        $(".gig-search-list").append("<%= j render(partial: 'gigs') %>");
        $('#map').html('<%= j render("map") %>');
});

这种作品......有点......虽然我必须点击两次，或者提交表格两次以获得触发功能。分页部分没有考虑搜索参数，搜索也遍布整个地方。

如何组合这两个功能？使用.html作为搜索表单，使用.append作为分页？

Answer 1

您可以检查index.js.erb中的条件，是否有params [：page]。

例如。 index.js.erb的

<% if params[:page] %> #if clicked on load more, we will get params[:page]
 $('.gig-search-list').append("<%= j render(partial: 'gigs') %>");
<% else %>
 $('.gig-search-list').html("<%= j render(partial: 'gigs') %>");
<% end %>

当我们点击分页时，我们需要附加结果，所以我们可以在js.erb上轻松检查这个条件

Ruby on rails - 使用kaminari和搜索表单加载更多按钮。 Jquery问题

1 个答案: