AJAX成功後在View中更改元素

當談到AJAX時，我是一個全新手，需要一點幫助。我有一個posts_controller和一個likes_controller：AJAX成功後在View中更改元素

用戶可以'喜歡'或'不像'的職位。現在，我正在嘗試實現AJAX，以便類似/不同時會在用戶「喜歡」帖子或「unlikes」帖子時切換。

在AJAX之前，頁面會刷新，視圖中的代碼將確定當前用戶是否喜歡給定的帖子。我在視圖中運行了一條if語句，並根據結果顯示了兩種不同的表單 - 如果帖子還沒有被喜歡，那麼就有一種表單來「喜歡」該帖子（創建動作），並且如果該帖子已經存在喜歡，有一種形式，以'不同'的職位（摧毀行動）。

現在我已經使用AJAX實現了創建部分，類似的動態發生，但視圖不會改變（我可以看到類似的是通過終端/軌道控制檯創建的，但鏈接上的文本保持不變）。我想知道什麼是更新視圖而不刷新頁面的最佳方式？我需要更新'喜歡'的鏈接和形式與'不同'鏈接和形式一旦通過AJAX發生。是唯一的方法來通過jQuery來做到這一點？

這裏是我的代碼： likes_controller

class LikesController < ApplicationController 

    def create 
    @post = Project.find(params[:like][:likee_id]) 

    respond_to do |format| 
     format.html{ 
     current_profile.like!(@post) 
     redirect_to :back 
     } 
     format.js { 
     current_profile.like!(@post) 
     } 
    end 

    end 
    def destroy 
    @post = Like.find(params[:id]).likee 
    current_profile.unlike!(@post) 
    redirect_to :back 
    end 
end

視圖的一個片段：

%ul.dropdown-menu 
    %li 
    - if current_profile.like?(post) 
     = form_for current_profile.likes.find_by_likee_id(post), :html => { :method => :delete } do |f| 
     %a{:href => "javascript:void(0)", :onclick=>"$(this).closest('form').submit()"} 
      %i.icon-heart.icon-large{:style => "color: #fedc73;"} 
      Unlike this Post 
     - else 
     = form_for current_profile.likes.build(:likee_id => post.id), :remote => true do |f| 
      = f.hidden_field :likee_id 
      %a{:href => "javascript:void(0)", :onclick=>"$(this).closest('form').submit()"} 
      %i.icon-heart-empty.icon-large 
      Like this Post

create.js.haml文件：

:plain 
    $(this).closest('form').submit()

任何幫助將是非常讚賞。非常感謝！

來源

2012-04-26 slovak_100

我在這裏回答了我自己的[問題] [1]。看看這是否會給你提醒。 [1]：http://stackoverflow.com/questions/10107689/getting-rid-of-form-and-use-just-button-to-create-new-record – Victor 2012-04-27 03:38:42

你可以使用

$.post('url', data, function(returned_data){ $.('like_div').html(returned_data) })

但是，而不是手動創建一個鏈接，你可以生成一個與軌道：

= link_to url_for(...), :remote => true

這將工作，即使JS被禁用，ADN你不爲此需要任何形式。

- if current_profile.like?(post) 
    = link_to url_for(:controller => :posts, :action => :unlike, :id => post.id), :remote => true 
- else 
    = link_to url_for(:controller => :posts, :action => :like, :id => post.id), :remote => true

當然這個動作應該回應.js和.html。在後面的版本中，您可以渲染整個視圖，並且在.js中，您可以插入一個js片段，將鏈接div更改爲此刷新的片段。你需要更多的解釋嗎？

來源

2012-04-29 18:10:37 Matzi

AJAX成功後在View中更改元素

回答

相關問題