獲取與不同的按鈕不同的HTML與AJAX

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

所以，如果你想更換@transactions清單，AJAX，你需要做的幾件事情..

1）將@transactions塊插入部分，需要一個局部變量。

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

2）創建提交到路由鏈接，命中控制器動作爲#js（「數據遠程」：真）（或寫觸發$就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警報;）