使用 AJAX 获取具有不同按钮的不同 html

Question

我的网站上有这个菜单

%button.dropdown-button
  .current-user{onclick:'showMenu()'}
    %img.current-user-image{src:current_user.picture_url}
    = current_user
    %i.fa.fa-bars{'aria-hidden':true}
  .dropdown-content
    .menu-option{onclick:'showFilters()'}
      Filter Transactions
      %i.fa.fa-paper-plane{'aria-hidden':true}
    .transaction-filters
      .filter-option
        My Transactions
        %i.fa.fa-square-o
    %a{href:'#'}
      .menu-option
        Balance History
        %i.fa.fa-history{'aria-hidden':true}
    %a{href:destroy_user_session_path}
      .menu-option
        Sign Out
        %i.fa.fa-sign-out{'aria-hidden':true}

我得到了这个交易时间表

.timeline-container
  - @transactions.each do |transaction|
    .transaction-container
      .transaction-header-container
        .transaction-kudos-container
          = "+#{transaction.amount}"
          %span.currency
            ₭
        .transaction-avatar-container
          %div
            = image_tag transaction.receiver_image, class:'avatar'
      .transaction-body-container
        .transaction-content
          %span
            = "#{transaction.sender.name}:"
          %span.highlighted
            = "+#{transaction.amount} ₭"
          %span
            to
          %span.highlighted
            = transaction.receiver_name_feed
          %span
            for
          %span.highlighted
            = transaction.activity_name_feed
      %div
        -#%button#like-button
        -#  Like
        %span.post-time-stamp
          = "#{distance_of_time_in_words(DateTime.now, transaction.created_at)} ago"
  = paginate @transactions

它们都呈现在我的index.html.haml

所以当我点击 div .filter-option.sent 时，我想从

更改代码更改

- @transactions.each do |transaction|

到

- @all_transactions.each do |transaction|

在不重新加载页面的情况下过滤掉当前用户的事务。

这些变量是在我的控制器中定义的

@transactions = Transaction.order('created_at desc').page(params[:page]).per(20)
@all_transactions = Transaction.all_for_user(current_user)

在我的模型中使用方法all_for_user

def self.all_for_user(user)
    Transaction.where(sender: user).or(Transaction.where(receiver: user)).order('created_at desc').page.per(20)
end

我用 AJAX 尝试了很多东西，但似乎没有什么能让我满意。有人可以帮助我吗？

Answer 1

因此，如果您想用 AJAX 替换 @transactions 列表，您需要做一些事情..

1) 将@transactions 块移动到采用局部变量的部分中。

#transactions-wrapper
  = render partial: 'transactions/list', locals: {transactions: @transactions}

2) 创建一个提交到路由的链接，该链接以 #js ('data-remote': true ) 形式触发控制器操作（或编写触发 $.ajax 请求的 javascript 函数：https://www.w3schools.com/jquery/ajax_ajax.asp

%a.transaction-filter{href: "/transactions/#{transaction_type}", 'data-remote': true}

或前..

%a.study{href: "/transactions/recent", 'data-remote': true}
%a.study{href: "/transactions/past", 'data-remote': true}

3) 定义路线

get '/transactions/:type' => 'transactions#filter'

4) 根据过滤器重新分配变量，并使用视图目录中的 filter.js.erb 文件中的新数据重新渲染该部分 -> 应用程序/视图/事务

def filter
  @filtered_transactions = Transactions.where(type: params[:type] ).order('created_at DESC')

  respond_to do |format|
    format.html
    format.js { render :action => 'filter.js.erb', :layout => false}
  end
end

---

$("#transactions-wrapper").html("<%= j render(:partial => 'transactions/list'', :locals => { transactions: @filtered_transactions } ) %>");
alert('Transactions have been filtered, yo')

让我知道这是否有意义！除了请不要在最后发出 javascript 警报 ;)