I'm trying to use Bootstrap with jsRender. For the most part my data is being displayed correctly. I'm just having trouble displaying the data inside a Bootstrap modal dialog.

I have the following code.

<script id="progDetailsTemplate" type="text/x-jsrender">

        <!-- NOTES MODAL -->
        <div id="notesModal" class="modal  fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header tw-modal-header">
            <button type="button" class="close tw-close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Notes...</h3>
            </div>
            <div class="modal-body tw-modal-body">
                {{for Notes}}
                <p>
                    <strong>{{>CreatedDate}} ({{>FirstName}} {{>LastName}})</strong><br />
                    {{>Value}}
                </p>
                {{/for}}
            </div>
            <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div><!-- END NOTES MODAL -->

</script>
<div>
    <table id="programmeDetails" class="table table-bordered table-condensed">

    </table>
</div>

The modal dialog should work without any JS which I have tested and it does, however this is only when the modal div is outside the script tag.

Any ideas on how I can make the dialog appear inside the jsRender script tag?

It's OK I decided the only way to get around this was to ditch Bootstrap. I am using just jQueryUI for the dialog I need. It's a shame the Bootstrap modal dialog won't work.

more