Twitter bootstrap 2 - Modal - Can't update Div contents dynamically

Question

I have a bunch of links with a class of ShowDetails . For each of these links I want to display a modal window, MyModal , and replace the content of a div, DocDetails . When I try to do this via the following JavaScript the div contents is never updated, but there is no error thrown:

$("a[class='ShowDetails']").on( "click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $('#DocDetails').replaceWith( "details" );
    $('#MyModal').modal('show');
}); 

Any help resolving this would be great. My long term goal is to get content to repace DocDetails with from an AJAX response, this part works fine so isn't associated with the problem.

Answer 1

The Javascript looks correct to me so I would therefore assume that there is something wrong with the HTML.

I've knocked up a Fiddle incorporating your Javascript which works.

The jQuery replaceWith function removes the element with the specified ID and replaces it with the specified content, so in your example it would replace

<div class="modal-body">
    <div id="DocDetails">One fine body…</div>
</div>

with

<div class="modal-body">
    model
</div>

Note that it has removed the div with the id DocDetails and replaced it with the text model not a div containing the text model. Therefore if you clicked a link again the div with the ID DocDetails would no longer exist. If you want the div to remain you could this instead:

$('#DocDetails').html( "details" );