Search code examples
javascriptmeteormeteor-blazemeteor-autoform

Is there any way to show the current saved state with meteor.js autoform package?

I'm using meteor.js with the aldeed:autoform package with its autosave feature and I'm trying to think of a way to show when the form is saving and when all the data has been saved.

Solution

  • Since autoforms abstracts away the call to save, you can't use the callback, so you'll have to use observeChanges to listen to a change to that value, or hack into autoforms a little bit. Honestly, if you're going to go this route, you're past the proof of concept phase & you might (definitely) want to consider rolling your own forms because you've outgrown autoforms.

    Let's say you've got a span below your field like: <span class="just-saved">Saved!</span>

    Here's an example callback (from an input change event): 

    function (err, res) {
      if (err) console.log(err);
      var $justSaved = $(t.find('.just-saved'));
      $justSaved.addClass('saving');
      setTimeout(function () {
        $justSaved.removeClass('saving');
      }, 1500);

    If you were going to do this from a changed callback, you'd just change the find to something like (input[name="user.$.phoneNumber"]) & grab the sibling. Here's an example of what the code above will get you:

    Example