Modal popup doesn't show variable with Meteor

Question

I'm a newby with Meteor and Javascript and I'm programming a simple web app that gives a list of registered messages. You can click a remove button to remove that message from the list or you can click a '...' button to show extra information about that message, such as the message text. That extra information would be show in a modal popup. However, I've tried to show the message in the modal but it doesn't work.

Here's the template for the modal in het *.html file:

<template name="show_message">
 <div class="modal fade" id="messagewindow">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <h3>Message</h3>
  </div>
  <div class="modal-body">
   {{message}}
  </div>
  <div class="modal-footer">
   <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
 <div>
</template>

Here's the function in the *.js file that fills the message variable (cfr. {{message}}):

Template.show_message.message = function() {
 p = problems.findOne({_id:Session.get('selected_message')});
 return p.Message;
};

I have a collection problems:

problems = new Meteor.Collection("Problems")

And a problem looks like this:

problems.insert({Problem : {Message:m, Patient_name:p_name, PID:p_id, Request:req}});

The function to calculate the ID of the selected problem (cfr. Session.get('selected_problem) would be ok because the remove function (to remove items from the list) works.

I've also tried to return a normal string. In that case the string appears in the modal popup:

Template.show_message.message = function() {
 return "example_message";
};

I've searched the web but couldn't find anything that can helps me. Are here some experts who can see what's going wrong?

Many thanks.

There is a wild guess: the methods of modal window you use rely on DOM manipulations and Meteor's UI framework doesn't work really well with such things. What you could do, is to store the value in some hidden node and then on modal window show up event, copy the right data from hidden node to the one your library uses. — imslavko

Peppe L-G Peppe L-G · Accepted Answer · 2013-07-29T08:17:36

If a problem document looks like {Problem : {Message:m, Patient_name:p_name, PID:p_id, Request:req}} you should return p.Problem.Message in the Template.show_message.message function instead of p.Message (or use {Message:m, Patient_name:p_name, PID:p_id, Request:req} as the problem document).

Modal popup doesn't show variable with Meteor

1 Answers