Tuesday, 15 March 2011

javascript - Rails 4 ajax not rendering new data -



javascript - Rails 4 ajax not rendering new data -

i'm trying update div on form submit doesn't render new data.

in js:

$('#myform').submit(function() { var valuestosubmit = $(this).serialize(); $(this).find('textarea').addclass('uneditable-input').attr('disabled', 'disabled'); $.ajax({ url: $(this).attr('action'), //sumbits given url of form data: valuestosubmit, type: "post", success: function(event, data, status, xhr){ alert("hello"); $('#indexstream').html("<%= j render :partial => 'post', :collection => @posts, :as => :post %>"); } }).complete(function(){ $("#disabletext").removeclass('uneditable-input').removeattr('disabled', 'disabled').val(''); $("#userlink").hide().show("slow").effect('highlight', {color: '#e5f2f7'}, 3000); $(function() { $("abbr.timeago").timeago(); }); }); homecoming false; // prevents normal behaviour });

posts controller:

def create @post = post.new(post_params) @post.email = current_user.username @post.user_id = current_user.id @post.firstname = current_user.firstname @post.lastname = current_user.lastname @post.avatar = current_user.avatar @post.school = current_user.school respond_to |format| @search = post.search #post.search fulltext params[:search] with(:school, current_user.school) end @posts = @search.results if @post.save format.html { redirect_to posts_path, :notice => '<i class="fa fa-check fa-5x"></i>'.html_safe } format.json {render json: @post, status: :created, location: @post } # format.json { render action: 'index', status: :created, location: @post } puts "----------#{@posts.count}-------------" format.js { render :partial => 'post', :collection => @posts, :as => :post, :layout => false } # format.js {"$('#indexstream').replacewith('<%= escape_javascript(render @post) %>');".html_safe} puts "-------------#{request.format}----------------" else format.html { render action: 'new' } format.json { render json: @post.errors, status: :unprocessable_entity } #format.js {alert("couldn't create post")} end end end

my form in view:

<%= form_for(post.new, :html => {:id => "myform"}, :remote => true) |f| %> <%= hidden_field_tag :user_id, current_user.id %> <%= f.hidden_field :price, :as => :hidden, :value => 0 %> <%= f.hidden_field :description, :as => :hidden, :value => "status" %> <div class="field" style="margin-top: -10px; color: #4ac948;"> <h2 style="font-weight: bold; font-size: 180%;">status post:</h2> <%= f.text_area :title, :class => "fruute-input", :id => "disabletext", :size => 29, :autofocus => true, :style => "height: 60px; line-height: 1; width: 230px; " %> </div> <br/> <i class="fa fa-camera fa-2x"></i>(optional): <%= f.file_field :asset1 %> <hr/> <br/> <div class="actions"> <%= button_tag(type: 'submit', class: "new-button2", style: "width: 242px; height: 50px; ") %> submit <% end %> </div> <% end %> </div> </div> </div> <% end %>

my js works, alerts , in console rendered posts/_post.html.erb page doesn't show new info unless refresh manually.

any dea?

thanks

view

<div id="indexstream"> <%= render :partial => 'post' , :collection => @posts, :as => :post %> </div>

partial:

<div id="userlink"> <%= image_tag post.avatar.url(:small), :style => "border-radius: 5px; border: 1px solid #e1e8ed;" %> <%= post.firstname %> <%= " " %> <%= post.lastname %><%= " " %> <%= link_to post.email, user_path(post.user_id), {class: "usernamelink", style: "font-weight: normal;"} %> <abbr class="timeago" title="<%= post.created_at.getutc.iso8601 %>" style="float: right; margin-right: 5px; font-size:90%; margin-top: 12px; color: #8899a6; text-decoration: none !important;"> <%= post.created_at.to_s %> </abbr> <br/><br/> <% unless post.description == "status" %> <div style="background: #ef4836; width: 10px; height: 5px; float: right; margin-top: -58px; text-align: center; border-radius: 10px; color: #fff; padding-top: 2px; padding-bottom: 2px; margin-right: 5px;"> </div> <h1 style="style= z-index: 100000; color: #3399ff "><%= link_to post.title, post_path(post), {class: "usernamelink", style: "color: #3399ff;"} %></h1> <% if post.asset1.file? %><%= image_tag post.asset1.url(:small) %> <% end %> <% if post.asset2.file? %><%= image_tag post.asset2.url(:small) %> <% end %> <% if post.asset3.file? %><%= image_tag post.asset3.url(:small) %> <% end %> <% if post.asset4.file? %><%= image_tag post.asset4.url(:small) %> <% end %> <br/><br/> <i class="fa fa-map-marker fa-lg" style="margin-right: 5px; margin-left: 5px;"></i> <%= post.school %> <div style="float: right; text-align: left; margin-right: 20px;"><i class="fa fa-usd "></i><%= post.price %></div> <% end %> <% if post.description == "status" %> <div style="background: #2ecc71; width: 10px; height: 5px; float: right; margin-top: -58px; text-align: center; border-radius: 10px; color: #fff; padding-top: 2px; padding-bottom: 2px; margin-right: 5px;"> </div> <h1><%= auto_link(post.title) %></h1>

i see few methods this. solution contains 2. first send info ajax , set html it:

# create action if @post.save format.html { redirect_to posts_path, :notice => '<i class="fa fa-check fa-5x"></i>'.html_safe } format.json {render json: @post, status: :created, location: @post } format.js { render :partial => 'post', :collection => @posts, :as => :post, :layout => false } # js success: function(event, data, status, xhr){ alert("hello"); $('#indexstream').html(data); }

second send info , update through js:

# js success: function(event, data, status, xhr){ alert("hello"); console.log(status); } # create format.js { "$('#indexstream').html("<%= j render :partial => 'post', :collection => @posts, :as => :post, :layout => false %>");".html_safe}

or create file create.js.erb can put

$('#indexstream').html('<%= j render :partial => "post", :collection => @posts, :as => :post, :layout => false %>'); alert("works!");

ps: maybe problem in single quotes 2 times - $('#indexstream').html('<%= j render :partial => 'post', :collection => @posts, :as => :post, :layout => false %>');

i think 'post' can changes :post

hope helps.

update

try add together @posts = @search.results after save:

@posts = @search.results if @post.save @posts = @search.results ....

javascript ruby-on-rails ajax ruby-on-rails-4

No comments:

Post a Comment