javascript - jquery-1.3.1.min.js not working when jquery-1.10.2.js was called -
i need both js file, 1 adding row, , tablesort , pager. problem neither script works, if both called.
this code far :
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>jquery plugin: tablesorter 2.0</title> <link rel="stylesheet" href="./css/style.css" type="text/css" /> <script type="text/javascript" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript" src="./js/jquery.tablesorter.js"></script> <script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script> <script > $(document).ready(function() { $(document).on("click","#tdadd",function(){ var newrow = $("<tr>"); var cols=""; cols+='<td><input type="button" id="tdadd" value="+"/></td>'; cols+='<td><input type="button" class="tddelete" value="-"/></td>'; cols+='<td><input type="text" value="enter info here"/></td>'; newrow.append(cols); newrow.insertafter($(this).closest("tr")); }); }); </script> </head> <body> <table id="insured_list" class="tablesorter"> <thead> <tr> <th>last name</th> <th>first name</th> <th>email</th> <th>age</th> <th>premium amount</th> </tr> </thead> <tbody> <tr> <td>mendes</td> <td>domnic</td> <td>domnic@gmail.com</td> <td>29</td> <td>5500</td> </tr> <tr> <td> <input type="button" id="tdadd" value="+"/> </td> <td> <input type="button" class="tddelete" value="-"/> </td> <td> <input type="text" name="name" value="anything"/> </td> </tr> </tbody> </table> <div id="pager" class="pager"> <form> <img src="images/first.png" class="first"/> <img src="images/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="images/next.png" class="next"/> <img src="images/last.png" class="last"/> <select class="pagesize"> <option value="">limit</option> <option value="2">2 per page</option> <option value="5">5 per page</option> <option value="10">10 per page</option> </select> </form> </div> <script defer="defer"> $(document).ready(function() { $("#insured_list") .tablesorter({widthfixed: true, widgets: ['zebra']}) .tablesorterpager({container: $("#pager")}); } ); </script> </body> </html> if add together this,for defer script. neither script wont work. :
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script> edit :
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script> <script type="text/javascript"> var j1 = $.noconflict(true); </script> <script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> var j2 = $.noconflict(true); </script> <script type="text/javascript" src="./js/jquery.tablesorter.js"></script> <script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script> <script > $(document).ready(function() { j2("#insured_list") .tablesorter({widthfixed: true, widgets: ['zebra']}) .tablesorterpager({container: $("#pager")}); j1("#tdadd").click(function(){ x(); }); }); function x(){ var newrow = $("<tr>"); var cols=""; cols+='<td><input type="button" id="tdadd" value="+"/></td>'; cols+='<td><input type="button" class="tddelete" value="-"/></td>'; cols+='<td><input type="text" value="enter info here"/></td>'; newrow.append(cols); newrow.insertafter($(this).closest("tr")); } this current script tried , when seek run firebug says :
typeerror: $ undefined $.extend({ jquery....rter.js (line 89) // jquery.tablesorter.js
typeerror: $ undefined $.extend(( jquery....ager.js (line 2) // jquery.tablesorter.pager.js
typeerror: $ not function $(document).ready(function() tableso...2).html (line 19) // tablesorter(2).html
i solve problem before, well, fault, when redownload jquery-1.3.1.min.js file, both js file working fine. so, advice double check sources , file size when effort utilize plug in , encounter same problem.
javascript jquery paging
No comments:
Post a Comment