We Keep Coding

Meteor class being fired multiple times from JQuery.click()

I have a generic template that I use multiple times.
{{#each item}}
{{> genericTemplate}}
{{/each}}
Inside of this template I have a button that when it is clicked fires a hidden file input in the generic template.
$(".upload").click();
Unfortunately for each template the ".upload" class gets fired. So if I had four items, it would give me 4 file inputs. I can't give the buttons a unique id="" because then I would have to explicitly define each event for each id, negating the entire reason for creating the generic template in the first place. What is the proper way to achieve something like this?
EDIT:
My template events look like this:
Template.generic.events({
'click .fileUpload' : function () {
$(".upload").click(); // sets off the 4 templates .upload class
},
'change .upload' : function (e) {
console.log('upload')
}
})
HTML:
<template name="generic">
<!--Hidden Inputs that get fired on click events -->
<div class="hiddenFile">
<input type="file" class="upload"/>
</div>
<button class="btn btn-success fileUpload">UPLOAD FILE </button>
</template>

Try this trick :
Template.generic.events({
'click .fileUpload' : function (event,template) {
// fires only the template instance .upload
template.$(".upload").click();
},
'change .upload' : function (e) {
console.log('upload')
}
});

You can use Template.instance to fire the event in only the appropriate instance:
'click .fileUpload' : function () {
var template = Template.instance();
template.$(".upload").click(); // should only set off this specific upload input.
}
That said, is there really no way you can achieve the same effect without manufacturing an event in the DOM? It's up to you, but can't you just run the code that's going to replace console.log('upload') directly?

Maybe smth like this?
Template.generic.events({
'click .fileUpload' : function (event, target) {
e.currentTarget.parent().find(".upload").click(); // sets off the 4 templates .upload class
},
'change .upload' : function (e) {
console.log('upload')
}
})

Meteor -- bind click handler to button inside a conditional

I have a Meteor template with 2 possible HTML blocks, depending on a conditional: already_facebook_authed. As the code below shows, already_facebook_authed is the result of a Session variable, and that Session variable is asynchronously set. It seems like when the template is rendered, the Session variable (and thus already_facebook_authed) is falsey so when trying to bind a click handler to #deauth_facebook_button, it does not exist yet because it is in the other block which is not yet rendered.
How can I bind a click handler to #deauth_facebook_button? Perhaps there is some callback for when a certain DOM element is rendered in which I can instantiate this click handler?
------------
-- auth.html
<template name="accounts_auth_with_facebook">
{{#if already_facebook_authed}}
<div class="col-md-4">
<button id="deauth_facebook_button" class="btn btn-primary"> Deauth Facebook </button>
</div>
{{else}}
<div class="col-md-4">
<div id="facebook_button"> Authenticate with FB </div>
</div>
{{/if}}
</template>
----------
-- auth.js
Template.accounts_auth_with_facebook.rendered = function () {
$('#facebook_button').unbind('click.auth').bind('click.auth', function() {
// some handler code
});
$('#deauth_facebook_button').unbind('click.deauth').bind('click.deauth', function() {
// some other handler code
});
};
Template.accounts_auth_with_facebook.already_facebook_authed = function() {
Meteor.call('get_composer_id', function (error, result) {
if (blah blah blah) {
Session.set('logged_in_with_facebook', true);
}
});
return Session.get('logged_in_with_facebook');
};

Do not use jQuery for setting up click handlers on Meteor templates, use the Meteor standard events mechanism :
Template.accounts_auth_with_facebook.events({
"click #facebook_button":function(event,template){
// some handler code
}
"click #deauth_facebook_button":function(event,template){
// some other handler code
}
});

.hasClass on.click not registering for a function call until a second .click..ajax async?

Some checkbox buttons (using bootstrap) trigger an ajax get call on.click, and the activeness of the checked buttons serves a filtering mechanism.
Right now, why is the filtering only working correctly on.click of a second click event (if btn1 is clicked, the ajax runs, with /.one.two.three... and only when btn2 is subsequently clicked does it register as /.two.three.. and only when btn3 is subsequently clicked does it registers as /.three..? http://jsfiddle.net/ENJH9/2/
Alternatively, if the refreshData() call is preceded by removing the class on.click, the data is served correctly, but the view does not reflect the removeClass!? http://jsfiddle.net/ENJH9/3/
All the buttons start with an active class (http://getbootstrap.com/javascript/#buttons):
<div class="btn-group" data-toggle="buttons" id="theBtns">
<label class="btn btn1 active">
<input type="checkbox">one
</label>
<label class="btn btn2 active">
<input type="checkbox">two
</label>
<label class="btn btn3 active">
<input type="checkbox">three
</label>
<label class="btn btn4 active">
<input type="checkbox">four
</label>
</div>
Here's the .get Call that follows the .click event of each button:
function refreshData() {
console.log('started refreshData()')
URL = '';
var filtering = function() {
if($(".btn1").hasClass("active")) { URL += ".one"; }
if($(".btn2").hasClass("active")) { URL += ".two"; }
...
console.log('done filtering: ' + URL);
return URL;
};
$.when( filtering() ).done(function() {
console.log('now data refresh with %s filtering', URL)
$.ajax({
url:"http://localhost:4200/api/v1/data" + URL,
method:'get',
success: foundAllSuccess,
error: foundError
})
});
}
And here's the click event with the removeClass commented out (the buttons still remained visually active and the class still remained in the inspector, but the server accurately filters with this setup):
$( ".btn1" ).click(function() {
// if($(".btn1").hasClass("active")) {$(".btn1").removeClass("active"); console.log('hide btn1 data');}
// else {$(".btn1").addClass("active"); console.log('btn1 data active');}
refreshData();
}); // .btn1.click

Firstly, the main reason you are having a problem is that bootstrap and jQuery don't sit too comfortably together - at least not in this case. jQuery's click event is dispatched so early, it happens before bootstrap has toggled 'active'. Therefore refreshData() operates on the button state before the click, not after the click. This can be overcome with a timeout() to delay execution of refreshData() until after bootstrap has done its thing.
Secondly, you don't need to toggle active as bootstrap looks after that aspect.
Thirdly, the code can be written more efficiently by better leveraging jQuery.
function refreshData(e) {
var URL = $(e.target).closest(".btn-group").find("label").map(function (i) {
if ($(this).hasClass("active")) {
return ['.one', '.two', '.three', '.four'][i];
} else {
return null;
}
}).get().join(''); //.map() returns an array, .join() concatenates the strings in the array into a single string.
alert('now ajax call with filtering :' + URL);
}
$("#theBtns .btn").on('click', function (e) {
setTimeout(function () {
refreshData(e);
}, 0);
});
DEMO
Note that even a delay of zero is enough for our purpose, as code executed from a setTimeout will run in a separate event thread at the earliest opportunity after the current thread has run to completion.
There may be a more "bootstrapy" way to achieve the same end but I'm not about to wade through tons of bootstrap documentation to find out.

Defining a single jQuery function for separate DOM elements

I have several jQuery click functions- each is attached to a different DOM element, and does slightly different things...
One, for example, opens and closes a dictionary, and changes the text...
$(".dictionaryFlip").click(function(){
var link = $(this);
$(".dictionaryHolder").slideToggle('fast', function() {
if ($(this).is(":visible")) {
link.text("dictionary ON");
}
else {
link.text("dictionary OFF");
}
});
});
HTML
<div class="dictionaryHolder">
<div id="dictionaryHeading">
<span class="dictionaryTitle">中 文 词 典</span>
<span class="dictionaryHeadings">Dialog</span>
<span class="dictionaryHeadings">Word Bank</span>
</div>
</div>
<p class="dictionaryFlip">toggle dictionary: off</p>
I have a separate click function for each thing I'd like to do...
Is there a way to define one click function and assign it to different DOM elements? Then maybe use if else logic to change up what's done inside the function?
Thanks!
Clarification:
I have a click function to 1) Turn on and off the dictionary, 2) Turn on and off the menu, 3) Turn on and off the minimap... etc... Just wanted to cut down on code by combining all of these into a single click function

You can of course define a single function and use it on multiple HTML elements. It's a common pattern and should be utilized if at all possible!
var onclick = function(event) {
var $elem = $(this);
alert("Clicked!");
};
$("a").click(onclick);
$(".b").click(onclick);
$("#c").click(onclick);
// jQuery can select multiple elements in one selector
$("a, .b, #c").click(onclick);
You can also store contextual information on the element using the data- custom attribute. jQuery has a nice .data function (it's simply a prefixed proxy for .attr) that allows you to easily set and retrieve keys and values on an element. Say we have a list of people, for example:
<section>
<div class="user" data-id="124124">
<h1>John Smith</h1>
<h3>Cupertino, San Franciso</h3>
</div>
</section>
Now we register a click handler on the .user class and get the id on the user:
var onclick = function(event) {
var $this = $(this), //Always good to cache your jQuery elements (if you use them more than once)
id = $this.data("id");
alert("User ID: " + id);
};
$(".user").click(onclick);

Here's a simple pattern
function a(elem){
var link = $(elem);
$(".dictionaryHolder").slideToggle('fast', function() {
if (link.is(":visible")) {
link.text("dictionary ON");
}
else {
link.text("dictionary OFF");
}
});
}
$(".dictionaryFlip").click(function(){a(this);});
$(".anotherElement").click(function(){a(this);});

Well, you could do something like:
var f = function() {
var $this = $(this);
if($this.hasClass('A')) { /* do something */ }
if($this.hasClass('B')) { /* do something else */ }
}
$('.selector').click(f);
and so inside the f function you check what was class of clicked element
and depending on that do what u wish

For better performance, you can assign only one event listener to your page. Then, use event.target to know which part was clicked and what to do.
I would put each action in a separate function, to keep code readable.
I would also recommend using a unique Id per clickable item you need.
$("body").click(function(event) {
switch(event.target.id) {
// call suitable action according to the id of clicked element
case 'dictionaryFlip':
flipDictionnary()
break;
case 'menuToggle':
toggleMenu()
break;
// other actions go here
}
});
function flipDictionnary() {
// code here
}
function toggleMenu() {
// code here
}
cf. Event Delegation with jQuery http://www.sitepoint.com/event-delegation-with-jquery/

Prototype event handler

I've defined the following HTML elements
<span class="toggle-arrow">▼</span>
<span class="toggle-arrow" style="display:none;">▶</span>
When I click on one of the elements the visibility of both should be toggled. I tried the following Prototype code:
$$('.toggle-arrow').each(function(element) {
element.observe('click', function() {
$(element).toggle();
});
});
but it doesn't work. I know everything would be much simpler if I used jQuery, but unfortunately this is not an option:

Instead of iterating through all arrows in the collection, you can use the invoke method, to bind the event handlers, as well as toggling them. Here's an example:
var arrows = $$('.toggle-arrow');
arrows.invoke("observe", "click", function () {
arrows.invoke("toggle");
});
DEMO: http://jsfiddle.net/ddMn4/

I realize this is not quite what you're asking for, but consider something like this:
<div class="toggle-arrow-container">
<span class="toggle-arrow" style="color: pink;">▶</span>
<span class="toggle-arrow" style="display:none; color: orange;">▶</span>
</div>
document.on('click', '.toggle-arrow-container .toggle-arrow', function(event, el) {
var buddies = el.up('.toggle-arrow-container').select('.toggle-arrow');
buddies.invoke('toggle');
});
This will allow you to have multiple "toggle sets" on the page. Check out the fiddle: http://jsfiddle.net/nDppd/
Hope this helps on your Prototype adventure.

Off the cuff:
function toggleArrows(e) {
e.stop();
// first discover clicked arow
var clickedArrow = e.findElement();
// second hide all arrows
$$('.toggle-arrow').invoke('hide');
// third find arrow that wasn't clicked
var arw = $$('.toggle-arrow').find(function(a) {
return a.identify() != clickedArrow.identify();
});
// fourth complete the toggle
if(arw)
arw.show();
}
Wire the toggle arrow function in document loaded event like this
document.on('click','.toggle-arrow', toggleArrows.bindAsEventListener());
That's it, however you would have more success if you took advantage of two css classes of: arrow and arrow-selected. Then you could easily write your selector using these class names to invoke your hide/show "toggle" with something like:
function toggleArrows(e) {
e.stop();
$$('.toggle-arrow').invoke('hide');
var arw = $$('.toggle-arrow').reject(function(r) {
r.hasClassName('arrow-selected'); });
$$('.arrow-selected').invoke('removeClassName', 'arrow-selected');
arw.show();
arw.addClassName('arrow-selected');
}