I am using rails3 and on my page i am iterating a loop which have some records and i want when
user click on some row its color will be green and when he again click some row its color will
be green and the color of previous highlighted row should be none.
Thanks in advance
My code is like this
<div class="top-heading-detail-admin">
<div class="table-headings">
<div class="email-admin"><p>Email</p></div>
<div class="date-admin"><p>Date Added</p></div>
<div class="added-by-admin"><p>Added by</p></div>
</div>
<div id="checkbox_list">
<% #users.each do |user| %>
<div class="email-admin-detail"><%= user.email %></div>
<div class="date-admin-detail"><%= user.created_at.strftime("%m/%d/%Y") unless user.created_at.blank? %></div>
<div class="added-by-admin-detail"><%= user.added_by %></div>
</div>
<% end %>
</div>
</div>
http://jsfiddle.net/r8mY4/9/
I wrapped your user details row in a div then applied a click event, please check if that's what you want :)
$('.user-details').click(function() {
$('.user-details').css('background', 'transparent');
$(this).css('background', 'green');
});
I think you should use table why you are using div tags for table.If you want to highlight
row using this.Try out this code i think its work..But you need to make an extra div inside it
<div id="checkbox_list">
<% #users.each do |user| %>
<div id="<%= user.id %>" onclick="admin_select('<%=user.id%>')" class="admin-select">
<div class="email-admin-detail"><%= user.email %></div>
<div class="date-admin-detail"><%= user.created_at.strftime("%m/%d/%Y")%></div>
<div class="added-by-admin-detail"><%= user.added_by %></div>
</div>
<% end %>
i am making extra div and give this user id and also call onclick javascript event on it.
Here is jquery code for it
function admin_select(id) {
$(".admin-select").children().each(function () {
$(this).removeClass("color_class");
});
$("#" + id).children().each(function () {
$(this).addClass("color_class");
});
}
Check it....
Related
I have a little bit of a problem with the id names for my rails app where I want javascript to disable/enable a field with the press of a button.
I have a big index page where people can rate a bunch of pictures on the index page itself. For this I am using the #posts.each do |post| method.
The user should then be able to rate the picture with a slider, and after the slider was used, the range should be disabled. If the user wants to change the rating it is possible to click on "CHANGE", which enables the slider again.
Problem I have right now is with the enable function. I have a bunch of posts on the index page, and and all of the sliders and buttons have the same class names and ids. I have tried to give each slider and button a specific id with id:'ratingPost#{post.id}', but the problem then is that I cannot get javascript to know what is the postid that was just clicked.
Can you help me here?
Thank you very much!
My code is here:
#posts_index.html.erb
<% #posts.each do |post| %>
...
<% if post.ratings.find_by(user_id: current_user.id) %>
<%= form_for [post, post.ratings.find_by(user_id: current_user.id)] do |f| %>
<%= f.range_field :score, class:"form-control-range slider", id:"ratingPost", onMouseUp:"submit()", onTouchEnd:"submit()", :disabled => true, data: { source: post} %>
<% end %>
<% else %>
<%= form_for [post, #rating] do |f| %>
<%= f.range_field :score, class:"form-control-range slider", id:"formControlRange", onMouseUp:"submit()", onTouchEnd:"submit()"%>
<% end %>
<% end %>
...
<% if post.ratings.find_by(user_id: current_user.id) %>
<h2><%= post.ratings.where(user_id: current_user.id).last.score %>%</h2>
<button id="RatingChangeButton"><p>CHANGE</p></button>
<% end %>
</div>
</div>
</div>
<% end %>
<script>
document.getElementById("RatingChangeButton").addEventListener("click", enableRating);
function enableRating() {
document.getElementById("ratingPost").disabled=false;
}
</script>
Ideally you should not have multiple elements with the same ID in your HTML, instead use class.
Now to your question, what you can do is store the id of the post in a data attribute for your buttons and rating fields, and access that id in the javascript function to identify the corresponding slider. Something like,
https://codepen.io/anujmiddha/pen/NWRwwLL
<p>Post 1: <input class="ratingPost" data-post-id="1" disabled></p>
<p>Post 2: <input class="ratingPost" data-post-id="2" disabled></p>
<p>
<button class="RatingChangeButton" data-post-id="1" onClick="enableRating(this)">
<p>CHANGE 1</p></button>
</p>
<p>
<button class="RatingChangeButton" data-post-id="2" onClick="enableRating(this)">
<p>CHANGE 2</p></button>
</p>
function enableRating(view) {
let element = document.querySelector('[data-post-id="' + view.dataset.postId + '"],[class="RatingChangeButton"]');
element.disabled = false;
element.value = "enabled";
}
I have a rails app which displays steps and substeps in rows. I'm looking to create an action where clicking on a step row will change it's class from 'step_container' to 'step_container active', and then show the corresponding substep rows for that step. I have had a difficult time figuring out how to use AJAX (or understanding if that is the best tool) to accomplish this.
<% #steps.each do |step| %>
<div class="step_container"> <!-- add 'active' if clicked-->
<div class="medium-8 columns"><!-- add 'active_container' if clicked-->
<div class="medium-5 columns step_info">
<div class="step_number">
<span><%= step.order %></span>
</div>
<div class="custom_step">
<span class="step_title"><%= step.title %> (custom step)</span>
<span class="step_desc"><%= step.description %></span>
</div>
</div>
</div>
<!-- Only show this div if top div is clicked -->
<div class="medium-4 columns sub_steps_container">
<% #substeps.where(step_id: step.id).each do |substep| %>
<div class="sub_steps">
<div class="step_number">
<span><%= substep.order %></span>
</div>
<div class="">
<span class="step_title"><%= substep.action %></span>
<span class="step_desc"><%= substep.description %></span>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
Thanks in advance for assistance. This has taken me most of the day with limited results.
There is no need for AJAX here, just little bit of javascript and css.
JavaScript:
$('.step_container').click(function() {
$(this).addClass('active');
}
CSS (sass):
.step_container {
.sub_steps_container {
display: none;
}
&.active {
.sub_steps_container {
display: block;
}
}
}
If I understand you correctly, you won't actually need Ajax for this. This could be pretty simple:
Hide the sub_step_container div initially via css.
.sub_steps_container {
display: none;
}
Add this to your HTML code (or better yet, don't use script tags and use in separate JS file).
<script>
$('.step_container').on('click', function(){
$(this).addClass('active');
$('.sub_steps_container').show()
});
</script>
I have the Jquery code below:
$(document).ready(function() {
$('tr[href]').click(function(event) {
$('tr[href]').removeClass('selected')
$(this).addClass('selected');
event.preventDefault();
$('#profile').load('home/users/1');
event.stopPropagation();
});
});
Every time I click the target, I found the .load function load the window double times the last click. For example, in the rails log it shows several Started GET "/home/users/1in the same time thus my app becomes slow and slow. Below is the view file where the window is loaded:
<div class="col-md-5" >
<div class="table table-responsive" >
<div id='list' >
<% if params[:q] == 'a' %>
<%= render 'users' %>
<% elsif params[:q] == 'b' %>
<%= render 'jobs_index' %>
<% else %>
<%= render 'lineitems' %>
<% end %>
</div>
</div>
</div>
<div class="col-md-5">
<div id="profile">//load the window
</div>
Could any body tell me why this occurs? Very thanks!
I solved it.
I modified the code $('#profile').load('home/users/1'); in application.js as below:
var url="home/users/"+$(this).attr("href")
$('#profile-outline').load(url+" #special");
And add a in the outermost of the html file.Then the problem is solved.
In summary, just use load("url #container") to replace load("url").
Well, i have a div hide in my content and make a buttom to show this but the problem is i have many elements whit this names so i make this function to solve:
$("a.all_com").click(function(){
$(this).nextAll("div:first").slideToggle();
});
This function dont works, i try use meet this:
$("a.all_com").click(function(){
$(this).next("div").slideToggle();
});
and
$("a.all_com").click(function(){
$(this).nextAll("div").slideToggle();
});
Nobody works whit me please someone solution, the this is to apply some in the element actually.
My code to show/hide is this:
<div id="task_footer">
Comentar
Comentários
</div>
<div id="comment_list" style="display:none;" >
<% tasks.comments.each do |c| %>
<% if c.user %>
<p class="one_comment">
<strong><%= c.user.email %></strong>
<%= c.comment %>
</p>
<% end %>
<% end %>
</div>
I am using Prototype Ajax Updater (via Rails link_to_remote) to insert some HTML returned from the server, at the bottom of a div. The correct HTML is inserted at the right place, however the new HTML at the bottom of the div displays over the top of the existing page footer.
If the content had originally been a part of the page then the footer would have been rendered lower, after that content. However when the extra content is inserted the footer stays where it is and the new content is displayed over the top of the footer.
Update: Below is the view code. The page itself is here: http://likily-stage.heroku.com/newest_members
The controller is very basic as it just calls the model asking for the next batch of records:
<h1>Newest Members</h1>
<div id="member_list">
<% #people.each do | person | %>
<div class="item connection">
<%= insert_profile_pic(person) %>
<div class="info">
<h2><%= link_to h(person.full_name), person %></h2>
<p class="author">Joined in <%= person.created_at.strftime("%B %Y") %></p>
<ul>
<li><span><%= person.reviews.count.to_s %></span> recommendations</li>
<li><span><%= person.lists.count.to_s %></span> lists</li>
<li><span><%= person.friends.count.to_s -%></span> connections</li>
</ul>
</div>
</div>
<% end %>
<div id="button_div">
<% if #people.last.id > 1 %>
<% offset_param = "'offset=" + #next_offset.to_s + "'" %>
<p>
<%= button_to_remote "Show More..." , {:url => {:action => 'more_members'},
:update => 'member_list', :position => :bottom, :with => offset_param,
:before => "removeElement('member_list','button_div'); Element.show('spinner_div')",
:after => "Element.hide('spinner_div')"} ,
:id => "more_people_button", :class => "button green wide_button" %>
</p>
<% end %>
</div>
</div>
You have a set height of 860px on the #member_list and the #content divs. So when you add content, the divs don't grow to fit (which would push the footer down), and just overflow instead
Remove the height from #content and #member_list and that should solve the problem.