I have view form like this:
<% #company.projects.each do |project| %>
<%= link_to_function project.title, "toggle_information_for('#{project.id}')" %>
<br />
<div id="information_for_<%= project.id %>">
<p><%= project.information %></p>
<br/>
</div>
<% end %>
And I have this jQuery function:
function toggle_information_for(project){
$("#information_for_"+project).toggle();
}
How can I make link_to like anchor?
For example:
If I click to project.title, then opening information about project by toggle_information_for function and url changed to /#project_id. How can I make it?
I'm not sure that I understand your question, but you're looking to call the toggle_information_for JS function, you need to write your link_to like this:
<%= link_to_function project.title, "javascript:toggle_information_for('#{project.id}')" %>
If you're looking to add the project ID to your URL, try:
function toggle_information_for(project){
$('#information_for_' + project).toggle();
location.hash = project;
}
Hopefully that helps. And while this works, I'd recommend getting rid of the direct JS call in the href of the link and add an event handler directly in your JS by writing your link_to like this:
<%= link_to_function project.title, "#information_for_#{project.id}" %>
And writing your JavaScript like this:
function toggle_information_for(e){
$(e.target.href).toggle();
location.hash = project;
}
$('#wrapper_div').delegate('click', 'a', toggle_information_for);
I would advise adding a class and then separating the jQuery logic from the html.
<% #company.projects.each do |project| %>
<div class="info_for" id="info_for_<%= project.id %>">
<%=project.title%>
<br />
<div>
<p><%= project.information %></p>
<br/>
</div>
</div>
<% end %>
And then some jQuery
$('.info_for').click(function(){
$('div',this).toggle();
});
Related
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 div in one of my Rails views that I would like to make fully clickable:
<% #objects.each do |f| %>
<div class="overlay" >
<%= link_to image_tag("play.png"), f %>
</div>
How would I make the div class overlay follow the link_to the |f| object in jQuery? I found this in another StackOverflow question and I would like to customize it for the above scenario:
$('.overlay').click( function(event) {
var clicked_div = $(this);
# do stuff with the event object and 'this' which
# represent the element you just clicked on
});
Thanks!
Have you tried giving a class to the a tag?
<% #objects.each do |f| %>
<%= link_to image_tag("play.png"), f, class: 'overlay' %>
...
<% end %>
This will end up creating something like
<a href='/some_address' class='overlay'><img src="play.png" alt="something" /></a>
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
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"