CODEWITHSUNDEEP
meteormeteor-autoform
bp123
bp123

Reputation: 3417

UniqueId for autoform hook

This is probably are a really simple answer, however, I'm stumped. I have a lot of forms on my site. I would like to notify the user that an update form has been saved.

In this instance I'm creating a uniqueId, it's a Q&A form so there can be many question forms on one page. I'm not sure how to use the uniqueId with AutoForm.addHooks(); everything I've tried to date creates global autoform hooks which is not ideal because it affects all the other forms on the site. 

Template.answers.helpers({
  makeUniqueID: function () {
      return "update-each-" + this._id;
  },
});

var hooksObject = {
    onSuccess: function(formType, result) {
        var collectionId = this.docId;

        Meteor.call('sendEmail',
            collectionId
            );
    },
};

var answerForm = "update-each-" + this._id;
AutoForm.addHooks('answerForm', hooksObject);

UPDATE

Path: answer.js

var hooksObject = {
  onSuccess: function(formType, result) {
    var collectionId = this.docId;

    Meteor.call('sendEmail',
      collectionId
      );
  },
};

Template.answers.onCreated(function() {
  var self = this;
    self.autorun(function() {
        var id = FlowRouter.getParam('id');
        self.subscribe('answers', id);
    });
    this.formId = "update-each-" + this._id;
    console.log("oncreated: ", this.formId);

    AutoForm.addHooks(this.formId, hooksObject, true); 
});



Template.answers.helpers({
  answer: function() {
    return Answers.find({"userId": Meteor.userId()});
  },
  formId() {
   /**
    * expose the form id we set above to the template
    **/
      var test = Template.instance().formId;
      console.log("test: ", test);
      return Template.instance().formId;
   },
});

Path: answer.html

{{#each answer}}
  {{#autoForm id=formId type="update" collection="Answers" doc=this}}
  {{> afQuickField name='answer'}}
    <button type="submit">Save changes</button>
  {{/autoForm}}
{{/each}}

Upvotes: 1

Views: 132

Answers (1)

Ashley Reid
Ashley Reid

Reputation: 488

Updated based on new information from updated post and comment feedback. The key to this solution is calling AutoForm.addHooks inside your Template's onCreated event. Otherwise, you won't have access to the unique id:

answers.html

<template name="answers">
  {{#each answer}}
    {{> answerForm this }}
  {{/each}}
</template>

answers.js

Template.answers.onCreated(function() {
  this.autorun(() => {
    var id = FlowRouter.getParam('id');
    this.subscribe('answers', id);
  });      
});

Template.answers.helpers({
  answer: function() {
    return Answers.find({"userId": Meteor.userId()});
  }
});

answer.html

<template name="answerForm">
  {{#autoForm id=formId type="update" collection="Answers" doc=this}}
    {{> afQuickField name='answer'}}
    <button type="submit">Save changes</button>
  {{/autoForm}}
</template>

answer.js

Template.answerForm.onCreated(function onCreated() {
  /**
   * The data._id field is passed in to your template as data
   **/
  this.formId = "update-each-" + this.data._id;

  /**
   * Call addHooks with the third option, true, to replace any existing hooks for this form.
   * This is because addHooks will run every time an instance of this template is created.
   **/
  AutoForm.addHooks(this.formId, hooksObject, true);

});

Template.answerForm.helpers({
  formId() {
    /**
     * expose the form id we set above to the template
     **/
    return Template.instance().formId;
  }
});

Upvotes: 2

Related Questions