JavaScript jade modal variable

Question

Folks, I am trying to dynamically generate a modal. How would I find this piece of text and swap in the values?

I have a label, which I would like to dynamically set the content to from the table. Whats the proper way to find and replace the | .emailAddress | .emailAddress ?

.modal-body
    h3
        span.label.label-info Email
        | .emailAddress

script.
 var $modal = $('#mymodal')
  , $titleField = $modal.find('.modal-title')
  , $emailField = $modal.find('| .emailAddress');

 $('body').on('show.bs.modal', '.modal', function () {
    var mid = $(event.target).closest('tr').data('id');
    var email = $(event.target).closest('tr').data('email');
    $titleField.text(email);
    $emailField.text(email);
 });

Answer 1

You don't explain how you're using Jade, there are two versions:

1. server side, your client get an generated HTMl
2. client side, you compile your Jade template to JavaScript and load the JS file in the client.

For your problem there are two solutions:

• You change the HTML which is already generated because the user action can be triggered after the page is loaded. (this is how your solution looks like, but this has nothing to do with Jade!)
• You reload the Jade template: remove the old template from the DOM and pass the use data (from the modal action) to the new template, only works for solution 2.

But maybe your error is this selector, which is not correct:

$modal.find('| .emailAddress');
try this:
$modal.find('.emailAddress');