Javascript 使用AJAX使用不同的按钮获取不同的html

我在我的网站上找到了这个菜单

%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

它们都在my

index.html.haml

因此，当我单击div

.filter选项.sent

时，我想更改

- @transactions.each do |transaction|

到

在不重新加载页面的情况下筛选出当前用户的事务

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

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

在我的模型中，方法

all\u for\u 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尝试了很多东西，但似乎没有什么能让我满意。有人能帮我吗？

所以如果你想用AJAX替换@transactions列表，你需要做一些事情

1） 将@transactions块移动到接受局部变量的分部中

2） 创建一个提交到路由的链接，该链接以#js（'data-remote'：true）的形式命中控制器操作（或者编写一个javascript函数来触发$。ajax请求：

或者

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

3） 定义路线

4） 根据过滤器重新分配变量，并使用视图目录->app/views/transactions中的filter.js.erb文件中的新数据重新呈现该部分

.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

---

$（“#事务包装器”）.html（“‘事务/列表’，：locals=>{transactions:@filtered#transactions}）%>”；
警报（'事务已被筛选，yo'）

---

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

另外，我不建议使用（.menu选项{onclick:'showFilters（）}）onclick html选项。我个人认为组织你的html和Javascript代码是混乱和困难的。。但是每个都有自己的。那么第一步应该添加到

.timeline容器

之外，还是应该替换

.timeline容器

和

-@事务。每个

？以前从未做过类似的事情。我有几个问题：A）应该在哪个文件中添加

%A.study

？B） 应该在哪个文件中添加

def services_show

？A）菜单中应该有%A.study（重命名为%A.transaction-filter）链接，而不是.menu选项{onclick:'showFilters（）}/&B）TransactionController中应该有服务_show（重命名为def filter以匹配路由）。这有意义吗？所以我说添加一个partial可能是ajax最好的主意，因为这样你就不必通过一堆难以管理的jquery函数来删除整个页面。。您可以使用javascript提交链接。。告诉要点击的控制器操作。。重新获取数据。。并告诉视图使用您从数据库查询的新事务集重新渲染该小部分。。如果您有更多问题，请单击。A）

.menu选项{onclick:'showFilters（）“

只需滑出

.filter选项

，您可以在其中单击

我的事务

。因此，在单击该选项时，我希望对事务进行过滤。因此，

%a.transaction-filter

不应该代替

。filter选项

？B）我仍然不知道将

=渲染部分部分

部分：/and如果它替换了

.timeline容器

，或者执行了其他操作

%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}

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

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')