CODEWITHSUNDEEP
meteorhookmeteor-autoform
SLRM
SLRM

Reputation: 103

MeteorJS AutoForm.Hooks not updating doc

I'm using the great aldeed:autoform package for MeteorJS. I've got a custom form that lets me create db entries.

One of the user-entered form fields is for Suburb and I'm using the sergeyt:typeahead package to make suggestions on this as the user types.

The suggestions are in a format that's familiar to users (essentially it's "suburb, STATE, zipcode"). I call this longsuburb.

I'm then using the AutoForm before hook to split out a Zipcode ("postcode") value and a "suburb" value from the user selected/entered longsuburb value. The hook then inserts the suburb and postcode values into the doc before it's submitted.

This is all working great.

Now I want to create an Edit form where a user can edit the details (down the line I plan to use the same form for both, but it's one step at a time for me as I'm a novice).

I've set up an Edit form template and have set the type to "update" as per the AutoForm examples.

I can successfully edit all of the form details and they save to the collection, except that my AutoForm hook doesn't seem to get called at all so the "suburb" and "postcode" values for the doc are staying the same on submit.

I've tried a few different approaches but am largely shooting in the dark so any advice would be great.

Here's the Edit Form template

    <template name="editBar">
  {{#autoForm collection="Bars" id="editBarsForm" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9" type="update" doc=this}}
  <fieldset>
    <legend>Edit Bar</legend>
    {{> afQuickField name='bar_name' placeholder="Name of the Bar, Pub, Venue" class="form-control typeahead" }}
    {{> afQuickField name='image' class="form-control typeahead" }}
    {{> afQuickField name='url' placeholder="Venue's Website" class="form-control typeahead" }}
    {{> afQuickField name='longsuburb' placeholder="Suburb" class="form-control typeahead" autocomplete="off" spellcheck="off" data-source="getSuburbs"}}
    {{> afQuickField name='barType' options=bartypes class="selectpicker"}}
  </fieldset>
  <button type="submit" class="btn btn-primary submit">Submit</button>
    <a class="btn btn-danger delete" href="#">Delete post</a>
    <a class="btn btn-default cancel" href="#">Cancel</a>
  {{/autoForm}}
</template>

And here's what I have in the Edit Form JS file

      Template.editBar.helpers({
  getSuburbs: function() {
    return AuPostcodes.find().fetch().map(function(it){ return it.longsuburb;     });
    console.log('it');
  },

  bartypes: function() {
    return [
      {label: "Select", value: ""},
      {label: "Bar", value: "bar"},
      {label: "Pub", value: "pub"}
    ];
  }

});



  Template.editBar.rendered = function(){
    Meteor.typeahead.inject();
  };


  //Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
  //"suburb" currently used for filtering.

  AutoForm.hooks({
      editBarsForm: {
          before:{
            insert: function(doc) {
              var suburbString = doc.longsuburb;
              var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
              var suburb = suburbString.substring(0,suburbString.indexOf(","));
              doc.postcode = postcode;
              doc.suburb = suburb;
              return doc; //autoFrom magic commence
              }
            }
          }
        });

Template.editBar.events({
  'click .delete': function(e) {
    e.preventDefault();

    if (confirm("Delete this bar?")) {
      var currentBarId = this._id;
      Bars.remove(currentBarId);
      Router.go('barsList');
    }
  },
  'click .cancel': function(e) {
    e.preventDefault();
    Router.go('barsList');
  }
});

The add template and code are largely the same. As I say all works well for Creating a record. I can also edit name, url, longsuburb etc and they are saved to the DB. It's just the doc insert that's not working.

Upvotes: 3

Views: 1434

Answers (2)

SLRM
SLRM

Reputation: 103

Thanks @Johnny. That almost did the trick, but with your help I was able to solve it.

Basically I had two problems. As you pointed out I did indeed need to use doc.$set.key to update the postcode and suburb values. But I also needed to define the suburbString variable using the AutoForm.getFieldValue callback.

So the full solution looks like:

  //Split out suburb and postcode from form's long suburb sting and submit with doc to Bars collection.
 //"suburb" currently used for filtering.

AutoForm.hooks({
  editBarsForm: {
      before:{
        update: function(doc) {
          var suburbString = AutoForm.getFieldValue("longsuburb");
          var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
          var suburb = suburbString.substring(0,suburbString.indexOf(","));
          doc.$set.postcode = postcode;
          doc.$set.suburb = suburb;
          return doc; //autoForm magic commence
          }
        }
    });

Upvotes: 5

Johnny
Johnny

Reputation: 73

It looks like doc.longsuburb is undefined. I have had a similar issue before. You can try to get the longsuburb value from this.currentDoc.longsuburb

According to the docs: https://github.com/aldeed/meteor-autoform#callbackshooks

The following properties and functions are available in all submission hooks when they are called. This does not include formToDoc, formToModifier, or docToForm.

...

this.currentDoc: The current document attached to the form (from doc attribute)

So in your Edit Form JS file, it should look like this:

//Split out suburb and postcide from form's longsuburb string and submit with doc to Bars collection.
//"suburb" currently used for filtering.

AutoForm.hooks({
  editBarsForm: {
    before:{
      update: function(doc) {
                var suburbString = this.currentDoc.longsuburb;
                var postcode = suburbString.substring(suburbString.lastIndexOf(",")+2,suburbString.length);
                var suburb = suburbString.substring(0,suburbString.indexOf(","));
                doc.$set.postcode = postcode;
                doc.$set.suburb = suburb;
                return doc; //autoFrom magic commence
              }
    }
  }
});

Upvotes: 1

Related Questions