Блог

Я пытаюсь обновить свой div при отправке формы, но он не отображается с новыми данными.

в моем js:

 $('#myform').submit(function() {
  var valuesToSubmit = $(this).serialize();
  $(this).find('textarea').addClass('uneditable-input').attr('disabled', 'disabled');
  $.ajax({
    url: $(this).attr('action'), //sumbits it to the given url of the 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();
    });
  });
  return false; // prevents normal behaviour 
});
 

контроллер сообщений:

 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 do |format|
    @search = Post.search do #Post.search do
      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
 

моя форма в представлении:

 <%= form_for(Post.new, :html => {:id => "myform"}, :remote => true) do |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; ") do %>
      submit
    <% end %>
  </div>
<% end %>
</div>
</div>
</div>
<% end %>
 

мой js работает, я получаю оповещения и в консоли, которую я получаю rendered posts/_post.html.erb , но на странице не отображаются новые данные, если я не обновлю вручную.

Есть ли у меня dea?

Спасибо

Вид

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

Частичный:

 <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>
 

Я вижу несколько способов сделать это. Ваше решение содержит 2. Сначала отправить данные с помощью ajax и установить с ним html:

 # 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);
}
 

Во-вторых, отправлять данные и обновлять их через 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}
 

или создайте файл create.js.erb , в который вы можете поместить

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

PS: возможно, проблема в одинарных кавычках 2 раза — $('#indexstream').html('<%= j render :partial => 'post', :collection => @posts, :as => :post, :layout => false %>');

Я думаю, что ‘post’ может быть изменен на :post

Надеюсь, это поможет.

Обновить

Попробуйте добавить @posts = @search.results после сохранения:

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

В контроллере пришлось изменить format.js чтобы

 Format.js { render @post }
 

В js

 Success: function(event)
       {
           $('#indexstream').prepend(event):

        }
 

И все это прекрасно работает