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.
Aucun commentaire:
Enregistrer un commentaire