From ba8d5bcdf8b2967a23c62abf5d503cea0b8f6b3c Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 14:50:35 -0400 Subject: [PATCH 1/4] Starting twitmaker now in jquery-ajax-html branch --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 43e1e1c..58ca533 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Our first step will be to take our normal request-response cycle and update it t This makes your app snappier and more interactive for your users! -#### It's Coding Time! +#### It's Coding Time!! Start by making a branch called `jquery-ajax-html`. Use jQuery to send your AJAX request to the server (using [`$.ajax`](http://api.jquery.com/jQuery.ajax/)). From 2fb9808932508b85410bc5d9cea9c8f1694ba036 Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 15:33:33 -0400 Subject: [PATCH 2/4] Finished the post request section, and prepend to the top --- app/assets/javascripts/tweets.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js index dee720f..f473c30 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -1,2 +1,17 @@ // Place all the behaviors and hooks related to the matching controller here. // All this logic will automatically be available in application.js. +$(function(){ //doc ready + $('#new_tweet').on('submit', function(event){ + event.preventDefault(); + + $.ajax({ + url: $(this).attr('action'), + method: 'POST', + data: $(this).serialize(), + dataType: 'html' + }).done(function(responseData){ + //console.log(responseData); + $(responseData).prependTo('.tweets'); + }); + });// end of on submit +}); //end doc ready From 36ba538f26eae096fda494ff644b89b254bec900 Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 16:17:28 -0400 Subject: [PATCH 3/4] Starting to switch to json --- README.md | 6 ++++++ app/assets/javascripts/tweets.js | 1 - 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 58ca533..a0cad98 100644 --- a/README.md +++ b/README.md @@ -9,12 +9,16 @@ This assignment will give you practice implementing AJAX requests with jQuery. Y **To get started, you can fork the Twitmaker repository here: https://github.com/bitmakerlabs/twitmaker** + + ## Part 1: jQuery AJAX request with HTML response Our first step will be to take our normal request-response cycle and update it to use an AJAX request. The benefit of doing this is that rather than re-rendering the entire page, including the head section, JavaScript, stylesheets and full layout, we'll only have to render the part of the page that changes. This makes your app snappier and more interactive for your users! + + #### It's Coding Time!! Start by making a branch called `jquery-ajax-html`. @@ -27,6 +31,8 @@ When the server receives the request to create a new Tweet, instead of redirecti Finally, use jQuery DOM manipulation to update the list of tweets by adding the HTML response from the server to the top. + + ## Part 2: jQuery AJAX request with JSON response Receiving HTML from the server is fine when you're the one writing the code on both the client and the server, since you know exactly what markup is required. diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js index f473c30..7df9d96 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -10,7 +10,6 @@ $(function(){ //doc ready data: $(this).serialize(), dataType: 'html' }).done(function(responseData){ - //console.log(responseData); $(responseData).prependTo('.tweets'); }); });// end of on submit From 73ff3296388d9c86df61bf338eeb5c77bd3a3b45 Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 17:40:05 -0400 Subject: [PATCH 4/4] refactored controller and made partial, and it now has formatted json --- app/assets/javascripts/tweets.js | 9 ++++-- app/controllers/tweets_controller.rb | 45 +++++++++++++++++----------- app/views/tweets/_tweet.html.erb | 4 +++ app/views/tweets/index.html.erb | 14 ++++----- 4 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 app/views/tweets/_tweet.html.erb diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js index 7df9d96..7aee09d 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -8,9 +8,14 @@ $(function(){ //doc ready url: $(this).attr('action'), method: 'POST', data: $(this).serialize(), - dataType: 'html' + dataType: 'json' }).done(function(responseData){ - $(responseData).prependTo('.tweets'); + var twit = $('
  • ').addClass('tweet') + .append('

    ' + responseData.message + '

    ') + .append('') + + $(twit).prependTo('.tweets'); + $('#tweet_message').val(''); }); });// end of on submit }); //end doc ready diff --git a/app/controllers/tweets_controller.rb b/app/controllers/tweets_controller.rb index 2da1958..684f07c 100644 --- a/app/controllers/tweets_controller.rb +++ b/app/controllers/tweets_controller.rb @@ -1,25 +1,34 @@ class TweetsController < ApplicationController - def index - @tweets = Tweet.all.order(created_at: :desc) - @tweet = Tweet.new - end + def index + @tweets = Tweet.all.order(created_at: :desc) + @tweet = Tweet.new + end - def create - @tweet = Tweet.new(tweet_params) + def show + @tweet = Tweet.find(params[:id]) + end - if @tweet.save - redirect_to tweets_path - else - render :index - end - end + def create + @tweet = Tweet.new(tweet_params) - def destroy - end + if @tweet.save + respond_to do |format| + format.html {redirect_to tweets_path} + format.json { render json: @tweet } + end + else + render :index + end + end - private - def tweet_params - params.require(:tweet).permit(:message) - end + def destroy + end + + + private + + def tweet_params + params.require(:tweet).permit(:message) + end end diff --git a/app/views/tweets/_tweet.html.erb b/app/views/tweets/_tweet.html.erb new file mode 100644 index 0000000..280292a --- /dev/null +++ b/app/views/tweets/_tweet.html.erb @@ -0,0 +1,4 @@ +
  • +

    <%= tweet.message %>

    + +
    • diff --git a/app/views/tweets/index.html.erb b/app/views/tweets/index.html.erb index 16b0a94..f6f0ead 100644 --- a/app/views/tweets/index.html.erb +++ b/app/views/tweets/index.html.erb @@ -1,13 +1,11 @@
      - <% @tweets.each do |tweet| %> -
    • -

      <%= tweet.message %>

      - -
      • - <% end %> + <% @tweets.each do |tweet| %> + <%= render tweet %> + <% end %> +
    <%= form_for @tweet do |f| %> - <%= f.text_area :message, placeholder: "What did you learn today?" %> - <%= f.submit "Tweet", id: "create-tweet" %> + <%= f.text_area :message, placeholder: "What did you learn today?" %> + <%= f.submit "Tweet", id: "create-tweet" %> <% end %>