bootstrap paginator is not working when jsp template is used

Question

I am developing a web application with jsp templates.My entire jsp is enclosed in script tag as given below.

    <script type="text/html" id="foundation-template">
    <%
        String viewPath = "/MyImage/view/refactored";
    %>

<div class="tab-pane" id="tab2">
<div class="row-fluid">
<div class="span12">
<div class="span3 filtermenu">
    <h3>Filter Foundation</h3>
    &nbsp;
        <label>Foundation Name</label>
        <input type="text" id="searchFoundationName"/>
        <label>Contact Person name:</label>
        <select id="searchContactName" data-bind="options: $root.contactPersonsList"></select>
         <label>Status:</label>
        <select id="searchStatus">
            <option value="-1">Select One</option>
            <option value="0">Active</option>
            <option value="1">Inactive</option>
        </select>

        <hr>
        <a href="#" class="btn btn-info pull-right" data-bind="event:{click: onFilterSearch}" id="onFilterSearch">Filter Foundation list</a>
</div>
<div class="span9 panelpadding">
<div>
    <div class="pull-left">
        <h1>Foundation List</h1>
    </div>
    <div class="pull-right">
        <br />
        <a class="btn btn-info pull-right" href="#" data-toggle="modal" data-bind="event: {click: onClickCreateFoundation}">Create Foundation Master</a>
    </div>
</div>
<!-- Fondation Modal -->
<div id="myModal" 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">X</button>
    <h3 id="myModalLabel">Foundation Master</h3>
  </div>
  <div class="modal-body">

    <form class="form form-skin" id="foundationForm">
    <div class="row-fluid">
        <div class="span12 panelpadding">
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Foundation name</label>
                    <div class="control-group">
                        <input type="hidden" id="foundationId"/> 
                        <input type="text" value="" name="foundationName" id="foundationName"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Country</label>
                    <div class="control-group">
                        <select id="founationCountryId" name="countryIdentifier" data-bind="options: $root.countryList, optionsText: 'countryName', 
                                optionsValue: 'countryIdentifier', value: $root.countrySelected, event: {change: onCountryChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">State</label>
                    <div class="control-group">
                        <select id="founationStateId" name="stateIdentifier" data-bind="options: $root.stateList, optionsText: 'stateName', 
                                optionsValue: 'stateIdentifier', value: $root.stateSelected, event: {change: onStateChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">County</label>
                    <div class="control-group">
                        <select id="founationCountyId" name="countyIdentifier" data-bind="options: $root.countyList, optionsText: 'countyName', 
                                optionsValue: 'countyIdentifier', value: $root.countySelected, event: {change: onCountyChanged}"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">City</label>
                    <div class="control-group">
                        <select id="founationCityId" name="cityIdentifier" data-bind="options: $root.cityList, optionsText: 'cityName', 
                                optionsValue: 'cityIdentifier', value: $root.citySelected"></select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Status</label>
                    <div class="control-group">
                    <select name="foundationStatus" id="foundationStatus">
                        <option value="-1">Select One</option>
                        <option value="0">Active</option>
                        <option value="1">Inactive</option>
                    </select>
                    </div>
                </div>

            </div>
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Phone</label>
                    <div class="control-group">
                        <input type="text" value="" name="phone" id="phone"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">E Mail</label>
                    <div class="control-group">
                        <input type="email" value="" name="emailId" id="emailId" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Website</label>
                    <div class="control-group">
                        <input type="text" value="" name="website" id="website"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPerson/Manager</label>
                    <div class="control-group">
                        <input type="text" value="" name="contactPerson" id="contactPerson"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPersonPhone</label>
                    <div class="control-group">
                        <input type="text" value="" name="contactPersonPhone" id="contactPersonPhone"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">ContactPersonEmail</label>
                    <div class="control-group">
                        <input type="text" name="contactPersonEmail" value="" id="contactPersonEmail"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>

  </div>
  <div class="modal-footer">
        <div id="createDiv">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <a href="#" class="btn" id="resetbtn" data-bind="event:{click: resetForm}">Reset</a>&nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: foundationSubmit">Save</button>
        </div>
        <div id="updateDiv">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            &nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: foundationSubmit">Update</button>
        </div>

  </div>
</div>

<!-- Modal End-->
<div class="clearfix"></div>
<!-- Fondation View Modal -->
<div class="modal fade" id="viewFoundation" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="viewModalLabel">View Foundation</h4>
      </div>
      <div class="modal-body">
        <div class="row-fluid">
        <div class="span12 panelpadding">
            <div class="span6">
                <div class="control-group">
                    <label class="control-label">Foundation name :&nbsp;<span id="viewFoundationName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Country :&nbsp;<span id="viewfoundationCountryName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">State :&nbsp;<span id="viewfoundationStateName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">County :&nbsp;<span id="viewfoundationCountyName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">City :&nbsp;<span id="viewfoundationCityName"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Status :&nbsp;<span id="viewfoundationStatus"/></label>
                </div>
            </div>
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Phone :&nbsp;<span id="viewphone"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">E Mail :&nbsp;<span id="viewemailId"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">Website :&nbsp;<span id="viewwebsite"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPerson/Manager :&nbsp;<span id="viewcontactPerson"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPersonPhone :&nbsp;<span id="viewcontactPersonPhone"/></label>
                </div>
                <div class="control-group">
                    <label class="control-label" style="white-space:nowrap;">ContactPersonEmail :&nbsp;<span id="viewcontactPersonEmail"/></label>
                </div>
            </div>
        </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="clearfix"></div>
<hr>
<div class="widget">

<div class="widget-head">
    <div class="pull-left">Foundation Master</div>
    <div class="widget-icons pull-right">
        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
        <a href="#" class="wclose"><i class="icon-remove"></i></a>
    </div>
    <div class="clearfix"></div>
</div>

<div class="widget-content">

<table class="table table-bordered">
    <thead>

    <tr>

        <th>Foundation ID</th>
        <th>Foundation Name</th>
        <th>Website</th>
        <th>Contact Person</th>
        <th>Status</th>
        <th>Control</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: foundationList">
    <tr>
        <td data-bind="text: $data.foundationId"></td>
        <td data-bind="text: $data.foundationName"></td>
        <td data-bind="text: $data.website"></td>
        <td data-bind="text: $data.contactPerson"></td>
        <td><span class="label label-success" data-bind="text: $data.foundationStatus"></span></td>
        <td>
            <div class="btn-group">
                <button class="btn btn-mini" title="Edit" data-bind="event:{click: $root.editFoundationOnClick}"><i class="icon-pencil"></i></button>
                <button class="btn btn-mini" title="View Foundation" data-target="#viewFoundation" data-bind="event:{click: $root.viewFoundationOnClick}"><i class="icon-eye-open"></i> </button>
            </div>
        </td>
        </tr>
    </tbody>
</table>

<div class="widget-foot">

    <div class="btn-group pull-right">
        <button type="button" class="btn"><i class="icon-angle-left"></i><i class="icon-angle-left"></i></button>

        <button type="button" class="btn"><i class="icon-angle-left"></i></button>
        <button type="button" class="btn">1</button>
        <button type="button" class="btn">2</button>
        <button type="button" class="btn">3</button>

        <button type="button" class="btn"><i class="icon-angle-right"></i></button>
        <button type="button" class="btn"><i class="icon-angle-right"></i><i class="icon-angle-right"></i></button>
    </div>
    <div class="clearfix"></div>

</div>

</div>

</div>
</div>
</div>
</div>
</div>
</script>

<div id="example"></div>
    <script type='text/javascript'>
        var options = {
            currentPage: 1,
            totalPages: 10
        }

        $('#example').bootstrapPaginator(options);
    </script>

Althoungh I included css and js files for paginator in my master page it is not rendering the paginator and same is the problem with datepicker also. Could anybody help me?

Hi Louis. I am making use of amplify request and making the calls and getting the data from server and trying to bind the template and it was successful. But the problem is when try to include a bootstrap datepicker it's not rendering the data picker. when I click on the calender icon of the datepicker which was I am able to see nothing is happening on the browser console. no errors and no warnings.Only the problem is with the mime type text/html in the above script. when I do it as sample its working properly. please give me your valuable suggestions on this. — Kiran, Dec 09 '13 at 12:04

bootstrap paginator is not working when jsp template is used

0 Answers0