How to launch existing HTML content in a Bootstrap Modal dynamically, without having modal html for each link?

Question

I've read a few articles on loading remote content into modals or dynamic content, and have read the #531 issue https://github.com/twitter/bootstrap/issues/531 but can't quite find what I want, perhaps because I'm thinking about the problem in the wrong way.

I have a list of content, each item showing a different product and some details about it. I want to be able to click a 'view details' link for each product, and have the same content populate in a modal, but will use CSS to display some very small additional information (my question could be how to retrieve different content dynamically, but I think that given how little extra data I need, it's not worth the request).

The HTML for a list item:

<ul>
    <li class="span4 product">
        <div class="inner">
            <img src="xxxxx" alt="Product xxxxx" />
            <div class="control-group">
                <label class="control-label">Product Type:</label>
                <span class="field">Really cool product</span>
            </div>
            <!-- Small amount of hidden additional information -->
            <div class="control-group hide">
                <label class="control-label">Product ID:</label>
                <span class="field">123456</span>
            </div>
        </div>
        <a class="details" data-toggle="modal" href="#product-details">View details</a>
    </li>
</ul>

1 Bootstrap Modal HTML:

<div id="product-details" class="modal hide fade" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
       <!-- Product Detail in here dynamically -->
    </div>
</div>

When you click the 'details' link, I want the 'inner' content to show in a modal. There's two issues here:

1. There are many items in this list (I've just shown 1), and I want each 'details' link to show the details of that product in the modal.
2. I don't want to have loads of additional static modal html code as the target for each item, I just want 1 modal, but the content different depending on which 'details' link is clicked.

I assume I'll need the one modal in the html, as shown in this question about remote modal dialogues.

It's just how I change the content of it that I'm not sure about.

EDIT

I've found a solution of sorts (but can't answer my own question for a few hours).

$('.product a.details').click(function(){
    $(this).parent('.inner').clone().appendTo('#device-modal .modal-body');
    $('#product-details').modal();
});

$('#product-details').on('hidden', function(){
    $('#product-details .inner').remove();
});

It clones the 'inner' div of the 'product' and appends it to the static modal container when the 'details', then launches the modal when the link is clicked.

The second part removes that clone if you exit the modal.

Answer 1

I'm currently using this as my solution. Remove the tag in the html, as it's not actually pointing to content and set the click function to the list item itself.

$('.product').click(function(){
    $(this).find('.inner').clone().appendTo('#device-modal .modal-body');
    $('#product-details .modal-body .control-group.hide').show();
    $('#product-details').modal();
});

$('#product-details').on('hidden', function(){
    $('#product-details .inner').remove();
});

It clones the 'inner' div of the 'product' and appends it to the static modal container when the 'details' link is clicked. It then shows the divs that were hidden, and launches the modal.

The second part removes that clone if you exit the modal.

I then have some specific CSS styles that target the content in the modal, so it has a different look. You could of course add display:block to the hidden divs in the modal instead of using jQuery to show them.

One thing I'm not sure of, is whether the actual modal div (#product-details in my case) should be created with jQuery, because it is an empty div in the html otherwise which seems semantically incorrect.