0

I am using the acts as votable gem on my rails 4 app.

I have finally gotten it to work using ajax, so the page does not refresh when a user votes, however, the vote.size doesn't update until the page is refreshed.

Here is my controller action:

  def upvote 
    @article = Article.find(params[:article_id])
    @subarticle = @article.subarticles.find(params[:id])
    session[:voting_id] = request.remote_ip
    voter = Session.find_or_create_by(ip: session[:voting_id])
    voter.likes @subarticle
    respond_to do |format|
      format.html {redirect_to :back }
      format.json { render json: { count: @subarticle.get_upvotes.size } }
    end
  end

and view:

<%= link_to like_article_subarticle_path(@article, subarticle), class: "vote", method: :put, remote: true, data: { type: :json } do %>
  <button type="button" class="btn btn-success btn-lg" aria-label="Left Align" style="margin-right:5px">
    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Helpful
  </button><span class="badge" style="margin-right:10px"><%= subarticle.get_upvotes.size %></span>
<% end %>

<script>
    $('.vote')
  .on('ajax:send', function () { $(this).addClass('loading'); })
  .on('ajax:complete', function () { $(this).removeClass('loading'); })
  .on('ajax:error', function () { $(this).after('<div class="error">There was an issue.</div>'); })
  .on('ajax:success', function(e, data, status, xhr) { $(this).html("Thank you for voting!"); });
</script>

As of now, when a user votes, it completely get's rid of the "helpful" button and upvote size, and displays the html"Thank you for voting".

I am having trouble figuring out how to keep the button and simply update the upvote.size to the correct number. I have tried assigning a class to the upvote size and then using something like this: $('.item-class').html(data.count) but no luck.

Any recommendations? Thank you!

Kathan
  • 1,428
  • 2
  • 15
  • 31
  • Have you checked the javascript console to make sure there are no javascript errors? – Taryn East Jul 07 '15 at 05:55
  • I am getting a `Failed to load resource: the server responded with a status of 404 (Not Found)` but I dont think it has anything to do with the voting system @TarynEast – Kathan Jul 07 '15 at 06:01
  • Click the "network" tab and click the line that is marked in red... it might give you more details on the actual error (also check your rails logs). – Taryn East Jul 07 '15 at 06:02

1 Answers1

0
$('.item-class').html(data.count)

item-class doesn't seem to be declared in your template anywhere... but even if it did, if you call it like this, it will likely match more than one thing on the page, so this replace won't work.

The reason why the button is being replaced is you are replacing the html of "this" (which is defined as the whole section marked with the class .vote)

If you want to replace just the item-class within the .vote section (ie leave the button intact) then you need to a) add something with the class of 'item-class' and b) reduce what you are replacing to that. eg:

$(this).first('.item-class').html("Thank you for voting!");

(note I've not bug-tested this - you may need to google javascript first to make sure this is the correct usage).

Taryn East
  • 27,486
  • 9
  • 86
  • 108
  • Thank you for the help! So I have gotten the button to stay in tact, however, the `upvotes.size` stays the same until you refresh the page. – Kathan Jul 07 '15 at 06:07
  • So where is the code that updates the `upvotes.size` section? in fact, where is the `upvotes.size` section in the html? – Taryn East Jul 07 '15 at 23:06