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.
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 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").
I have the magnific popup on my app and I need help with adding a action to the lightbox. I have added my code to the javascript and outside of it but it never appears inside the lightbox.
I need to add several pieces to the lighbox such as a link that will allow user to make ProfileImage, messages compose box, and short bio of the user. If I can learn how to do one then I am confident I can do the rest.
The action is <%= button_to('Set as Profile Image', [:avatar, #photo]) %>
show.html.erb:
<h1><%= #user.username %></h1>
<script type="text/javascript">
$(document).ready(function() {
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'image',
gallery:{enabled:true}
});
});
</script>
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<% end %></div></p>
Tell Magnific Popup to open inline content (a div with the image and your extra content), e.g.:
<script>
$(document).ready(function () {
$('.parent-container').magnificPopup({
delegate: 'a',
type: 'inline',
gallery: { enabled: true }
});
});
</script>
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo) %>
<div id="<%= dom_id(photo) %>" class="mfp-hide">
<%= image_tag(photo.image_url) %>
<%= button_to('Set as Profile Image', [:avatar, #photo]) %>
</div>
<% end %>
</div>
You will need to style the popup; the documentation link above has some sample CSS.
(Apologies if the Ruby code is broken; I'm not really a RoR person.)
According to the magnific popup documentation, you can load anything you want into the popup (I thought it might have been an image-only "lightbox" plugin)
This means if you place the code you need in your popup div, you should be able to do what you want with it:
<div class="parent-container">
<% #user.photos.each do |photo| %>
<%= link_to image_tag(photo.image_url(:thumb)), photo.image_url%>
<%= button_to('Set as Profile Image', profile_path(photo)) %>
<% end %>
</div>
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 have a backbone.js/underscore.js template that I am feeding into a backbone view for rendering. The View is passed a model that contains an array posts of objects (which I call post in the template).
Problem: When I try to loop through all the elements of the array posts, I get an error Uncaught SyntaxError: Unexpected token ) and refers a line in the backbone View's code template: _.template( $('#tpl_SetView').html() ).
Am I doing the loop incorrectly which is causing this error?
Template code
<script type="text/template" id="tpl_SetView">
<div class="row_4">
<div class="photo_container">
<div class="set_cover">
<img src="/<%= posts[0].thumb_subpath %><%= posts[0].img_filename %>" width=240 />
</div>
<div class="set_thumbs">
<%= _.each(posts, function(post) { %>
<img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
<%= }); %>
</div>
</div>
</div>
</script>
To echo a variable use <%= %>, but to parse javaScript code, just use <% %>.
For example:
// In your Backbone View
var posts = {"posts": this.model.toJSON()};
var template = _.template($("#tpl_SetView").html(), posts);
// In your template
<div class="row_4">
<div class="photo_container">
<div class="set_cover">
<img src="/<%= _.escape(posts[0].thumb_subpath) %><%= _.escape(posts[0].img_filename) %>" width=240 />
</div>
<div class="set_thumbs">
<% _.each(posts, function(post){ %>
<img src="<%= _.escape(post.thumb_subpath) %><%= _.escape(posts.img_filename) %>" width=55 />
<% }); %>
</div>
</div>
</div>
I think you will find that the problem is in these lines:
<%= _.each(posts, function(post) { %>
<img src="<%= post.thumb_subpath %><%= posts.img_filename %>" width=55 />
<%= }); %>
From my recollection of what underscore does to evaluate templates, these lines don't make much sense. Each <%=..%> item is evaluated separately.. that is, they must be full evaluatable expressions, not partial function blocks..
Edit: Actually, James is right. <%..%> can be defined separately (it all comes down to a big javascript string in the end). It is escaped and the interpolated expressions that must be separate expressions.
Edit II: Even so, in the evaluation context I think the use of the function block would still possibly create a bizzare javascript string that might not evaluate quite as intended... I'd have to think about it. It might still work out totally fine.