JS front end update view {not working}?

Question

When a user creates a note I want that note to save on the back-end and show on the front-end without refreshing the page.

DISCLAIMER: I'm bad with javascript

I found javascript code that successfully saves the note to the back-end without refreshing the page, but the front-end view isn't updating.

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

How can we make the front-end view update to reflect the new note that was created? Currently to see that the note was created a user has to manually refresh the page.

Shamsul Haque · Accepted Answer · 2017-01-05 05:40:59Z

1

Edit it:-

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)) %>");

Create notes/_note.html.erb file

<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

answered Jan 5, 2017 at 5:40

Shamsul Haque

2,4512 gold badges19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AnthonyGalli.com Over a year ago

Henceforth you shall be known as Railsman! Change that "S" to an "R" ;) Do love the profile pic haha

Umang Gupta · Accepted Answer · 2017-01-05 05:17:24Z

Note : I m not well versed with ruby and neither your dom structure, so I left those for you to figure out

In notes/_form.html.erb

Modify success call back in the script tag as below :

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

Collectives™ on Stack Overflow

JS front end update view {not working}?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related