meteor - how to code a bootstrap modal template to re-render html input values even if the user has typed in them

Question

I'm using iron router to pass data to a bootstrap modal template. The modal contains a html form including many text inputs. The modal is re-used for 3 different features. I use a Session variable to keep track of which modal type is in use. Type 0 = blank form, type 1 = partial edit, type 2 = full edit. The form itself remains the same visually for all types. The only thing that changes is which input boxes contain a value.

For a type 1 edit only 2 boxes would contain values. For a type 2 edit all boxes would contain values. And the type 0 would be empty boxes.

// routes.js
Router.route('/mypage', function () {
    var mtype = Session.get("mtype");

    this.layout('myLayout');
    this.render('my_popup', {to:'my_popup', data: function() {
        switch (mtype) {
            case 1:
                return {box1:'box 1 text', box2:'box 2 text', box3:''};
            case 2:
                return {box1:'box 1 text', box2:'box 2 text', box3:'box 3 value'};
            default:
                return {box1:'', box2:'', box3:''};
        }
    }});
});

// main.html
<template name="myLayout">
  {{> yield "my_popup"}}
</template>

<template name="my_popup">
  <div class="modal fade" id="my_popup">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title label label-primary">Title</div>
        </div>
        <div class="modal-body">
          <form class="js-form-submit" id="my_form" name="my_form">
            <div class="form-group">
              <input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" value="{{box1}}"/>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="box2" maxlength="64" placeholder="something" value="{{box2}}"/>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" name="box3" maxlength="64" placeholder="something" value="{{box3}}"/>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="js-form-ok btn btn-success btn-sm">submit</button>
          <button class="btn btn-warning btn-sm" data-dismiss="modal">cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>

Initially I tried passing an object to the modal template that only contained the properties that would be displayed. That didn't overwrite existing input values so I had to use the same object for each modal type and use empty strings for unused properties. I tried calling the reset() method on the form prior to showing the modal. In that case it caused the entire template to stop re-rendering.

Prior to showing the modal I set the session variable to the type of modal that will be displayed. Session.set('mtype', 1); That triggers iron router into sending the proper data to the template, unused properties are cleared and the template successfully re-renders.

Unfortunately if I type in one of the html inputs the template does not reset its value when it's re-rendered. This seems to be related to the same problem I encountered with the reset() method. If the input contains custom text (value is typed) then the modal doesn't display the new data sent to the template when the Session variable is changed. It preserves the user entered text.

What's the best way to re-use a bootstrap modal form in meteor? Should I use a helper instead of iron router to get the data object? Something like...

{{#with getData}}

Why is the user entered text being preserved?

I've also tried using the defaultValue attribute instead of value. The same issue occurs with both attributes.

---

To test the bug:

• open the web console
• Session.set('mtype',1);
• $('#my_popup').modal('show');
• type something in the 3rd text box
• click off the modal to hide it
• Session.set('mtype',0);
• $('#my_popup').modal('show');

You'll see that the value you typed is still visible despite having sent empty strings to each box.

Another way:

• Session.set('mtype',2);
• $('#my_form')[0].reset();
• Session.set('mtype',1);
• $('#my_popup').modal('show');

You'll see that none of the boxes contain values despite having sent new strings of text to each box.

Answer 1

The only solution I've found is to use defaultValue in the template and then loop through the form fields before modal is shown and set value = defaultValue.

<input class="form-control" type="text" name="box1" maxlength="64" placeholder="something" defaultValue="{{box1}}"/>

Template.my_popup.rendered = function() {
  $("#my_popup").on('show.bs.modal', function() {
        var elems = $('#my_form')[0].elements;
        for (var i=0; i<elems.length; i++) {
            if (elems[i].hasAttribute('defaultValue')) {
                elems[i].value = elems[i].getAttribute('defaultValue');
            }
        }
  });
};