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

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" = $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

sessionFactory.currentSession()

备注/ _form.html.erb

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

<强> create.js.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 %>

创建 notes / _note.html.erb 文件

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

<强> notes_controller.rb

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

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>

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

2 个答案: