henryc
September 10, 2015, 10:22am
1
I am trying to create a user with Account.createUser but am finding it a bit difficult displaying the error on browser. here is my events codes and html codes respectively.
Template.register.events({
'submit form': function (event) {
event.preventDefault();
var user = {
email: $('[name=email]').val(),
password: $('[name=password]').val(),
}
Accounts.createUser(user, function (error) {
if (error) {
var message = error.reason;
template.find('#error').html(message);
}
});
},
});
<template name="register">
<div class="ui column centered grid container">
<div class="row">
<form class="ui form" id="register">
<div class="">
<div class="field">
<label>Email Address</label>
<input placeholder="Email" type="email" name="email">
</div>
<div class="field">
<label>Password</label>
<input placeholder="password" type="text" name="password">
</div>
<div class="field">
<label>confirm password</label>
<input placeholder="Confirm password" type="text" name="retypepassword">
</div>
</div>
<div class="ui blue submit button" id="submit" value="register">Submit</div>
<div class="ui error message" id="error"></div>
</form>
</div>
</div>
I get this error on my console
Exception in delivering result of invoking 'createUser': ReferenceError: template is not defined
How can I fix this?
This coming from:
template.find('#error').html(message);
Where you are referring to an undeclared object (template).
You need to amend the event to:
Template.register.events({
'submit form': function (event, template) {
1 Like
henryc
September 10, 2015, 10:42am
3
Tried it but a new error showed up.
Exception in delivering result of invoking 'createUser': TypeError: template.find(...).html is not a function
That’s because find returns a DOM element, not a jQuery object. If you want to use jQuery, you can do:
template.$('#error').html(message);
1 Like
henryc
September 10, 2015, 10:56am
5
Well no error returned on the console but error.reason did not display as expected.
I suggest adding a console.log(error) right before the var message = error.reason; line to see what’s actually coming back.
henryc
September 10, 2015, 11:21am
7
I already did that with alert('message'). it pops up the error as expected. However, when I try to display the error in a nicely formatted way, I get stuck.
Ok. Well, you should really be doing this with Meteor rather than jQuery
template
<template name="register">
<div class="ui column centered grid container">
<div class="row">
<form class="ui form" id="register">
<div class="">
<div class="field">
<label>Email Address</label>
<input placeholder="Email" type="email" name="email">
</div>
<div class="field">
<label>Password</label>
<input placeholder="password" type="text" name="password">
</div>
<div class="field">
<label>confirm password</label>
<input placeholder="Confirm password" type="text" name="retypepassword">
</div>
</div>
<div class="ui blue submit button" id="submit" value="register">Submit</div>
{{#if errorMessage}}
<div class="ui error message">{{errorMessage}}</div>
{{/if}}
</form>
</div>
</div>
</template>
Template.onCreated:
Template.register.onCreated(function() {
this.lastError = new ReactiveVar(null);
});
Template.helpers:
Template.register.helpers({
errorMessage: function() {
return Template.instance().lastError.get();
}
});
Template.events:
Template.register.events({
'submit form': function (event, template) {
event.preventDefault();
var user = {
email: $('[name=email]').val(),
password: $('[name=password]').val(),
}
Accounts.createUser(user, function (error) {
if (error) {
template.lastError.set(error.reason);
} else {
template.lastError.set(null);
}
});
},
});
Something along those lines, anyway. I haven’t sanity checked it, but it should work
You will also need to meteor add reactive-var to your project.
1 Like
henryc
September 10, 2015, 12:22pm
9
For some reason I don’t know, This doesn’t work and show nothing on the console
So, I’ve copied my code (above) into a new Meteor application and it works as expected.
What packages have you installed (meteor list)?
henryc
September 10, 2015, 1:23pm
11
accounts-base 1.2.0 A user account system
accounts-facebook 1.0.4 Login service for Facebook a...
accounts-password 1.1.1 Password support for accounts
aldeed:autoform 5.4.0* Easily create forms with aut...
aldeed:collection2 2.3.3* Automatic validation of inse...
autopublish 1.0.3 Publish the entire database ...
email 1.0.6 Send email messages
flemay:less-autoprefixer 1.1.0 The dynamic stylesheet langu...
insecure 1.0.3 Allow all database writes by...
iron:router 1.0.9 Routing specifically designe...
meteor-platform 1.2.2 Include a standard set of Me...
reactive-var 1.0.5 Reactive variable
sarasate:semantic-ui-datetimepicker 0.0.2 Semantic UI DateTime picker ...
semantic:ui 2.0.7* Official Semantic UI Integra...
Well, now I’m struggling. I’ve added those packages that were missing into my app and it still works. That leaves two possibilities as far as I can see.
Other parts of your codebase which you haven’t shared are clobbering something and/or
My package versions are ahead of yours. You could try meteor update but that’s clutching at straws IMO.
henryc
September 11, 2015, 3:53pm
13
I couldn’t figure this out. I just went ahead to use accounts-ui package for semantic-ui. It works well for now. Thank your for your response.
You’re welcome. I’m pleased you found a solution which works.
1 Like
chidimo
February 20, 2019, 11:18pm
15
Hi @robfallows , do you think I could accomplish something similar with a react template?
I’ve tried callbacks and whatnot. I’ve had no luck so far
. Make use of template helpers and reactive data.
