diff --git a/linkedout.rb b/linkedout.rb
index 249fadc..b00e531 100644
--- a/linkedout.rb
+++ b/linkedout.rb
@@ -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
@@ -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
diff --git a/public/main.css b/public/css/main.css
similarity index 100%
rename from public/main.css
rename to public/css/main.css
diff --git a/public/normalize.css b/public/css/normalize.css
similarity index 100%
rename from public/normalize.css
rename to public/css/normalize.css
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..7586103
--- /dev/null
+++ b/public/js/main.js
@@ -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();
+});
diff --git a/views/layout.erb b/views/layout.erb
index f677a8f..45dff07 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -4,10 +4,10 @@
-
+
-
+
@@ -17,5 +17,10 @@
<%= yield %>
+
+
+
+
+