I'm currently working on implementing a dynamic help feature that changes when the focus shifts using Meteor AutoForms. It's similar to the "Similar Questions" box that appears when you ask a question here. However, I'm encountering an issue where I receive a "ReferenceError: myFunc is not defined" when the field gains focus.
I've experimented with different ways of defining the myFunc function, such as as a non-wrapped function or a template helper in my .js file, or even as a <script> wrapped function in the .html file. I've also tried using an in-line function as part of the onfocus attribute, but that approach seems messy and it fails to find the title and text arrays in the .js file. The same problem occurs with onclick events. I also attempted to use a Template focus or click event, but it never fires.
Below is a snippet of the sample code. I've omitted all the <div> elements for clarity. The form displays correctly in the actual code; it's just the onfocus attribute that isn't functioning as expected.
.html
<template name="updateProfileForm">
{{#autoForm id="updateProfileForm" collection="Meteor.users" doc=currentUser type="update"}}
{{> afQuickField
name="emails.1.address"
id="secondaryEmail"
label='Secondary Email'
onfocus='ProfileUpdateHelp("secondary")'}}
</template>
.js
Template.updateProfileForm.helpers ({
ProfileUpdateHelp: function(fieldName) {
// console.log("This:", this);
// console.log("instance():", instance());
TemplateVar.set('helpTitle', profileUpdateHelpTitles[fieldName]);
TemplateVar.set('helpText', profileUpdateHelpTexts[fieldName]);
},
});
profileUpdateHelpTitles = {
primary: "Primary email address",
secondary: "Secondary email address",
};
profileUpdateHelpTexts = {
primary: "Primary email address help",
secondary: "Secondary email address help",
};
I also tried using events, and none of them seem to fire (I would expect all 3 to fire):
Template.updateProfileForm.events({
"click #secondaryEmail": function(e) {
alert("Click");
},
"focus #secondaryEmail": function(e) {
alert("focus");
},
"blur #secondaryEmail": function(e) {
alert("blur");
},
});