In meteorjs' click event, how do I get the id? - meteor

In meteorjs's event, how do I get the id of clicked item, without adding a JQuery binding stuff?
(Ya I investigated other posts, but does not help) IMPOV)

You can do this:
{
'click p': function (event) {
console.log(event.currentTarget.id);
}
}
Read more here.

Related

Why does the click event on the checkout page not work?

Example of a problem:
The click event inside the form is not triggered
$(document).on('click', function(e) {
console.log('ok');
});
The most interesting thing is that the change event works correctly
What could be the problem at all ?
In General, I found a problem, maybe someone will be useful:
$(document.body).on('updated_checkout updated_shipping_method', function (event, xhr, data) {
$('input[name^="shipping_method"]').on('click', function(e) {
console.log('ok');
});
});
Instead of input[name^="shipping_method, you can add any class that is inside the form

In Meteor can I capture or pass the link/anchor text in the event when user clicks a link?

I am trying to set a Session variable to the text that a user clicks on when they click a link. For example if the link is The Link.
I would like to Session.set('clickedLink', <<The Link>>); but with "The Link" obviously replaced with the text string that the user has clicked on.
Is this possible? Am I going about this all wrong?
I figured I might be able to use something like:
Template.SingleQuote.events({
"click .link": function (event) {
Session.set("currentPageName", event.a.text);
}
});
Use event.target.text.
Template.SingleQuote.events({
'click .link'(event) {
Session.set('currentPageName', event.target.text);
}
});
Edit:
Instead of what has been posted, it has been suggested by reviewers that I update this answer to make use of the following syntax:
'click .link': function(event) { /* ... */ }
Both of these are perfectly valid syntax for a Meteor Template Event, use whichever you feel most comfortable with.

I can't get my added element to activate a function

I am trying to add a link to the colorbox interface as it is created. It will eventually link to the currently displayed image file but for now I just want to get the console.log to work. It adds the link correctly (#print-one) but I can't get a function to run when the link is clicked. Any help would be much appreciated!
$(document).bind('cbox_complete', function () {
// Show close button with a delay.
$('#cboxClose').css('opacity', 1);
// Add Print Button
if ($('#print-one').length ) {
// Do Nothing
}else {
$('#cboxNext').after('Print');
}
});
$('#print-one').click(function() {
console.log('Works');
});
This is all wrapped inside the $(document).ready function. I just can't get the console log to work when the link is clicked. I have been beating my head against a wall trying to figure it out. Thanks for any help!
You need to delegate the event.
$(document).on('click', '#print-one', function(){});
It seems that the link is added just after cbox is initialized, which may not be ready when the compiler gets to the click binding function a few lines below.
Try this:
...
// Add Print Button
if ($('#print-one').length ) {
// Do Nothing
}else {
$('Print').insertAfter('#cboxNext').click(function() {
console.log('Works');
});
}

Drupal 7 FAPI ajax and jquery submit event

I am using #ajax in submit button of a form created using FAPI. Now when user submits the form, I want to run some jQuery validation before the form is submitted through ajax. As #ajax prevents events related to submit button such as submit, click, mousedown, keypress etc. I am not able to catch submit event using jQuery.
For now as a workaround, I have added custom code in ajax.js (misc/ajax.js) :
Drupal.ajax = function (base, element, element_settings) {
...
beforeSubmit: function (form_values, element_settings, options) {
//my custom code
alert(1);
...
This is against drupal best practices as I am hacking the core. Please any one can help me to do the same from my custom js file or any other approach to validate the content before ajax submit.
I think the accepted answer on the following post answers your question: How to extend or "hook" Drupal Form AJAX?
(function($) {
Drupal.behaviors.MyModule = {
attach: function (context, settings) {
// Overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSubmit = function (form_values, element, options) {
// ... Some staff added to form_values
}
//Or you can overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSerialize = function (element, options) {
// ... Some staff added to options.data
// Also call parent function
Drupal.ajax.prototype.beforeSerialize(element, options);
}
//...
i put this in the attach function
for (var base in settings.ajax) {
Drupal.ajax[base].options.beforeSubmit = function(form_values, element, options){
console.log('call your func');
}
}
it works!

FullCalendar with live event

I need to fire FullCalendar on live() method. So, I tried this:
$('.full-calendar').live('fullCalendar', function(){
return { header : .... //options here }
});
But this doesn't work. Do you think is possible to achieve this?
fullcalendar is not a supported event by .live()ref. Actually, this is not an event at all (unless you created it by yourself but it wouldn't then be supported by .live().
Your full calendar creation must be triggered by a real event (click, double-click,...)
You could probably use something like:
$('.full-calendar').live('click', function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});

Resources