0

I don't understand why both Bootstrap table and jquery reveal popup plugin is not working together.

If I remove this line <script type="text/javascript" language="javascript" src="media/js/jquery.js"></script> then Bootstrap sorting and pagination is not working !

if I remove this line <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> then popup plugin is not working !

Html Head section code:

<!--for bootstrap table-->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
    $('#example').dataTable();

    $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();

    } );
} );
</script>
<!--for bootstrap table end here-->


<!-- for popup box -->
<link rel="stylesheet" href="../style/reveal.css">  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../js/jquery.reveal.js"></script>
<!-- for popup box end here -->

Html Body section code

<!--for popup box-->
<div id="myModal2" class="reveal-modal3">
</div>
<a id="join_now" class="big-link2" data-reveal-id="myModal2">Popup</a>
<!--for popup box end here-->

<!--for bootstrap table with sorting and pagiantion option-->
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Company</th>
        <th>Position</th>
        <th>Status</th>
        <th>Kit type</th>                          
        </tr>                             
    </thead>                
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
            <td>data4</td>
            <td>data5</td>
            <td>data6</td>
        </tr>    
    </tbody>    
</table>
<!--for bootstrap table with sorting and pagiantion option end here-->
2
  • you are using two versions of jquery.. May 8, 2014 at 6:35
  • @Reigel which one I've to remove ?
    – Babu
    May 8, 2014 at 6:36

1 Answer 1

2

Use any one jquery. Include this to the start of head tag.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

As jquery.dataTables.js is a plugin it requires jquery-1.6.min.js in first.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.