I have implemented the suggestion of the person commenting here: http://techhunting.wordpress.com/2013/01/27/bootstrap-modal-in-meteorjs/#comment-56. I am using sessions. But I have a problem because even though the Modal shows, the problem is that it is not alway everytime that changes to the Session data using Session.set reflect directly to t…

login.js

// However, if i run the following code, i encounter a serious problem. 
// Though everytime the modal is needed to be shown it shows properly. 
// The problem is that the Session.set data that runs before showing
// the modal does not always appear when the modal is shown. Sometimes,
// what's shown is the previous Session.set. Sometimes the behaviour is
// as expected, but sometimes, it doesn't work. 

// An example scenario would be when I login, and put in black username/email
// and password. The modal would show and ouput the Email or password is empty
// content, which is expected. But when i finally login successfully by closing,
// the modal and retyping the login credentials, the same data would be shown. 
// and not the Thanks for logging in information.

// I believe this is with regards to the time it takes to update the Reactive
// data from the inner modal, to when the data is shown. Any suggestions for this?

Template.loginTemplate.events({

  'submit #login-form' : function(e, t){
    e.preventDefault();
    // retrieve the input field values
    var email = t.find('#login-email').value;
    var password = t.find('#login-password').value;

    // Trim and validate your fields here.... 
    email = $.trim(email);
    password = $.trim(password);

    if (email.length == 0 && password.length == 0) {

      Session.set("ModalContent", "Either email or password is empty.");
      Session.set("ModalTitle", "Error");
      Session.set("ModalShowSave", false);
      $('#modalTemplate').modal('show');
      
      return false;
    }

    // If validation passes, supply the appropriate fields to the
    // Meteor.loginWithPassword() function.
    Meteor.loginWithPassword(email, password, function(err){
      if (err)
      {

        Session.set("ModalContent", "Error encoutered! " + err);
        Session.set("ModalTitle", "Error");
        Session.set("ModalShowSave", false);
        $('#modalTemplate').modal('show');

        
        console.log("error encountered.");
      }
      else
      {
        
        Session.set("ModalContent", "Thanks for Logging in!");
        Session.set("ModalTitle", "Welcome back.");
        Session.set("ModalShowSave", false);
        $('#modalTemplate').modal('show');

        console.log("the user is logged in.");
      }
    });
    
    return false; 
  }
});

modal.js

Session.setDefault("ModalContent", "Sample content.");
Session.setDefault("ModalTitle", "Sample Title");
Session.setDefault("ModalShowSave", false);

Template.modalContentTemplate.content = function () {
  return Session.get("ModalContent");
}

Template.modalContentTemplate.title = function () {
	return Session.get("ModalTitle");
}

Template.modalContentTemplate.show_save = function () {
	return Session.get("ModalShowSave");
}

modalContentTemplate.html

<template name="modalContentTemplate">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">{{title}}</h3>
  </div>
  <div class="modal-body">
    {{content}}
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    {{#if show_save}}
    <button class="btn btn-primary">Save changes</button>
    {{/if}}
  </div>
</template>

modalTemplate.html

<template name="modalTemplate">
<div id="modalTemplate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  {{> modalContentTemplate}}
</div>
</template>