CODEWITHSUNDEEP
jqueryruby-on-railsajax
yeptony
yeptony

Reputation: 23

Append an AJAX result to a list

I have a form that creates a Tweet. All tweets for a user are rendered in an unordered list. When a user creates a Tweet, I'd like to append it to the list without having to reload the page using AJAX.

What's wrong with those pieces of code? Any idea to get it working/better?

show.htm.erb

<div class="col-md-6 col-md-offset-3 cat-tweet">
  <h3>Tweets (<%= @cat.tweets.count %>)</h3>
  <% if logged_in? && current_user?(@cat.user) %>
    <%= render 'shared/tweet_form' %>
  <% end %>
  <% if @cat.tweets.any? %>
    <ol class="tweets" id="tweets">
      <%= render @tweets %>
    </ol>
    <%= will_paginate @tweets %>
  <% end %>
</div>

_tweet_form.html.erb

<%= form_for(Tweet.create, remote:true) do |f| %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose a new tweet...", id: "tweet-text-area" %>
  </div>

  <%= hidden_field_tag :cat_id, @cat.id %>

  <%= f.submit "Tweet that!", class: "btn btn-primary",id: "tweet-btn" %>
<% end %>

_tweet.html.erb

<li id="tweet-<%= tweet.id %>">
....
</li>

tweets_controller.rb

def create
    @cat = Cat.find_by(id: params[:cat_id])
    if logged_in? && current_user == @cat.user
      @tweet = @cat.tweets.build(tweet_params)
      respond_to do |format|
        if @tweet.save
          format.js 
          format.html { redirect_to @cat }
        else
          format.html { redirect_to @cat }
        end
      end
    else
      flash[:danger] = "It looks like you're trying to hack us! Go back and try again, but as a gentleman this time."
      redirect_to current_user
    end
  end

create.js.erb

$( "ol#tweets" ).append( "tweet-<%= @tweet.id %>" )

Thanks!

Upvotes: 2

Views: 101

Answers (1)

lorefnon
lorefnon

Reputation: 13105

Your js.erb template does not render the tweet partial. Try something like: 

$( "ol#tweets" ).append( "<%= j render 'tweet', tweet: @tweet %>" )

Upvotes: 1

Related Questions