diff --git a/README.md b/README.md index 43e1e1c..8c0ef6a 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,17 @@ 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! + + +#### 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/)). @@ -27,12 +31,15 @@ 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. 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`. @@ -43,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 dee720f..cbf6c4f 100644 --- a/app/assets/javascripts/tweets.js +++ b/app/assets/javascripts/tweets.js @@ -1,2 +1,49 @@ // Place all the behaviors and hooks related to the matching controller here. // 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 = $('