From ba8d5bcdf8b2967a23c62abf5d503cea0b8f6b3c Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 14:50:35 -0400 Subject: [PATCH 1/7] 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/7] 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/7] 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/7] 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 %> From a74a4d63a631ffff6a6f59b4c9df254b672c4cf1 Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 17:41:43 -0400 Subject: [PATCH 5/7] finished twitmaker except stretch --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 43e1e1c..da09e13 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ Receiving HTML from the server is fine when you're the one writing the code on b When we're dealing with more generic situations where we want to present the same data in different views or we're requesting data from a third-party service, receiving HTML as a response is really limiting. We may want to present the data differently than how the server is sending it to us! + #### It's Coding Time! Start by making a branch called `jquery-ajax-json`. From 2695ad68242442c48a3bd7c4b3d8866be030f4dd Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 19:30:09 -0400 Subject: [PATCH 6/7] Updated with jquery to make the enter on keyboard to equal a click of the submit --- README.md | 2 ++ app/assets/javascripts/tweets.js | 9 ++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3818c17..8c0ef6a 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ On the server you'll have to refactor your action so that it returns JSON rather --- + + ## Stretch Assignments 1. Submit the form when pressing `return`, but not when pressing `option-return` diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js index 7aee09d..09aebaf 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -1,6 +1,13 @@ // 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 +$(function(){ //doc readyy + + $('#new_tweet').keyup(function(event){ + if(event.keyCode == 13){ + $('#create-tweet').click(); + } + }); + $('#new_tweet').on('submit', function(event){ event.preventDefault(); From ab5afa6aa74e8e413bdca8b249c81ed65dc8e4a3 Mon Sep 17 00:00:00 2001 From: Mitch Pateman Date: Sun, 10 Jul 2016 22:29:58 -0400 Subject: [PATCH 7/7] Delete is not quite working, troubleshoot --- app/assets/javascripts/tweets.js | 25 +++++++++++++++++++++++-- app/controllers/tweets_controller.rb | 4 ++++ app/views/tweets/_tweet.html.erb | 3 ++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/tweets.js b/app/assets/javascripts/tweets.js index 09aebaf..cbf6c4f 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -2,14 +2,18 @@ // All this logic will automatically be available in application.js. $(function(){ //doc readyy +//link enter key with submit $('#new_tweet').keyup(function(event){ if(event.keyCode == 13){ $('#create-tweet').click(); } }); +//Submit tweet $('#new_tweet').on('submit', function(event){ event.preventDefault(); + var btn = $('