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,

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.

Select Code
1
<a href='#changeHistoryModal' role='button' class='history-details' data-toggle='modal'>Click me </a>

Step 1.2: adding Model box HTMl layout in file.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 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:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 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:

Select Code
1
2
3
4
5
6
7
8
<!-- 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.

Select Code
1
2
3
4
5
6
7
8
<!-- 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

model-box