We Keep Coding

trouble using create method with AJAX

I am trying to use AJAX functionality in order to create a new Task in a simple ToDo list application.
Currently the list is set up like this:
<h2> TO DO </h2>
<div class="wrapper">
<ul id="incomplete">
<% #task.each do |f| %>
<% if f.complete == false %>
<div id="<%= f.id %>">
<p class= "title"><%= f.title %></p>
<%= form_for f, remote: true do |task| %>
<%= task.check_box :complete, class: "check_box" %>
<%= task.submit %>
<% end %>
</div>
<% end %>
<% end %>
</ul>
</div>
<h2> COMPLETED </h2>
<div class="wrapper">
<ul id="completed">
<% #task.each do |f| %>
<% if f.complete == true %>
<div id="<%= f.id %>">
<p class="title"><%= f.title %></p>
<%= form_for f, remote: true do |task| %>
<%= task.check_box :complete, class: "check_box" %>
<%= task.submit %>
<% end %>
</div>
<% end %>
<% end %>
</ul>
</div>
<p id="new_link"><%= link_to "New Task", new_task_path, remote: true %></p>
<div id="new_task">
</div>
When the "New Task" link is pressed, it executes a js file which loads the following partial:
<%= form_for #task, remote: true do |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.submit "Create" %>
<% end %>
My create method is below:
def create
#task = Task.new(task_params)
#task.save
respond_to do |format|
format.html
format.js
end
end
When I remove the "remote: true" from my partial form, page resets and the new task appears in the new , however, when I do use the "remote: true", and execute my create.js.erb file, nothing is changed in the DOM. Here is my create.js.erb file:
$('#incomplete').append($("#<%= #task.id %>"));
console.log("<%= #task.title %> has been saved.");
I'm not receiving any errors in my consoles, and the console.log line on the create.js.erb logs to the console without a problem the task title and the rest of the string.
I'm pretty lost in why the create.js.erb file is not manipulating the DOM. This code provides no response visually, only the post to the console.

Rails 5: Trying to render divs with a single partial but keep the div class unique so that JQuery doesn't fire on all partials

A bit of a confusing title.
I am trying to implement a bit of a reddit like comment system. So that you can view a Post and add a Comment to it which is polymorphic. Or, comment on another Comment.
My view looks like so:
<h2>Post:</h2>
<div class="well">
<p>
<strong>Title:</strong>
<%= #post.title %>
</p>
<% if #post.description %>
<p>
<strong>Description:</strong>
<%= #post.description %>
</p>
<% end %>
</div>
<% if current_user %>
<%= render "shared/comment_form" %>
<% else %>
<p>Log in to add comments</p>
<% end %>
<% if #post.comments.any? %>
<%= render "shared/comment_list" %> # Another comment_form inside of this partial
<% else %>
<p>No comments yet</p>
<% end %>
Inside of comment_list is another rendering of comment_form so that you can comment on a comment:
<h2>Comments</h2>
<ul>
<% #post.comments.each do |co| %>
<li><%= co.body %></li>
<%= render "shared/comment_form" if current_user %>
<% end %>
</ul>
Finally, my comment form itself:
<div id="comment-form" class="form-group">
<%= form_for #comment, remote: true, url: post_comments_path(#post) do |f| %>
<%= f.text_area :body, required: true, rows: 5, class: "form-control" %>
<%= f.hidden_field :commentable_id, :value => #post.id %>
<%= f.hidden_field :commentable_type, :value => #post.class.name %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<br>
<%= f.submit class: "btn btn-primary" %>
<% end %>
</div>
<span id="add-comment">Add a comment</span>
And the Jquery code that acts on the comment_form:
$(document).on('turbolinks:load', function() {
$("#comment-form").hide();
$('#add-comment').click( function() {
$("#comment-form").fadeToggle("fast");
($("#add-comment").text() === "Cancel") ? $("#add-comment").text("Add comment") : $("#add-comment").text("Hide");
});
});
My question is:
How could I separate these divs so that Jquery doesn't fire on all instances of id="comment-form? I would like to pass in an erb tag like <%= #post.class.name %><%= #post.id %>, but again, keep the variable universal. Then, how could I implement that unique id name in my JQuery code.
Edit: I got one part of my question solved. I left the rest of what I wasn't able to do up for everyone to see.

You could use prev() like this:
$(document).ready(function() {
$('.comment-form').hide();
$('.add-comment').click( function(event) {
// Store the button which has just been clicked on a variable
var eventTarget = $(event.target);
// Find the previous element with the #comment-form and id and toggle it
eventTarget.prev('.comment-form').fadeToggle('fast');
// Use the eventTarget Again
(eventTarget.text() === 'Cancel') ? eventTarget.text('Add comment') : eventTarget.text('Cancel');
});
});
You can see this in action here: http://codepen.io/rebagliatte/pen/MbKNJv

Use Jquery to show form when clicking "Add Object" button in Rails app

I'm trying to make an "Add Car" button that when clicked shows the form that the user uses to add a car to their profile. I think I have the jQuery right, but I'm unsure of how to connect the button id and form to the script to make it work right. I currently have:
home.html.erb
<div class="row">
<aside class="col-md-4">
<section class="user_info" %>
<%= render 'shared/user_info' %>
</section>
<%= link_to "Add Car", shared/car_form, id: "add", class: "btn btn-lg btn-primary" %> //button that I want to hide/show the form
<section class="car_form">
<%= render 'shared/car_form' %> // current version that shows the form without having to click a button
</section>
</aside>
<div class="col-md-8">
<h3>My Cars</h3>
<%= render 'shared/feed' %>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('shared/car_form').hide(); // inserted form id, hides form
$('add').click(function() { // inserted button id
$('shared/car_form').show(); // inserted form id, shows form
});
});
</script>
And here is the car form, located in the "shared" folder
_car_form.html.erb
<%= form_for(#car, html: {multipart: true}) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<h3> Add Your Car</h3>
<div class="field">
<%= f.text_area :year, placeholder: "Year i.e. '1993" %>
<%= f.text_area :brand, placeholder: "Brand i.e. 'Ford'"%>
<%= f.text_area :model, placeholder: "Model i.e. 'Mustang'" %>
<%= f.text_area :vin, placeholder: "17 digit VIN number" %>
<%= f.text_area :mileage, placeholder: "Current Car Mileage" %>
</div>
<%= f.submit "Add Car", class: "btn btn-primary" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
<script type="text/javascript">
$('#car_picture').bind('change', function() {
size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert('Maximum file size is 5MB. Please choose a smaller file.');
}
});
</script>
jQuery has been added to the gem file and installed. Need help implementing it.

$('.btn-primary').on('click',function(evt) {
$('.car_form').show();
});

Javascript and Ruby Sidescrolling

So im working on a RoR app and would appreciate a bit of help with something. In this app, I've got a series of discussions, posted by users, with comments below, also posted by users. In terms of design, i thought it would be cool if each discussion would take up the entire screen with a button to the right of it. pressing this button would cause the view to move and reveal another discussion. Any suggestions about how I would go about doing this? heres the discussion partial I have currently. thanks!
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'>
<% content_for :script do %>
<%= javascript_include_tag 'hover_content' %>
<% end %>
<% #micropost = Micropost.new %>
<% #micropost.discussion_id = discussion.id %>
<li>
<div class = "intro-bar"><span class = "intro"><%=discussion.intro %></span></div>
<div class = "content-bar">
<span class = "content"><%= discussion.content %></span>
</div>
<input type='button' id='hideshow' value='hide/show'>
</li>
<span class = "timestamp">
Posted <%= time_ago_in_words(discussion.created_at) %> ago.
</span>
<% if signed_in? %>
<div class = "row">
<aside class = "span4">
<section>
<%= form_for(#micropost) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.text_area :content, placeholder: "Post a comment" %>
</div>
<%= f.hidden_field :discussion_id%>
<%= f.submit "Break Up", class: "btn btn-large btn-breakup",:name => "break_up" %>
<%= f.submit "Stay Together", class: "btn btn-large btn-staytogether", :name => "stay_together" %>
<% end %>
</section>
</aside>
</div>
<% end %>
<div class = "comments">
<% discussion.microposts.each do |micropost| %>
<div class = 'comment-box'>
<li>
<div class = "comment-pic"></div>
<div class = "post-comment"><%= micropost.content%></div>
</li>
</div>
<% end %>
</div>

Your best bet would be a carousel.
For jQuery: http://sorgalla.com/projects/jcarousel/
(The "Special Examples" section has a text scroller which looks like what you want, but vertical)
For Prototype: http://code.google.com/p/prototype-carousel/

Rails Tabbed View using Javascript

I'm trying to use tabifier in my rails app so I have:
<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>
<script>
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('tabber{display:none;}');
</script>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
<%= devise_error_messages! %>
<div><%= f.label :peeruser %><br />
<%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>
<div><%= f.label :discipline %><br />
<%= f.text_field :discipline %></div>
<div><%= f.label :course %><br />
<%= f.text_field :course %></div>
<div><%= f.label :concept %><br />
<%= f.select :concept, [['Yes','yes'],['No','no']] %></div>
<div><%= f.submit "Continue" %></div>
<% end %>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
<%= link_to "Back", :back %>
And I can't figure out why it's not loading correctly like the examples:
http://www.barelyfitz.com/projects/tabber/
I put the javascript if under public->javascripts and the css under public->stylesheets - like it just shows the text, none of it is linkable and it displays all the form information.

not exactly a solution, but why not use a more popular and feature-rich library ?
JqueryUI features a nice and simple way to implement tabs.
Once the lib is loaded, all you will have to do is
<script>
$(function() {
$( ".tabber" ).tabs();
});
</script>
then add some links, reclass all your divs and bam ! instant tabs.
Plus, you have all the Jquery Lib, which is pure awesomeness.

Turns out I had not put the css and js in the assets folder which was causing the problem.