How to return an html modal target view from serve

Question

I want to have a button on the website that opens up a modal view using bootstrap. Like so:

<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

So this button is targeting a view called #myModal. Instead of loading the #myModal view from the client html, I want to make an AJAX request to the server to get #myModal view because the view will be different depending on if the user is admin or not, and that variable resides on the server.

So the request would be something like this:

$('#modalButton').click() -> 
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","/modalFeedback",true);
  xmlhttp.send();

Then the /modalFeedback route should check if the user is admin or not, and send back the corresponding #myModal view. I am confused on how to implement this exactly, more specifically how to return the #myModal view from the server so it opens up normally.

If someone could help me with some pseudo-code that would be extremely helpful!

UPDATE

I got it working with the bootstrap remote option (see answer below), here is how I called the modal:

a#uservoice_tab(data-toggle="modal", href="/modalFeedback.html", data-target="#myModal")
  img(src='/img/icon-idea.png')
// You need to have #myModal element in the same place you have the button. Bootstrap injects the body into this element remotely
#myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')

Here is the modalFeedback.html source in jade

.modal-dialog
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
        h4#myModalLabel.modal-title Modal title
      .modal-body
      .modal-footer
        button.btn.btn-default(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

Answer 1

I suggest keep blank the modal div in the html..

<div id="modalbox" >
</div>
<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal"       
data-target="#myModal">
 Launch demo modal
</button>

Call the ajax to server and return model box html content string based on admin or else and fill it on modal button click and make modal visible ..

$('#modalButton').click() -> 
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","/modalFeedback",true);
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
  document.getElementById("modalbox").innerHTML=xmlhttp.responseText;
 }
}    
xmlhttp.send();
$("#modalbox").show();

Answer 2

Since you appear to be using bootstrap, it actually has this built in so that you don't have to do the ajax call yourself. Take a look at the remote option for modals.

The content that you return simply needs to be the HTML fragment you want to be in the content of the modal.

An example of how you would return the html for the modal if you're using express is as follows (using jade as your templating engine but it could be whatever you like):

app.set('view engine', 'jade');

app.get(
    '/modalFeedback'
    ,function(req, res, next){
        res.render('/modalFeedback.jade', { user: req.user });
    }
);

The template, in this case modalFeedback.jade would have just html in it, well a jade version of html anyway and this is the html you wish to show up in the modal. You could even instead of simply rendering the template at first do some checks if the user is admin or whatever. Depending on the check then you could choose which template to render. The key is res.render goes and gets the file passing it the data you provide and will return it to the browser call from the modal.

Update: remote is deprecated since v3.3.0 and removed in v4. (This would have been better suited as a comment but is likely to be missed, hence putting it here to protect people's time in managing backward compatibility issues later)