使用不同的按钮 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) Move the @transactions block into a partial that takes a local variable.

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

2) Create a link that submits to a route, that hits a controller action as #js ('data-remote': true ) ( or write a javascript function that triggers $.ajax request: 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) define the route

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

4) re-assign the variable based on the filter, and re-render that partial with the new data in a filter.js.erb file thats in the view directory -> app/views/transactions

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 警告 ;)

使用不同的按钮 AJAX 获得不同的 html

Get different html with different buttons with AJAX

javascript

ajax

jquery

haml

ruby-on-rails