Skip to content

finished twitmaker except stretch #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MitchPateman wants to merge 8 commits into
base: master
Choose a base branch
from
Open

finished twitmaker except stretch #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ba8d5bc
Starting twitmaker now in jquery-ajax-html branch
MitchPateman Jul 10, 2016
2fb9808
Finished the post request section, and prepend to the top
MitchPateman Jul 10, 2016
36ba538
Starting to switch to json
MitchPateman Jul 10, 2016
73ff329
refactored controller and made partial, and it now has formatted json
MitchPateman Jul 10, 2016
a74a4d6
finished twitmaker except stretch
MitchPateman Jul 10, 2016
08a6c7b
Merge branch 'jquery-ajax-json'
MitchPateman Jul 10, 2016
2695ad6
Updated with jquery to make the enter on keyboard to equal a click of…
MitchPateman Jul 10, 2016
ab5afa6
Delete is not quite working, troubleshoot
MitchPateman Jul 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/)).
Expand All @@ -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`.

Expand All @@ -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`
Expand Down
47 changes: 47 additions & 0 deletions app/assets/javascripts/tweets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = $('<button>').addClass('delete-btn').text('Delete')


$.ajax({
url: $(this).attr('action'),
method: 'POST',
data: $(this).serialize(),
dataType: 'json'
}).done(function(responseData){
var twit = $('<li>').addClass('tweet')
.append('<p>' + responseData.message + '</p>')
.append('<time>' + responseData.created_at + '</time><br>')
.append(btn);
$(twit).prependTo('.tweets');
$('#tweet_message').val('');
});
});// end of on submit

//Delete Tweet
$('.delete-btn').on('click', function(){
var self = $(this)
$.ajax({
url: '/tweets/' + self.attr('id'),
method: 'delete',
data: {},
dataType: 'html'
}).done(function(){
console.log('YO');
self.parent().remove();
});

}); //end of delete


}); //end doc ready
49 changes: 31 additions & 18 deletions app/controllers/tweets_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,38 @@
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
@tweet = Tweet.find(params[:id])
@tweet.destroy
flash[:success] = "Tweet Deleted"
render partial: @tweet
end


private

def tweet_params
params.require(:tweet).permit(:message)
end
end
5 changes: 5 additions & 0 deletions app/views/tweets/_tweet.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<li class="tweet">
<p><%= tweet.message %></p>
<time><%= tweet.created_at.strftime('%b %e, %l:%M %p') %></time> <br />
<!-- <button class="btn"> Delete </button> -->
</li>
14 changes: 6 additions & 8 deletions app/views/tweets/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<ul class="tweets">
<% @tweets.each do |tweet| %>
<li class="tweet">
<p><%= tweet.message %></p>
<time><%= tweet.created_at.strftime('%b %e, %l:%M %p') %></time>
</li>
<% end %>
<% @tweets.each do |tweet| %>
<%= render tweet %>
<% end %>

</ul>

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