JS前端更新視圖{不工作}？

Question

當用戶創建一個便箋我想那筆記保存在後端和前端展現而無需刷新頁面。

免責聲明：我感覺不好用JavaScript

我發現JavaScript代碼，成功地保存筆記到後端而無需刷新頁面，但前端的觀點並沒有更新。

啓發/ show.html.erb

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

筆記/ _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 

軌小號

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" = $1 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" = $1 AND "taggings"."tagger_type" = $2 ORDER BY taggings_count desc LIMIT 20 [["tagger_id", 21], ["tagger_type", "User"]] 
    Inspiration Load (0.2ms) SELECT "inspirations".* FROM "inspirations" WHERE "inspirations"."id" = $1 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 ($1, $2, $3, $4, $5, $6) 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

編輯： -

啓發/ show.html.erb

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

筆記/ _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)) %>"); 

創建筆記/ _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 

Answer 2

注：我不是很好用紅寶石和你都不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>