1

i need those both js file, one for adding row, and another for tablesort and pager. my problem neither script works, if they are both called.

this is my code so 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 data 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 i add this,for my 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 data here"/></td>';
    newRow.append(cols);
    newRow.insertAfter($(this).closest("tr"));  
 }

This is the current script i tried and when i try to run it firebug says :

TypeError: $ is undefined $.extend({ jquery....rter.js (line 89) // jquery.tablesorter.js

TypeError: $ is undefined
$.extend(( jquery....ager.js (line 2) // jquery.tablesorter.pager.js

TypeError: $ is not a function
$(document).ready(function() tableso...2).html (line 19) // tablesorter(2).html

Community
  • 1
  • 1
bumbumpaw
  • 2,522
  • 1
  • 24
  • 54
  • 1
    The JQuery library needs to be added before any other js scripts. – Michael Jun 20 '14 at 02:30
  • The errors you see now are because you are using `.noConflict()` to remove the symbol `$`, but the plug-ins are still trying to use `$` thus they don't work. Let's figure out how to make ONE version of jQuery work rather than trying to figure out how to make two versions work. See the comments in my answer for next steps. – jfriend00 Jun 20 '14 at 03:44
  • 1
    jquery-1.3.1 - released Jan. 2009. I think it is time you figure out how to get rid of that dependency – epascarello Jul 23 '14 at 00:35

3 Answers3

2

I already solve this problem before, Well, my fault, but when i redownload the jquery-1.3.1.min.js file, both js file is working fine. So, i advice to double check your sources and its file size when you attempt to use plug in and encounter the same problem.

bumbumpaw
  • 2,522
  • 1
  • 24
  • 54
1

You cannot load two versions of jQuery without assigning each one different symbols using syntax like this:

var myJQ = jQuery.noConflict();

on the first one before the second one is loaded and then using only the myJQ variable to refer to the first one (see answer here).

Even better would be to make your two plugins both work with the same version of jQuery so you can load just one and not have to do this extra gymnastics.

If the "adding row stuff" you refer to is just the jQuery code you have in your question, then that should work just fine with 1.10.2 so you should be able to use only that version. I'd suggest you just get rid of the 1.3.1 version of jQuery and use only the 1.10.2 version. It should meet both your needs.

FYI, I do some one error in your code. You are trying to add duplicate id="tdAdd" <input> tags which you should not do. If you want to have more than one element like that, then use a class, not an id.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • but when i use only 1.10.2 , only add row will work, and not the tablesorter and pager. – bumbumpaw Jun 20 '14 at 02:47
  • @Niang - The tablesorter [here](http://tablesorter.com/docs/) says that it is compatible with any version of jQuery 1.2.1 or higher. You should be able to use 1.10.2 with both pieces of your code. I would suggest that you not confuse things by using `defer` or `async` attributes on any of your script tags initially. Then, load jQuery first, any plug-ins second and then run your own JS that uses those and make sure that your own jQuery is either inside a `$(document).ready()` block or is after your HTML. – jfriend00 Jun 20 '14 at 03:02
  • @Niang - also "will not work" is not the least bit descriptive. Do some basic debugging. Tell us what errors show in the browser debug log, put some `console.log()` statements in to find out whether your code is running and whether there are any errors, etc... – jfriend00 Jun 20 '14 at 03:04
  • when jquery 1.10.2 is used. only the add function works. when i use 1.3.1. and deleted the codes for adding rows, the table sorter and paging will work. – bumbumpaw Jun 20 '14 at 03:20
  • @Niang - using `.noConflict()` with someone else's plug-in is quite complicated. I would NOT suggest you go that way. What happens when you load ONLY jQuery 1.10.2 with no `.noConflcit()` statements at all. Both pieces of your code should work with just that one version of jQuery. If it doesn't work, then post what errors you see. – jfriend00 Jun 20 '14 at 03:43
0

Use Like

Use <script>jQuery.noConflict();</script> above one of your jquery and replace the $ with jQuery

Try With

<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>//Now replace this jQuery with $
cracker
  • 4,900
  • 3
  • 23
  • 41