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").
Related
SO i am trying to change the value of an html tag in an ejs file to a variable i declared in a JavaScript file
let checkbox = document.querySelector('input[name="plan"]');
checkbox.addEventListener('change', function () {
if (this.checked) {
document.querySelector('.plan-title').innerHTML = investment.name;
document.querySelector('.plan-description').innerHTML = investment.description;
}
else {
document.querySelector('.plan-title').innerHTML = '';
document.querySelector('.plan-description').innerHTML = '';
}
});
So when I pass it directly it shows but I want it to be dynamic and Although it gets pass through when i click the checkbox it doesn't seem to have any value.
<%- include('../partials/sidebar'); %>
<% if(currentUser && currentUser.isAdmin){ %>
Add New Plan
<% } %>
<div class="container">
<h1>Investments</h1>
<% investments.forEach((investment)=>{ %>
<div class="col-md-4">
<div class="card">
<strong>
<%= investment.name %>
</strong>
<h4>
<%= investment.min %> - <%=investment.max %>
</h4>
<p>
<%= investment.caption %>
</p>
<p><input type="checkbox" name="plan" id="">Choose investment</p>
</div>
<% if(currentUser && currentUser.isAdmin){ %>
Edit
Delete
<% } %>
</div>
<% }) %>
<% investments.forEach((investment)=>{ %>
<div class="">
<div><strong>Package: </strong>
<p class="plan-title">
</p>
</div>
<p class="plan-description">
</p>
<input type="number" name="" id="" min="<%= investment.min %>"
max="<%= investment.max %>">
</div>
<% }) %>
</div>
<%- include('../partials/footer'); %>
I cant seem to get through this, need help thanks!
If I got it right, you are trying to insert the value of the EJS variable in the HTML tag from JavaScript when the user clicks the checkbox.
The value of the HTML tag doesn't change because in your JS code:
document.querySelector('.plan-title').innerHTML = investment.name;
document.querySelector('.plan-description').innerHTML = investment.description;
investment.name and investment.description are undefined. Check the console on your page.
This is because you tried accessing EJS variables after the page finished rendering.
EJS is mainly used to pass server-side variables to the page before it is rendered. So once it's rendered you cannot access those variables.
So to have the values of those variables in your JavaScript after the page finishes rendering, try doing:
document.querySelector('.plan-title').innerHTML = '<%- investment.name %>';
document.querySelector('.plan-description').innerHTML = '<%- investment.description %>';
instead. This is how you pass the EJS variable to JavaScript. JavaScript now sees it as a string and there's no problem, unlike in your code where it was looking for investment object and returned undefined since that variable is not defined on the client-side.
Also, since you have a for-each loop in the HTML part, I'm assuming you are trying to change the values of specific plan-title and plan-description divs. If that's the case, '<%= investment.name %>' and '<%= investment.description %>' in JavaScript part should be in a for-each loop as well, but that would be a lot of mess.
I suggest you instead to right under the for-each loop in the HTML part, add class to the div tag according to the index of the for-each loop, add on change event to the checkbox, and pass the checkbox and the index of the for-each loop to the JavaScript function which would handle the on change event, include the EJS variables in the plan-title and plan-description divs, and in the JavaScript function that handles on change event change the CSS display property from display: none to display: block to these divs.
See an example:
HTML:
<% investments.forEach((investment, index)=>{ %>
<div class="col-md-4">
<div class="card">
<strong>
<%= investment.name %>
</strong>
<h4>
<%= investment.min %> - <%=investment.max %>
</h4>
<p>
<%= investment.caption %>
</p>
<p><input onchange="displayPlan(this, '<%= index %>')" type="checkbox" name="plan" id="">Choose investment</p>
</div>
<% if(currentUser && currentUser.isAdmin){ %>
Edit
Delete
<% } %>
</div>
<% }) %>
<% investments.forEach((investment, index)=>{ %>
<div class="plan <%= index %>" style="display: none;">
<div><strong>Package: </strong>
<p class="plan-title">
<%- investment.name %>
</p>
</div>
<p class="plan-description">
<%- investment.description %>
</p>
<input type="number" name="" id="" min="<%= investment.min %>"
max="<%= investment.max %>">
</div>
<% }) %>
JavaScript:
function displayPlan(checkbox, id){
if (checkbox.checked) {
document.querySelector(`.plan.${id}`).style.display = 'block';
}
else {
document.querySelector(`.plan.${id}`).style.display = 'none';
}
}
Cheers!
EDIT: Grammar and syntax issues
It's not clear to me what variable you're referring to, but any variable you set in a client-side script will not be available to you in an EJS file that you're rendering on the server. Server-side Node.js code and client-side JavaScript code have no knowledge of each other.
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'm writing an app using Ruby on Rails, there I have a form where if a checkbox is checked it displays a certain <div> and if it isn't I add style="display:none:" through rails. Via Coffeescript and JQuery, I also toggle the same <div> on change.
Coffeescript:
jQuery ->
$(document).ready ->
$("#hasUser").change ->
$("#userPart").toggle();
return
return
return
HTML:
<div class="form-group">
<%= contato_form.label :hasUser, :class => 'inline-checkbox' do %>
Possui usuário <%= contato_form.check_box :hasUser, :id => 'hasUser' %>
<% end %>
</div>
</div><!-- Closing from uncopied code -->
<div id="userPart" class="findMe" <% if #contato.usuario.id.blank? %> style="display:none;" <% end %>>
<h2> Usuário: </h2>
<div class="container">
<%= contato_form.fields_for :usuario do |usuario_form| %>
<%= render partial: 'usuarios/campos_usuario', locals: {form: usuario_form} %>
<% end %>
</div>
</div>
The issue here is that it all runs well when I use the form to Create, but on Edit the Coffeescript only runs after a reload.
It was a turbo-links issue. I had to check if turbo-links was loaded properly before attempting to run the rest of the code.
jQuery ->
$(document).ready ->
$(document).on 'turbolinks:load', #Added line
$("#hasUser").change ->
$("#userPart").toggle();
return
return
return
return
i created a quiz and question displayed one by one and have to display the questions in list where it click it goes to the id of the question in list. but it does not work it the loader does not stops
here is my script
<script type="text/javascript">
function set_active(){
$$('.active-link').each(function(e){
e.removeClassName('active-link');
});
this.addClassName('active-link')
}
function draw_report(){
Element.show('loader')
new Ajax.Request('answers/ans',
{asynchronous:true, evalScripts:true,
parameters:'passed_question='+this.id+'&exam_group_id=<%= #exam_group.id %>',onSuccess:function(request){Element.hide('loader')}
})
}
document.observe("dom:loaded", function() {
$$('.student-link').invoke('observe','click',draw_report);
$$('.student-link').invoke('observe','click',set_active);
});
</script>
in the view page
<div class="list_id">
<%= "Questions" %>
</div>
<% #slno = 0 %>
<ul class="student_list">
<% #questions.each do |s| %>
<% #slno = #slno+1 %>
<li class="student_names">
<a href="#" id="<%=s.id%>" class="student-link" > <%= #slno %></a>
</li>
<% end %>
</ul>
but if i click the question id it does not respond anything
Are you getting no errors at all from the Javascript console you're using? I'd say adding parentheses should do the trick:
$$('.student-link').invoke('observe','click',draw_report());
$$('.student-link').invoke('observe','click',set_active());
EDIT: I see you use a jQuery tag in your original question. Are you sure you're using jQuery? Because the javascript code above looks suspiciously like Prototype.
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>