JS 前端更新视图{不工作}？

Question

当用户创建笔记时，我希望该笔记保存在后端并在前端显示而不刷新页面。

DISCLAIMER: I'm bad with javascript

我发现 javascript 代码可以在不刷新页面的情况下成功将笔记保存到后端，但前端视图没有更新。

inspirations/show.html.erb

<div class="notes-form-background">
  <%= render "notes/form" %>
</div>

notes/_form.html.erb

<%= form_for ([@notable, @note], remote: true) do |f| %>
  <%= f.text_area :notes_text, rows: 4, class: 'form-control', id: 'challenge-name', placeholder: 'Enter Note' %>
  <%= f.date_select :notes_date, :order => [:month, :day, :year] %>
  <%= submit_tag 'Add', :id => 'create_button' %>
<% end %>

<script>
  $('form').submit(function() {  
      var valuesToSubmit = $(this).serialize();
      $.ajax({
          type: "POST",
          url: $(this).attr('action'), //sumbits it to the given url of the form
          data: valuesToSubmit,
          dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
      }).success(function(json){
          console.log("success", json);
      });
      return false; // prevents normal behaviour
  });
</script>

create.js.erb

$(".notes-form-background").innerHTML += "<%= escape_javascript(render(:partial => 'form')) %>"

notes_controller.rb

  def create
    @note = @notable.notes.new(note_params)
    @note.save
    respond_to do |format|
      format.js
    end
  end

rails s

Started POST "/inspirations/155/notes" for 127.0.0.1 at 2017-01-04 23:45:23 -0500
Processing by NotesController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"zxkjlMmonpOr6QKd25OhjDwY7n5HVphO9L/GSpBFHbCR3WOQkr3zbYBERoRQjbU7h4/GfvQiC6RG8/e0FqHoCQ==", "note"=>{"notes_text"=>"asdf", "notes_date(2i)"=>"1", "notes_date(3i)"=>"4", "notes_date(1i)"=>"2017", "conceal"=>"0"}, "inspiration_id"=>"155"}
  User Load (28.6ms)  SELECT  "users".* FROM "users" WHERE "users"."id" =  LIMIT 1  [["id", 21]]
  ActsAsTaggableOn::Tag Load (0.3ms)  SELECT  DISTINCT "tags".* FROM "tags" INNER JOIN "taggings" ON "tags"."id" = "taggings"."tag_id" WHERE "taggings"."tagger_id" =  AND "taggings"."tagger_type" =   ORDER BY taggings_count desc LIMIT 20  [["tagger_id", 21], ["tagger_type", "User"]]
  Inspiration Load (0.2ms)  SELECT  "inspirations".* FROM "inspirations" WHERE "inspirations"."id" =  LIMIT 1  [["id", 155]]
   (0.2ms)  BEGIN
  SQL (0.4ms)  INSERT INTO "notes" ("notes_text", "user_id", "notes_date", "inspiration_id", "created_at", "updated_at") VALUES (, , , , , ) RETURNING "id"  [["notes_text", "asdf"], ["user_id", 21], ["notes_date", "2017-01-04"], ["inspiration_id", 155], ["created_at", "2017-01-05 04:45:23.458645"], ["updated_at", "2017-01-05 04:45:23.458645"]]
   (19.0ms)  COMMIT
  Rendered notes/_form.html.erb (4.5ms)
  Rendered notes/create.js.erb (17.2ms)
Completed 200 OK in 192ms (Views: 55.1ms | ActiveRecord: 48.8ms)

我们如何使前端视图更新以反映创建的新笔记？当前，要查看注释已创建，用户必须手动刷新页面。

Answer 1

注意：我不熟悉 ruby 和你的 dom 结构，所以我把那些留给你去弄清楚

在notes/_form.html.erb

修改脚本标签中的成功回调如下：

<script>
  function updateToDom(data){
  //take the data and create dom elements. 
  }

  $('form').submit(function() {  
      var valuesToSubmit = $(this).serialize();
      $.ajax({
          type: "POST",
          url: $(this).attr('action'), //sumbits it to the given url of the form
          data: valuesToSubmit,
          dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
      }).success(function(json){
          updateDom (valuesToSubmit)
      });
      return false; // prevents normal behaviour
  });
</script>

Answer 2

编辑它：-

inspirations/show.html.erb

<div id="show-all-notes">
</div>
<div class="notes-form-background">
  <%= render "notes/form" %>
</div>

notes/_form.html.erb

<%= form_for ([@notable, @note], remote: true) do |f| %>
  <%= f.text_area :notes_text, rows: 4, class: 'form-control', id: 'challenge-name', placeholder: 'Enter Note' %>
  <%= f.date_select :notes_date, :order => [:month, :day, :year] %>
  <%= submit_tag 'Add', :id => 'create_button' %>
<% end %>

create.js.erb

$('#show-all-notes').append("<%= escape_javascript(render('notes/note', note: @note)) %>");

创建notes/_note.html.erb文件

<p><%= note.notes_text %></p>
<p><%= note.notes_date %></p>

notes_controller.rb

  def create
    @note = @notable.notes.new(note_params)
    @note.save
    respond_to do |format|
      format.js
    end
  end

JS 前端更新视图{不工作}？

JS front end update view {not working}?

javascript

ruby

jquery

ruby-on-rails

ruby-on-rails-3