CODEWITHSUNDEEP
javascriptmeteor
Erik Johnson
Erik Johnson

Reputation: 55

Meteor - unable to prevent refresh

I have two different templates that use a datepicker to insert a subdocument with a date into a document. One works, one doesn't, even though they look identical. The item-due insert works fine; the delay-until insert just refreshes the page. I'm using the rajit:bootstrap3-datepicker package.

HTML (condensed):

<template name="itemsList">
  {{#each actionItems}}
    {{> item}}
  {{/each}}
</template>

<template name="item">
  <div class="item">
    <div class="item-content">
      <div class="mod-table">
        <form class="form-inline mod-field">
          {{#unless actionItem}}
            {{> delayUntil}}
          {{/unless}}
        </form>
        {{#if actionItem}}
          {{> actionModtable}}
        {{/if}}
      </div>
    </div>
  </div>
</template>

<template name="delayUntil">
  <form class="form-inline delay-until">  
    <div class="mod-field">
      <input type="text" class="form-control" name="text" id="delay-until-picker" placeholder="Ignore until..." /><button class="btn btn-default" type="submit">Submit</button>
    </div>
  </form>
</template>

<template name="actionModtable">      
  {{> datepicker}}
</template>

<template name="datepicker">
  <form class="form-inline item-due">  
    <div class="mod-field">
      <input type="text" class="form-control" name="text" id="due-date-picker" placeholder="Enter due date" /><button class="btn btn-default" type="submit">Submit</button>
    </div>
  </form>
</template>

JS (condensed):

Template.datepicker.rendered = function() {
  $('#due-date-picker').datepicker({
    todayBtn: true,
    autoclose: true,
    todayHighlight: true
  });
};

Template.datepicker.events({
  'submit .item-due': function(event) {
    event.preventDefault();

    var itemDue = event.target.text.value;

    Items.update(this._id, {$set: {itemDue: itemDue}});

    event.target.text.value = "";

    return false;
  },
});

Template.delayUntil.rendered = function() {
  $('#delay-until-picker').datepicker({
    todayBtn: true,
    autoclose: true,
    todayHighlight: true
  });
};

Template.delayUntil.events({
  'submit .delay-until': function(event) {
    event.preventDefault();

    var delayUntil = event.target.text.value;

    Items.update(this._id, {$set: {delayUntil: delayUntil}});

    event.target.text.value = "";

    return false;
  },
});

Upvotes: 0

Views: 460

Answers (1)

Erik Johnson
Erik Johnson

Reputation: 55

So the answer was a little silly. I had a form embedded within a form (oops). I got rid of the nesting and all is right with the world again.

Upvotes: 1

Related Questions