CODEWITHSUNDEEP
javascriptjquerymeteor
user1072337
user1072337

Reputation: 12945

Uncaught RangeError: Maximum call stack size exceeded Meteor.js form

I have a form that I am submitting (and using a reactiveVar to change the output in the view on submit). Whenever I submit successfully I get this ominous error:

Uncaught RangeError: Maximum call stack size exceeded
isArguments @ es5-shim.js:888
keys @ es5-shim.js:951
_.each._.forEach @ underscore.js:111
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500

I have two event handlers in someview.js:

Template.inquiry.events({
  'click .submit': function(event, template) {
    var $form = template.$('#request-form');

    if ($form.valid()) {
          template.showForm.set( false );

          Meteor.setTimeout( function() {
            template.showForm.set( true );
          }, 10000); // Reset after 10 seconds.
    }
  },
});

Template.inquiry.events({
    'submit form': function(event) {
        event.preventDefault();
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });
    }
});

and a helper to grab the initial reactiveVar (showForm):

Template.inquiry.helpers({

  //toggles 'thank you' on inquiry template
  showForm: function () {
    return Template.instance().showForm.get();
  },
});

Why am I getting this error?

Upvotes: 3

Views: 1737

Answers (1)

Thai Tran
Thai Tran

Reputation: 9935

You should not put 2 events triggered at the same time. The moment the button is clicked, the form is submitted as well (I believe the timeout is making the recursive calling between the submit and the click), thus giving you the unexpected error. You need to merge those 2 together (and this is natural) 

Template.inquiry.events({
    'submit form': function(event, template) {

    event.preventDefault();
    var $form = template.$('#request-form');

    if ($form.valid()) {
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });

        template.showForm.set( false );

        Meteor.setTimeout( function() {
            template.showForm.set( true );
        }, 10000); // Reset after 10 seconds.
    }
}

});

and remove the click event

Upvotes: 1

Related Questions