This Meteor client code tries to apply the click event if the element being clicked is not a canvas element.
It is failing to do so, How can it be fixed?
Template.myTemp.events({
'click :not("canvas")': function(e) {
console.log('clicked');
}
});
You want to select all elements (*) that are not a <canvas> (:not(canvas), no quotes):
Template.myTemp.events({
'click *:not(canvas)': function(e) {
console.log('clicked');
}
});
Related
I have 1 page which has 1 updatepanel which contains 1 user control(lets call it user.ascx) and 2 buttons.
My user.ascx has some checkboxes which can disable/enable other controls. I am doing it in javascript added to user.ascx, but when updatepanel updates( async postback after clicking 1 of those 2 buttons) my javascript events for checkboxes (click or change) arem't fired.
I know I can just wrapp $().ready() with function pageLoad(sender,args) and it works perfect but according to that page http://blog.dreamlabsolutions.com/post/2009/03/25/jQuery-live-and-ASPNET-Ajax-asynchronous-postback.aspx it is better to use live() function.
Unfortunately all available ways to bind event like .click(), .change(), .bind(), .live() and .on() work after postback can't after asynchronus postback.
Sample of code which doesn't work:
<script type="text/javascript">
$().ready(function () {
var ddlAge= $("#<%= ddlAge.ClientID %>");
var cboxFirst= $("#<%= cboxFirst.ClientID %>");
var cboxSecond= $("#<%= cboxSecond.ClientID %>");
$(document).on("change", cboxFirst, function () {
if (cboxFirst.is(":checked")) {
ddlAge.attr("disabled", "disabled");
ddlAge.val("");
}
else { ddlAge.removeAttr("disabled"); }
});
cboxSecond.live('change',function () {
if (cboxSecond.is(":checked")) {
ddlAge.attr("disabled", "disabled");
ddlAge.val("");
}
else { ddlAge.removeAttr("disabled"); }
});
});
</script>
Both checkboxes work only after postbacks. What may I do wrong? Does anyhone have such problem? I am using Jquery 1.7.1 and I am not getting any js errors.
I will be grateful for any help.
I'm surprised that the .on works at all. According to the documentation http://api.jquery.com/on/ it's second parameter should be a selector string and not a jquery object.
I would try something like this:
$(document).on("change", "#<%= cboxFirst.ClientID %>", function () {
if ($(this).is(":checked")) {
ddlAge.attr("disabled", "disabled");
ddlAge.val("");
}
else { ddlAge.removeAttr("disabled"); }
});
As long as the ClientID stays the same the event will still work even when the UpdatePanel replaces all its content.
Also, .live has been deprecated in favor or .on
I am trying to use jquery to select a checkbox when another checkbox is selected. This wuld have been easy if the ids of the checkboxes are constant but they can change so I have tried to use classes instead, unfortunately asp.net applies the class name on the span element wrapping the checkbox instead of applying on the checkbox directly, so i need to get the checkbox via the inner element of the parent span
<script type="text/javascript">
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkEL_157').click(function() {
if (this.checked) {
var pl = $('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkPL_313')
pl.attr("checked", true);
}
})
});
</script>
My code, previously working with the checkbox ids, is above, pls help!
You can still match your check boxes even if the class attribute is applied to their parent <span> elements:
$(document).ready(function() {
$(".sourceCheckBoxClass input:checkbox").click(function() {
if (this.checked) { // or $(this).is(":checked")
$(".targetCheckBoxClass input:checkbox").attr("checked", true);
}
});
});
With ASP.NET you can control the ClientId of the form controls. You have the use the Clientid property as I remember.
More info at the MSDN.
<script type="text/javascript">
$(document).ready(function() {
$('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkEL_157').click(function() {
if (this.checked) {
var pl = $('#ctl00_ContentPlaceHolder1_Category_ctl00_ProductBusinessLine_chkPL_313 :checkbox')
pl.attr("checked", true);
}
})
});
</script>
Is that what you're looking for ? oh and looks like you're using ids, not classes in your selectors
if you write your javascript code on the page, then you can determine real id dynamically:
$('#<$=chkEL_157.ClientID%>').click(function() {
...
});
or find element by a part of id:
$(':checkbox[id$="_chkEL_157"]').click(function() {
...
});
but in this case you must assure that there is no other element that contains similar id. Otherwise you must specify context where you want to find element, like this:
$(':checkbox[id$="_chkEL_157"]', $("#checkbox-context-element")).click(function() {
...
});
Here is my code:
$(document).ready(function(){
$('.classOne').mouseover(function(e) {
alert($(e).attr('id'));
});
});
Now, I know that something is actually wrong with my code, what will be correct in order to get the result with the ID of the current asp:LinkButton that I hovered in the alert() message?
Thanks for all helpers!
e is your event, not your element. Your element is wrapped in this function.
$(document).ready(function() {
$('.classOne').mouseover(function(e) {
alert($(this).attr('id'));
});
});
You should do this instead:
$(document).ready(function(){
$('.classOne').mouseover(function() {
alert($(this).attr('id'));
});
});
Couple of assumptions:
The link button is rendered with the valid class 'classOne'
The button is not added to the page collection via an AJAX callback
the 'e' parameter actualy is an object of the event & not really the object of the HTML element
(document).ready(function(){
$('.classOne').bind('mouseover', function(){
alert($(this).attr('id'));
});
});
Is it possible to refresh parent page from child's child page using javascript.
I have a webform which opens a child window, a button on child window closes the present child window and opens a subchild window. Now a button on subchild should close the window and refresh the parent form.
Please suggest me the way of doing it.
Thank You.
For button click event
Code in Parent Page
function fun()
{
window.open('Child.aspx');
return false;
}
Code in child page
function fun()
{
window.close();
window.open('SubChild.aspx');
return false;
}
Use following in your child window.
<script type="text/javascript">
function openwindow()
{
opener.document.location.reload(true);
}
</script>
EDITED
create two files
1] parent.html
<script type="text/javascript">
function openwindow(url)
{
window.open(url, "mywindow","location=1,status=1,scrollbars=1,resizable=no,width=650,height=650");
}
</script>
Open Child
2] child.html
<script type="text/javascript">
function openwindow()
{
opener.document.location.reload(true);
}
</SCRIPT>
Refresh Parent
EDITED LATEST
write a function in child1.html
function child1()
{
opener.document.location.reload(true);
}
call that function form child2.html as follows
function child2()
{
window.opener.child1();
}
Have you tried using these?
window.opener.reload();
window.opener.location.reload();
I think window.opener.opener.reload(); may work..
EDITED after seeing your code. The problem is you're opening the 2nd window from the 1st window and closing the 1st window so you have no reference back to the opener. You can instead call a method in your Parent window to open the 2nd window, that way the Parent is still your opener.
Parent.html
function openWindow(sURL){
window.open(sURL);
}
Child1.html
function fun(){
window.opener.openWindow('Child2.html');
window.close();
}
Child2.html
function fun(){
window.opener.location.reload(true);
}
How can I have every button on an html page perform the same function using prototype.js?
I used the someElement.observe() method and it worked for one button. But how can I do this for every button on the page without coding separately for each button?
Use the css selector to select multiple elements:
$$('input[type="button"]').observe(...)
You can also use event delegation to register one event handler on the element that contains your buttons (e.g. the document body) and take advantage of the fact that events bubble up the DOM.
This will ensure that your event handler is called for every button, even if you dynamically add new buttons to the page.
E.g.
document.observe( 'click', function( event )
{
var elem = event.element();
if ( elem.match( 'input[type="button"]' ) )
{
// Do your event handler
}
});
You can use this also:
Event.observe(window, 'load', function(){
$('idForm').getInputs('radio', 'nameRadio').each(function(el){
el.onclick = function(){
//Actions<br>
});
});