2014-12-04 9 views
6

Sono nuovo di Ruby e ho appena giocato con un'app demo. Ho incluso la gemma act_as_votable, e funziona abbastanza bene tranne per un fatto che mi manca ... ajax. Rinfrescare tutto il tempo che la pagina è un po 'noiosa quindi ho "provato" a implementare ajax, ma senza fortuna :(. Dopo forse due ore di risorse penso di non poter fare più nulla. Ho bisogno di aiuto per implementare ajax .. in giù e su voti Grazie milleAtto come Ajax fallabile

Ecco il mio codice:

entries_controller.rb

def upvote 
    @entry = Entry.find(params[:id]) 
    unless current_user.voted_for? @entry 
     @entry.vote_total = @entry.vote_total + 1 
     @entry.save 
     @entry.upvote_by current_user 
    else 
     flash[:danger] = 'Sorry!! You had allready voted this entry!' 
    end 
    redirect_to :back 
    end 

    def downvote 
    @entry = Entry.find(params[:id]) 
    unless current_user.voted_for? @entry 
     @entry.vote_total = @entry.vote_total + 1 
     @entry.save 
     @entry.downvote_by current_user 
    else 
     flash[:danger] = 'Sorry!! You had allready voted this entry!' 
    end 
    redirect_to :back 
    end 

_entry.html.erb (nella cartella voci)

<aside class="vote-count bind-<%= entry.id %>"> 
    <%= link_to like_entry_path(entry), :remote => true, method: :put, class: 'vpos' do %> 
    <i class="fa fa-thumbs-up"></i> 
    <%= entry.get_upvotes.size %> 
    <% end %> 
    <%= link_to dislike_entry_path(entry), :remote => true, method: :put, class: 'npos' do %> 
    <i class="fa fa-thumbs-down"></i> 
    <%= entry.get_downvotes.size %> 
    <% end %> 
</aside> 

upvote.js.erb (nella cartella voci)

$(".bind-<%=entry.id%>").html('<%=escape_javascript entry.get_upvotes.size %>'); 

routes.rb

resources :entries, only: [:index, :show, :new, :create, :destroy] do 
    member do 
    put 'like', to: 'entries#upvote' 
    put 'dislike', to: 'entries#downvote' 
    end 
end 

io sono un po 'di nuovo da guide in modo anykind di aiuto. sarebbe molto apprezzato !! Grazie

risposta

6

Finnaly Sono riuscito a farlo funzionare (funge da gemma votiva, i voti sono ora ajax). Ho intenzione di condividerlo nel caso qualcuno abbia lo stesso problema di me.

routes.rb:

put 'like', to: 'entries#upvote' 
put 'dislike', to: 'entries#downvote' 

entries_controller.rb (nel mio caso):

def upvote 
    @entry = Entry.find(params[:id]) 
    respond_to do |format| 
    unless current_user.voted_for? @entry 
    format.html { redirect_to :back } 
    format.json { head :no_content } 
    format.js { render :layout => false } 
    @entry.vote_total = @entry.vote_total + 1 
    @entry.save 
    @entry.upvote_by current_user 
    else 
    flash[:danger] = 'You allready voted this entry' 
    format.html { redirect_to :back } 
    format.json { head :no_content } 
    format.js 
    end 
end 
end 

def downvote 
    @entry = Entry.find(params[:id]) 
    respond_to do |format| 
    unless current_user.voted_for? @entry 
    format.html { redirect_to :back } 
    format.json { head :no_content } 
    format.js { render :layout => false } 
    @entry.vote_total = @entry.vote_total + 1 
    @entry.save 
    @entry.downvote_by current_user 
    else 
    flash[:danger] = 'You allready voted this entry' 
    format.html { redirect_to :back } 
    format.json { head :no_content } 
    format.js 
    end 
end 
end 

_entry.html.erb (parziale):

<aside class="vote-count bind-<%= entry.id %>"> 
<%= link_to like_entry_path(entry), :remote => true, method: :put, class: 'vpos' do %> 
    <i class="fa fa-thumbs-up"></i> 
    <span class="vcount-<%= entry.id %>"><%= entry.get_upvotes.size %></span> 
<% end %> 
<%= link_to dislike_entry_path(entry), :remote => true, method: :put, class: 'npos' do %> 
    <i class="fa fa-thumbs-down"></i> 
    <span class="ncount-<%= entry.id %>"><%= entry.get_downvotes.size %></span> 
<% end %> 
</aside> 

upvote.js .erb:

$('.vpos').bind('ajax:success', function() { 
$('.vcount-<%= @entry.id %>').html('<%=escape_javascript @entry.get_upvotes.size.to_s %>'); 
}); 

downvote.js.erb:

$('.npos').bind('ajax:success', function() { 
$('.ncount-<%= @entry.id %>').html('<%=escape_javascript @entry.get_downvotes.size.to_s %>'); 
}); 

Questo è tutto. Spero di poter aiutare qualcuno che ha bisogno di una mano con questo. Saluti.

+0

Grazie per questo! Super-utile. Ho una domanda sui tuoi file js.erb - qual è la funzione di questi e dove li stai mettendo? Does not Rails ': remote => true gestisce la richiesta AJAX? –

1

Ecco la mia soluzione. Il progetto: l'utente può creare un post (debat) e gli altri utenti possono effettuare l'upvoting e il downvote con i pulsanti.

cosa è diversa:

L'Ajax aggiornare il conteggio dei downvotes e conta le upvotes allo stesso momento in cui un utente fa clic. Ho usato .text al posto di .html nei miei file javascript. Non ho usato un partial, ho inserito tutto il mio codice nel file debat.html.erb. ho creato classe specifica per ogni pulsante con un arco e un ID di variabili, in quanto tutti i tasti cambiati allo stesso tempo

mio routes.rb è lo stesso:

resources :debats do 
member do 
    put "like", to: "debats#upvote" 
    put "dislike", to: "debats#downvote" 
end 
end 

dabats_controller.rb:

def upvote 
    @debat = Debat.find(params[:id]) 
    @debat.upvote_by current_user 
    respond_to do |format| 
     format.html {redirect_to :back } 
     format.json { render json: { count: @debat.liked_count } } 
     format.js { render :layout => false } 
    end 
end 

def downvote 
    @debat = Debat.find(params[:id]) 
    @debat.downvote_by current_user 
    respond_to do |format| 
    format.html {redirect_to :back } 
    format.json { render json: { count: @debat.disliked_count } } 
    format.js { render :layout => false } 
end 
end 

debat.html.erb (solo la parte con i pulsanti 2)

<div class="large-1 columns count"> 
    <span class= "like-<%= debat.id %>"> 
     <%= link_to like_debat_path(debat), method: :put, remote: true, class: 'like' do %> 
     <div class="upcount"><i class="fa fa-angle-up"></i></div> 
     <div class="ouicount up-<%= debat.id %>"><%= debat.get_upvotes.size %></div> 
     <div class="oui">Oui</div> 
     <%end%> 
    </span> 

    <span class= "dislike-<%= debat.id %>"> 
     <%= link_to dislike_debat_path(debat), method: :put, remote: true, class: 'dislike' do %> 
     <div class="non">Non</div> 
     <div class="noncount down-<%= debat.id%>"> <%= debat.get_downvotes.size %></div> 
     <div class="downcount"><i class="fa fa-angle-down"></i></div> 
     <% end %> 
    </span> 
    </div> 

upvote.js.erb

$('.like').bind('ajax:success', function() { 

    $('.up-<%= @debat.id %>').text(<%= @debat.get_upvotes.size%>); 
    $('.down-<%= @debat.id %>').text(<%= @debat.get_downvotes.size%>); 

}); 

downvote.js.erb

$('.dislike').bind('ajax:success', function() { 

$('.up-<%= @debat.id %>').text(<%= @debat.get_upvotes.size%>); 
$('.down-<%= @debat.id %>').text(<%= @debat.get_downvotes.size%>); 

}); 

Spero che aiuti!