Skip to content

Skills and jobs created asynchronously #5

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

Merged
tannerwelsh merged 5 commits into from
Oct 30, 2014
Merged

Skills and jobs created asynchronously #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
280297b
Move CSS files into own css directory
tannerwelsh Oct 30, 2014
3a8689e
New skills are created asynchronously; add jQuery
tannerwelsh Oct 30, 2014
ad8cbd6
Send all data from new skill, not just name
tannerwelsh Oct 30, 2014
b3fe17b
Refactor main.js to use named functions
tannerwelsh Oct 30, 2014
584754b
User can create new jobs from résumé show page asynchronously
tannerwelsh Oct 30, 2014
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
12 changes: 10 additions & 2 deletions linkedout.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@ def default_user
job = Job.new(job_attrs)
job.save

redirect "/"
if request.xhr?
partial :'partials/job', :locals => { :job => job }
else
redirect "/"
end
end

put "/jobs/edit" do
Expand All @@ -68,7 +72,11 @@ def default_user
skill = Skill.new(skill_attrs)
skill.save

redirect "/"
if request.xhr? # this will return true when handling an AJAX request
partial :'partials/skill', :locals => { :skill => skill }
else
redirect "/"
end
end

put "/skills/edit" do
Expand Down
0 public/main.css → public/css/main.css
View file
Open in desktop
File renamed without changes.
0 public/normalize.css → public/css/normalize.css
View file
Open in desktop
File renamed without changes.
78 changes: 78 additions & 0 deletions public/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
var createNewSkillsOnSubmit = function() {
var $newSkillForm = getNewSkillForm();

// Bind to the "submit" event of the new skill form
$newSkillForm.submit(function (evt) {
// Prevent the submit from sending an HTTP POST request
// Instead, we'll handle the request with AJAX
evt.preventDefault();

// Grab the form data and serialize it as a string in
// standard URL-encoded notation
var skillFormData = $(this).serialize();

// Send a POST request asynchronously to the "/skills"
// route on the server, passing the serialized form data
// in the request body.
//
// When a user submits the form to create a new skill,
// this will send a request to the server to save this
// skill to the database
//
// The insertNewSkillIntoDOM function (argument 3) will
// be executed when the browser receives a response from
// the server. It is passed the response body, which in
// this case is a snippet of HTML representing the newly-
// created skill.
$.post("/skills", skillFormData, insertNewSkillIntoDOM);
});
};

var getNewSkillForm = function() {
// Select the new skill form using its name attribute
return $('form[name="new_skill"]');
};

var insertNewSkillIntoDOM = function(newSkillHTML) {
var $newSkillForm = getNewSkillForm();

// Add the new skill to the list, just before the form's
// parent 'li' element
$newSkillForm.parent('li').before(newSkillHTML);

// Reset the form so that new skills can be added
$newSkillForm.get(0).reset();
};


var createNewJobsOnSubmit = function() {
var $newJobForm = getNewJobForm();

$newJobForm.submit(function (evt) {
evt.preventDefault();

var jobFormData = $(this).serialize();

$.post("/jobs", jobFormData, insertNewJobIntoDOM);
});
};

var getNewJobForm = function() {
return $('form[name="new_job"]');
};

var insertNewJobIntoDOM = function(newJobHTML) {
var $newJobForm = getNewJobForm();

$newJobForm.parent('li').before(newJobHTML);

$newJobForm.get(0).reset();
};


// Wait to execute all code until the document is ready
// (i.e. all of the DOM nodes have been loaded)
$(document).ready(function() {
createNewSkillsOnSubmit();
createNewJobsOnSubmit();
});
9 changes: 7 additions & 2 deletions views/layout.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@

<!-- Use normalize.css for cross-browser consistency
http://necolas.github.io/normalize.css/ -->
<link rel="stylesheet" href="/normalize.css">
<link rel="stylesheet" href="/css/normalize.css">

<!-- Load main stylesheet -->
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<header>
Expand All @@ -17,5 +17,10 @@

<%= yield %>

<!-- Load jQuery version 1.11.1 (uncompressed) -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>

<!-- Load own scripts -->
<script type="text/javascript" src="/js/main.js"></script>
</body>
<html>