Rails 4 ajax refreshes partial only after submitting form twice

Question

I am new to rails and have been working on a simple twitter like site.

In my tweets page when the New Tweet form(with ajax) is filled and submitted once the partial (displaying the tweets) doesn't change, on clicking submit again the partial refreshes and shows one extra tweet even though two new tweets have been created (by submitting twice).

If after first submission, I refresh the page in my browser I can see the newly created tweet in the list.

The terminal logs show two tweets with the same content being created.

I use jquery-rails for my javascript.

I use Kaminari for my pagination and commenting it fixes the problem as does removing AJAX.

Here's my code

My tweets controller create action

 def create

     @tweet = Tweet.new(tweet_params)

     @tweetse=Tweet.all.order('created_at DESC')



 @tweets=Kaminari.paginate_array(@tweetse).page(params[:page]).per(8)
   #for my search box
    @tw = Tweet.order('created_at DESC').search(params[:search]) 
    if @tw== nil
      @tweets = Tweet.all.page(params[:page]).per(8)
    else
   @tweets=Kaminari.paginate_array(@tw).page(params[:page]).per(8)

  end


    @tweet.user=current_user

    respond_to do |format|
      if @tweet.save
        format.html { redirect_to tweets_url, notice: 'Tweet was successfully created.' }
        format.json { render action: 'show', status: :created, location: @tweet }
        format.js 

      else
        format.html { render action: 'new' }
        format.json { render json: @tweet.errors, status: :unprocessable_entity }
      end
    end

my _form partial for new tweets

<div id ="forms">
<%= simple_form_for(@tweet,:remote=> true) do |f| %>
  <%= f.error_notification %>

  <div class="form-input">
    <%= f.input :content %>
    <% #@tweet.user =current_user%>
  </div>

  <div class="form-actions">
  <br>

   <button> <%= f.button :submit, :class =>"tweetbutton" %></button>
  </div>

<br>
<% end %>
</div>

My tweets index page

<h1>Listing all tweets</h1>


<div id="forms">

<%=render 'form'%>
</div>
<div>
<%= form_tag tweets_url, :method => 'get',:remote=>true do %>
  <p>
    <%= text_field_tag :search, params[:search] %>
   <button> <%= submit_tag "Search",:remote=>true, :content => nil, :class =>"tweetbutton" %></button>
  </p>
<% end %>


</div>
<h3><%= paginate @tweets %></h3>

<div id="posts">

<%= render 'tweets' %>

</div>

<h3><%= paginate @tweets %></h3>

My Tweets partial (_tweets)

<div id="post">
<table>
  <thead>
  <td></td>
    <tr>
      <th>Content</th>
      <th>Author</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

  </thead>
  <tbody>

    <% @tweets.each do |tweet| %>

      <tr>
        <td><br><br><h3><%= tweet.content %></h3></td>
        <td><br><br><h6><%=link_to tweet.user.name.titleize ,tweet.user %></h6></td>
        <td><br><br><%= link_to 'Show', tweet, :class =>"button2" %></td>
        <% unless current_user!=tweet.user%>


        <td><br><br><%= link_to 'Edit', edit_tweet_path(tweet), :class =>"button1" %></td>
        <td><br><br><%= button_to 'Delete', tweet, :remote => true, method: :delete, data: { confirm: 'Are you sure?' }, :class =>"button3" %></td>
        <% end %>
       </tr>
        <p>                       </p>
        <p></p>
    <% end %>

  </tbody>

</table>

<br>
</div>

My create.js which gets rendered after create action

 $('#posts').html("<%= escape_javascript(render(:partial => 'tweets')).html_safe %>");

And my terminal logs on creating a Tweet "HELLO WORLD" and pressing submit button twice. Two tweets have been created (by submitting twice) but only one tweet shows in the partial

Started POST "/tweets" for 127.0.0.1 at 2014-01-22 17:11:24 +0530
Processing by TweetsController#create as JS
  Parameters: {"utf8"=>"√", "tweet"=>{"content"=>"HELLO WORLD"}}
  User Load (1.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 5 ORDER
BY "users"."id" ASC LIMIT 1
  Tweet Load (5.0ms)  SELECT "tweets".* FROM "tweets" ORDER BY created_at DESC
DEPRECATION WARNING: Calling #find(:all) is deprecated. Please call #all directl
y instead. (called from D:in `find':)
DEPRECATION WARNING: Relation#all is deprecated. If you want to eager-load a rel
ation, you can call #load (e.g. `Post.where(published: true).load`). If you want
 to get an array of records from a relation, you can call #to_a (e.g. `Post.wher
e(published: true).to_a`). (called from D:in `find':)
  CACHE (0.0ms)  SELECT "tweets".* FROM "tweets" ORDER BY created_at DESC
   (0.0ms)  begin transaction
  SQL (3.0ms)  INSERT INTO "tweets" ("content", "created_at", "updated_at", "use
r_id") VALUES (?, ?, ?, ?)  [["content", "HELLO WORLD"], ["created_at", Wed, 22
Jan 2014 11:41:24 UTC +00:00], ["updated_at", Wed, 22 Jan 2014 11:41:24 UTC +00:
00], ["user_id", 5]]
  SQL (1.0ms)  INSERT INTO "activities" ("created_at", "key", "owner_id", "owner
_type", "parameters", "trackable_id", "trackable_type", "updated_at") VALUES (?,
 ?, ?, ?, ?, ?, ?, ?)  [["created_at", Wed, 22 Jan 2014 11:41:24 UTC +00:00], ["
key", "tweet.create"], ["owner_id", 5], ["owner_type", "User"], ["parameters", "
--- {}\n"], ["trackable_id", 440], ["trackable_type", "Tweet"], ["updated_at", W
ed, 22 Jan 2014 11:41:24 UTC +00:00]]
   (9.0ms)  commit transaction
DEPRECATION WARNING: The file C:/Sites/2014/Twitter/app/views/tweets/_tweets did
 not specify a template handler. The default is currently ERB, but will change t
o RAW in the future. (called from _app_views_tweets_create_js___531005842_370065
48 at C:/Sites/2014/Twitter/app/views/tweets/create.js:5)
  User Load (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER
BY "users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  Rendered tweets/_tweets (47.0ms)
DEPRECATION WARNING: The file C:/Sites/2014/Twitter/app/views/tweets/_tweets did
 not specify a template handler. The default is currently ERB, but will change t
o RAW in the future. (called from _app_views_tweets_create_js___531005842_370065
48 at C:/Sites/2014/Twitter/app/views/tweets/create.js:10)
  Rendered tweets/_tweets (13.0ms)
  Rendered tweets/create.js (76.0ms)
Completed 200 OK in 202ms (Views: 109.0ms | ActiveRecord: 19.0ms | Solr: 0.0ms)


Started POST "/tweets" for 127.0.0.1 at 2014-01-22 17:11:31 +0530
Processing by TweetsController#create as JS
  Parameters: {"utf8"=>"√", "tweet"=>{"content"=>"HELLO WORLD"}}
  User Load (1.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 5 ORDER
BY "users"."id" ASC LIMIT 1
  Tweet Load (7.0ms)  SELECT "tweets".* FROM "tweets" ORDER BY created_at DESC
DEPRECATION WARNING: Calling #find(:all) is deprecated. Please call #all directl
y instead. (called from D:in `find':)
DEPRECATION WARNING: Relation#all is deprecated. If you want to eager-load a rel
ation, you can call #load (e.g. `Post.where(published: true).load`). If you want
 to get an array of records from a relation, you can call #to_a (e.g. `Post.wher
e(published: true).to_a`). (called from D:in `find':)
  CACHE (0.0ms)  SELECT "tweets".* FROM "tweets" ORDER BY created_at DESC
   (0.0ms)  begin transaction
  SQL (4.0ms)  INSERT INTO "tweets" ("content", "created_at", "updated_at", "use
r_id") VALUES (?, ?, ?, ?)  [["content", "HELLO WORLD"], ["created_at", Wed, 22
Jan 2014 11:41:31 UTC +00:00], ["updated_at", Wed, 22 Jan 2014 11:41:31 UTC +00:
00], ["user_id", 5]]
  SQL (1.0ms)  INSERT INTO "activities" ("created_at", "key", "owner_id", "owner
_type", "parameters", "trackable_id", "trackable_type", "updated_at") VALUES (?,
 ?, ?, ?, ?, ?, ?, ?)  [["created_at", Wed, 22 Jan 2014 11:41:31 UTC +00:00], ["
key", "tweet.create"], ["owner_id", 5], ["owner_type", "User"], ["parameters", "
--- {}\n"], ["trackable_id", 441], ["trackable_type", "Tweet"], ["updated_at", W
ed, 22 Jan 2014 11:41:31 UTC +00:00]]
   (13.0ms)  commit transaction
DEPRECATION WARNING: The file C:/Sites/2014/Twitter/app/views/tweets/_tweets did
 not specify a template handler. The default is currently ERB, but will change t
o RAW in the future. (called from _app_views_tweets_create_js___531005842_370065
48 at C:/Sites/2014/Twitter/app/views/tweets/create.js:5)
  User Load (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER
BY "users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (1.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  CACHE (0.0ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "
users"."id" ASC LIMIT 1  [["id", 5]]
  Rendered tweets/_tweets (62.0ms)
DEPRECATION WARNING: The file C:/Sites/2014/Twitter/app/views/tweets/_tweets did
 not specify a template handler. The default is currently ERB, but will change t
o RAW in the future. (called from _app_views_tweets_create_js___531005842_370065
48 at C:/Sites/2014/Twitter/app/views/tweets/create.js:10)
  Rendered tweets/_tweets (18.0ms)
  Rendered tweets/create.js (104.0ms)
Completed 200 OK in 279ms (Views: 151.0ms | ActiveRecord: 27.0ms | Solr: 0.0ms)

score 0 · Answer 1 · answered Jan 23 '14 at 13:04

it's because @tweetse query got executed before @tweet object saved.

@tweetse query executed when it used by Kaminari.paginate_array, so moving the pagination to after @tweet.save should fix it :)

also it might be cleaner to move pagination process to separated private method

Rails 4 ajax refreshes partial only after submitting form twice

1 Answers1