The intended URL is
"versions/compare/id1/id2"
Obviously, this doesn't work, but shows the intention
<%= form_tag("/versions/compare/", :method => "get") do %>
<% versions.each do |v| %>
<% v.id == #version.id ? current_class = " current" : "" %>
<li class="version-list <%= current_class %>">
<%= check_box_tag(:compare_version, v.id) %>
<%= link_to v.user.name, version_path(v) %>,
</li>
<% end %>
<%= submit_tag("Compare") %>
<% end #form tag
%>
The code above produces http://localhost:3000/versions/compare/?utf8=%E2%9C%93&compare_version=13&compare_version=12&commit=Compare
Is there a way to modify the form (+ JS?) so that it gets the desired URL?
"versions/compare/id1/id2"
you need to understand how form_tag work, it can not change the url after rendering the document.
If you want to change the url, use jquery to change it.
Or, just submit the form into some other url like
<%= form_tag("/comparing_version")
and then, in the controller, after processing everything, you redirect user to
"versions/compare/id1/id2"
Related
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
Currently in my ruby on rails project, my events/new.html.erb looks like this:
<h2>Neuer Event</h2><br>
<div id="kalendi">
<%= render 'kalendi' %>
</div>
<ul class="lista">
</ul>
<%= simple_form_for(#event) do |f| %>
<%= f.input :name %>
<%= f.input :content %>
<%= f.input :date%>
<%= f.input :tag_list, as: :check_boxes, collection: ['Logik', 'Ethik', 'Metaphysik'] %><br>
<%= f.button :submit %>
<% end %>
<script>
$(document).ready(function(){
$(document).on('click', ".btn2", function () {
var buttonContent = $(this).html();
$(".lista").append("<li>" + buttonContent + "</li>");
});
});
</script>
The div "kalendi" generates a calendar, where the user can pick out some dates. Let's say, the user has chosen "2016-02-08", "2016-02-09" and "2016-02-10". The <ul class="lista"> looks like this:
<ul class="lista">
<li>2016-02-08</li>
<li>2016-02-09</li>
<li>2016-02-10</li>
</ul>
I want that, when the user presses the submit-button, that the input of <%= f.input :date%> is an array of the chosen dates. What do I need to do? Thanks in advance!
Edit: I heard, that it isn't easy to pass an array from the simple_form gem to the controller. Let's change my question a bit: What do I need to do, so the controller gets a string like this: "2016-02-08, 2016-02-09, 2016-02-10"?
Edit 2, trying to follow the advice of Albert Paul:
I added a hidden field like this:
<%= simple_form_for([#event, #dateevent]) do |f| %>
<%= f.input :date, :as => :hidden, :input_html => { :value => ".alist" } %>
<%= f.button :submit %>
<% end %>
And just for testing, I created a div called alist:
<div class="alist">abcdefghijklmnopqrstuvwxxxxz</div>
At the moment, the value of date is ".alist". What do I need to type in XXX { :value => "XXX" }, to get the content of the div? I tried something like this:$(".alist").val(), but it didn't work. Thanks in advance!
Edit3: Nevermind, I found a solution.
Rails would only pickup input tags as params, but we can do a hack and get those elements by using Javascript. Add a hidden field to your form, and add a click event to your submit button, when user submit your page use jquery to copy contents of <li></li> to this hidden field, so when it gets submitted you'll get your values inside your hidden field.
hidden_field(:signup, :pass_confirm)
http://apidock.com/rails/ActionView/Helpers/FormHelper/hidden_field
Use jquery text() to get contents of <li>
http://api.jquery.com/text/
Not the preferred way to do this, I recommend using rails checkbox tag.
I have a _user.html.erb partial that I am rendering on my Users#Index action with a form embedded to allow following and unfollowing of each user. I also have accompanying create.js.erb and destroy.js.erb files in my relationships controller to handle the AJAX. Right now I have to refresh the page in order to see the changes made by clicking the "follow/unfollow" button next to a users name except the first user's record behaves correctly.
_user.html.erb
<div id ="follow_form">
<% if current_user.following?(user) %>
<%= form_for(current_user.relationships.find_by(followed_id: user.id),
html: { method: :delete },
remote: true) do |f| %>
<%= f.submit "Unfollow", class: "btn btn-large" %>
<% end %>
<% else %>
<%= form_for(current_user.relationships.build(followed_id: user.id),
remote: true) do |f| %>
<div><%= f.hidden_field :followed_id %></div>
<%= f.submit "Follow", class: "btn btn-large btn-primary" %>
<% end %>
<% end %>
create.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>")
$("#followers").html('<%= #user.followers.count %>')
destroy.js.erb
$("#follow_form").html("<%= escape_javascript(render('users/follow')) %>")
$("#followers").html('<%= #user.followers.count %>')
here is a link to my users_controller.rb https://gist.github.com/anonymous/9608208 and my relationships_controller.rb https://gist.github.com/anonymous/9608284
I've tried changing the div to something dynamic like
<div id ="follow_form_<%= user.id %>">
But when I make the same change to the javascript like this
$("#follow_form_<%= user.id %>").find.html("<%= escape_javascript(render('users/unfollow')) %>")
it doesn't seem to work.
I've been trying to figure out how to pass the user.id attribute into the javascript but am falling flat.
It turns out the problem was in my _follow_form.html.erb partial.
I had to change
<div id="follow_form">
to
<div id="follow_form_<%= #user.id %>">
I thought I only needed to make the change in the _user.html.erb partial but I was wrong. My current user partial uses the same div id to contain the button in the Users#Index view
<div id ="follow_form_<%= user.id %>">
My model has Chords, which have a many-to-many relationship with Notes through Chordnotes. My chords/show looks like this:
<% #chord.notes.each do |note| %>
<li id="NoteID<%= note.id %>" >
<span class="content"><%= note.name %> (<%= note.description %>) (ID: <%= note.id %>)</span>
<span class="timestamp">
Created <%= time_ago_in_words(note.created_at) %> ago.
</span>
<span class="content">
<%= link_to "remove (not working)", '#' %>
</span>
</li>
<% end %>
I want the link_to tag to remove, not the note, but the Chordnote that links the Note to the Chord. I was trying to do this by referencing the #id in the < li > tag, which is the ID of the Note, and passing the Note ID and the Chord ID from the /show page the user was on. My Chordnote controller looks like this:
def destroy
#chord = Chord.find(chord-id) <-- how do I get this chord id??
#note = Note.find(note-id) <-- how do I get this note id??
Chordnote.find_by(note_id: #note.id, chord_id: #chord.id).destroy
redirect_to chord_path(#chord)
end
This destroy action works when I hardcode chord-id and note-id with ID #'s, but I can't figure out how to pass the relevant Note and Chord IDs from the chords/show page.
Any help would be appreciated, thanks!
this is untested, mind you. But have you tried passing the relevant data through the link_to?
<% #chord.notes.each do |note| %>
<li id="NoteID<%= note.id %>" >
<span class="content"><%= note.name %> (<%= note.description %>) (ID: <%= note.id %>)</span>
<span class="timestamp">
Created <%= time_ago_in_words(note.created_at) %> ago.
</span>
<span class="content">
<%= link_to "remove (not working)", {controller: "whatever_controller", action: "destroy", chord_id: #chord.id, note_id: note.id } %>
</span>
</li>
<% end %>
and then you would access these in the destroy method like so
def destroy
#chord = Chord.find( params[:chord_id] )
#note = Note.find( params[:note_id] ) <-- how do I get this note id??
Chordnote.find_by(note_id: #note.id, chord_id: #chord.id).destroy
redirect_to chord_path(#chord)
end
I have a form with a Jquery plugin requirement that creates a form input field with a type of Facebook-autocomplete kind of style:
<%= javascript_include_tag "form_prettify_library" %>
<div class="box">
<ul id="first_form" class="tagit">
<li class="prettify-new"></li>
</ul>
<%= form_for #brand do |f| %>
<%= f.hidden_field :tag_list, :value => #brand.tags_from(current_user).join(", "),
:id => "mytaglist" %>
<%= f.submit "Add tags" %>
<%= f.error_messages %>
<% end %>
</div>
It works well, however without JavaScript the form doesn't work because the form above only has a hidden_field and no visible entry field (the entry field is created by the plugin inside of the tags), and I need this to work without JavaScript on mobile devices. Is there any way to show the code above if JavaScript is loaded, otherwise the code below will be displayed if it isn't?
<div class="box">
<%= form_for #brand do |f| %>
<%= f.label :tag_list, "Your tags" %>
<%= f.text_field :tag_list, :value => #brand.all_tags_list %>
<%= f.submit "Add tags" %>
<% end %>
</div>
Yes, use css to hide it by default, and add a class to the site when js is enabled
html
<body class="no_js">
<script type="text/javascript">
(function() {
var body = document.getElementsByTagName("body")[0];
body.className = body.className.replace(/\bno_js\b/, " js ")
}())
</script>
css
.no_js .jsForm,
.js .no_jsForm {
display:none;
}
.js .jsForm,
.no_js .no_jsForm {
display: block;
}