How to Integrate Bootsrap Model Box with Jquery Template

In This post I will tell you how to add jquery template in bootsrtap Model box.Normally we are using inline code to add model box functionality but now its old technique, now everything is changing.We are using bootstrap model box and Jquery template plugin.We are not including library file of model box and jquery template , I understand you have to basic knowledge of Jquery template and Bootstrap model box.

Yo can also Checkout other Modal Box tutorial,

• How to create Popup box with facebox and jquery
• How to Create Awesome Popup box Using Bootstrap Popover
• How to Create Modal box Using File Path
• How to Create Modal box Using Jquery Template

Simple Steps to Integrate Model Box with jQuery Template:

Objective of Example: we are creating detail of attributes based on attribute id.

Step 1: Create bootstrap model box.

Step 1.1 : adding hyperlink for popup model box.

         <a href="#changeHistoryModal" role="button" class="history-details" data-toggle="modal">Click me </a>

Step 1.2: adding Model box HTMl layout in file.

     <!-- Modal -->


<div id="changeHistoryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>


<h3 id="myModalLabel">Change History</h3>


</div>




<div class="modal-body">
    Hi I am body of model
</div>




<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>


</div>

Step 2: Integrating template in bootstrap model box.

Step 2.1: adding template in model box, So now step 1.1 code would be change as below:

<!-- Modal -->


<div id="changeHistoryModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>


<h3 id="myModalLabel">Change History</h3>


</div>




<div class="modal-body">


<table class="table table-condensed table-striped table-hover extended-font" width="100%" id="history-details" cellspacing="1">


<thead>

<tr class="error">


<th>Column Name</th>




<th>Origional Value</th>




<th>Modified Value</th>




<th>Modified Date</th>


</tr>

</thead>




<tbody id="history-details-div"></tbody>

</table>


</div>




<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>


</div>

Step 2.2: adding template layout:

 <!-- jQuery JS Tempalate Start for details  -->         
   <script id="changeHistoryDetailsLog" type="text/x-jquery-tmpl">
        <tr class="success"><td>${columnName}</td>
            <td>${origionalValue}</td>
            <td>${modifiedValue}</td>
   <td>${creationDate}</td>
        </tr>
    </script>

Step 2.3:Fill the Json object in template and display in div.

 <!-- jQuery JS Template Start for details  -->         
   <script id="changeHistoryDetailsLog" type="text/x-jquery-tmpl">
        <tr class="success"><td>${columnName}</td>
            <td>${origionalValue}</td>
            <td>${modifiedValue}</td>
   <td>${creationDate}</td>
        </tr>
    </script>

Demo & Example of Bootsrap Model Box with Jquery Template