lets say I have something like this:
'click #url_image': function(e) {
var className = $(this).attr("class");
console.log(className);
}
"this" in meteor is the context of the current template, not the actual item which was clicked. how could I get the class or other attribute from the actual click event, in this case the class of #url_image?
Thanks
Try
$(e.currentTarget).attr("class");
Or if you want a no-jQuery solution:
e.currentTarget.getAttribute('class');
Related
When i click browser back button then nav bar menus was not active.
I solved it as below code inside onRendered function.
Tracker.autorun(function() {
var Rname = Router.current().route.getName();
if(Rname == 'xxx'){
$('.lib').addClass('active');
$('.default').removeClass('active');
$('.OnBack').removeClass('active');
}
if(Rname == 'yyy'){
$('.lib').removeClass('active');
$('.default').addClass('active');
$('OnBack').removeClass('active');
}
if(Rname == 'zzz'){
$('.lib').removeClass('active');
$('.default').removeClass('active');
$('.OnBack').addClass('active');
}
});
But when i copy URL and open in new tab then Rname gives correct value but active class not add.
How can i solve it.
Please Rply soon....
I want that if condition code execute using another function, because i have many conditions. How can be solve it in meteor???
I think you can use zimme:active-route. It does exactly what you need. Just read the documentation.
I am creating a custom confirmation dialog in Google App Maker and would like the Confirm button to call a passed-in function. I don't see an "onclick" event in the button widget. Any suggestions on how to do this?
function confirmationDialog(msg, confirmFunction)
{
var desc = app.pageFragments.ConfirmationDialog.descendants;
var label = desc.Label;
var confirmButton = desc.Confirm;
label.text = msg;
confirmButton.onClick = confirmFunction; // does not work
app.showDialog(app.pageFragments.ConfirmationDialog);
}
Thanks
It'd be great if this was a bit easier, but the best bet is to use Custom Properties (https://developers.google.com/appmaker/ui/viewfragments).
You can set up a custom property of type "Dynamic" and call it anything, take "onConfirmCallback", for example. Then you can set the function on that custom property:
Code to invoke dialog:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback = function(param) {
alert(param);
};
app.showDialog(app.pageFragments.ConfirmationDialog);
And then in the onClick for the close button:
app.pageFragments.ConfirmationDialog.properties.onConfirmCallback("hi");
app.closeDialog();
Also note that there are slightly better ways to set up labels than in your example, also using custom properties.
Create custom properties for any widget properties you want to customize, and then bind those custom properties (#properties.propertyName) to the widget property. For example you might have a confirmText property, with the confirm buttons text property boudn to #properties.confirmText.
Then when you invoke your dialog, you can just set those custom properties. Quick modification of your example code using properties for everything:
function confirmationDialog(msg, confirmFunction)
{
var properties = app.pageFragments.ConfirmationDialog.properties;
properties.text = msg;
properties.confirmCallback = confirmFunction;
app.showDialog(app.pageFragments.ConfirmationDialog);
}
For my confirmation dialogs, I just set the onclick of the OK button before I show the dialog (everything is in one place, which is easier for the dummy (me) who will have to maintain it in six months:
var dialog=app.pages.ConfirmationDialog;
dialog.descendants.message.text='Are you sure...?'
dialog.descendants.btnOk.getElement().onclick=function(){
//do something here
app.closeDialog();
});
};
app.showDialog(dialog);
}
I have an id of the button element like this: '#edit-field-project-dnr-und-0-remove-button'
I want to add an event in this button id for instance:
$('#edit-field-project-dnr-und-0-remove-button').click(function (){
calculateDonorSum();
});
This button is ajax button whenever this is clicked old id that is '#edit-field-project-dnr-und-0-remove-button' is replaced into '#edit-field-project-dnr-und-1-remove-button' and so on but no event is fired in the previous button id. Is there any way to fix this ?
When you do this:
$('#edit-field-project-dnr-und-0-remove-button').click(function (){
calculateDonorSum();
});
This searches the current DOM for any element that has an id="edit-field-project-dnr-und-0-remove-button" and attaches an event handler directly to that DOM element.
If you remove that DOM element and create some new DOM element or add a new DOM element, that new DOM element will NOT have this event handler attached to it unless you run some new code to attach an event handler to the new element.
For dynamic elements, it is also possible to use delegated event handling, but you haven't really described enough of what you're doing for us to know how to recommend that. I can't tell if you're adding a new button or changing the ID on the current button.
If you are adding a new button and want all new buttons of this type to have this event handler, then you can use delegated event handling. Delegated event handling works like this:
$("some static common parent selector").on("click", "some common child selector", fn);
So, if your buttons were all in a id="container" div and all had a common class name on them class="calcButton", then you could use:
$("#container").on("click", ".calcButton", function() {
calculateDonorSum();
});
And, all buttons in the container with that class would have this event handler, even if they are dynamically created after the event handler is defined.
Some other references on delegated event handling:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
Does jQuery.on() work for elements that are added after the event handler is created?
Should all jquery events be bound to $(document)?
JQuery Event Handlers - What's the "Best" method
consider using jQueries attribute starts with, contains, or ends with selectors
//button id starts with 'edit-field-project-dnr-und-' and ends with '-remove-button'
$("[id^=edit-field-project-dnr-und-][id$=-remove-button]").click(function () {
calculateDonorSum();
});
if these buttons are created dynamically, use
$('#some-parent-container').on("click","[id^=edit-field-project-dnr-und-][id$=-remove-button]", function(){
calculateDonorSum();
})
instead of .click()
//button id starts with
$("[id^=button-]").click(function () {
calculateDonorSum();
});
//button id ends with
$("[id$=-remove]").click(function () {
calculateDonorSum();
});
//button id contains
$("[id*=-remove]").click(function () {
calculateDonorSum();
});
this works, here, made a fiddle
http://jsfiddle.net/MzPEg/1/
in general use this approach ONLY if you don't have control over the naming/creation of the original buttons. these selectors are not as fast as $('#id') and it's a bit sloppy. but it will work in a pinch.
It appears that the id of the field on which the onclick event is supposed to occur is changing, yet you only handle the first id. If you do not want to make all of these ids the same, you could put the click event handler on a parent wrapper div.
You can do as this:
$('#edit-field-project-dnr-und-0-remove-button').click(function (e){
e.preventDefault();
calculateDonorSum();
$(this).attr('id','edit-field-project-dnr-und-1-remove-button');
});
Using an advanced selector that matches the beginning part of the id AND the ending part:
$('[id^="edit-field-project-dnr-und"][id$="remove-button"]').on('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'));
});
});
Hai ,
I am creating a DatetimePicker User control. I just want to know how to get the selected date of the calendar (asp.net control) control using jQuery. I used this code, but it's wrong.
$(document).ready(function() {
$(".UserCalender").click(function () {
var a = $('.CalenderDiv:selected').text();
alert(a);
});
});
What's wrong with this?
You won't be able to do like this. There is no :selected selector for an anchor tag. It works only for <option> elements. What you can do is to attach an event hanlder to each anchor ag and use the text() method. Something like
$("#Calendar1 a").click(function(){
alert ( $(this).text() );
return false;
});
But why do you want to do this. By doing like this you will get only the text inside the anchor tag and not the whole date. To get the whole date you will have to perform additional work.
If you want to manipulate the selected text then you can use any datepicker plugin from jQuery.
See jQuery UI Datepicker