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 now 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.
Following are 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.

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

Step 1.2: adding Model box HTMl layot in file.

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:

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:

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.

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>

Result

model box

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Latest posts by Parvez (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>