TypeError: 'undefined' is not a function with Tablesorter only in Safari

Question

Only in safari I get the error:

TypeError: undefined is not a function (evaluating '$("table").tablesorter')

In all other browsers it works. This is my javascript code, and I have putt in the header the scripts to jquery and the tablesorter javascript. So how can i solve this problem? And why is it only in Safari and not in any other browser?

 <script>

$(function() {

  // call the tablesorter plugin
$("table").tablesorter({
    theme : 'jui',
    headerTemplate : '{content}{icon}',
    // hidden filter input/selects will resize the columns, so try to minimize the 
          etc

Answer 1

When jQuery is loaded twice, any scripts that are loaded between the two copies get associated with the first copy of jQuery (ref):

<script src="jquery-copy1.js"></script>
<script src="myPluginExtendedFromJQ1.js"></script>

<script src="jquery-copy2.js"></script>
<script src="myPluginExtendedFromJQ2.js"></script>

<script>
// all of the jQuery's below are associated with jquery-copy2
jQuery(function(){
  // no problems
  jQuery('#demo-x').myPluginExtendedFromJQ2();

  // error: myPluginAttachedTOJQ1 is undefined
  jQuery('#demo-y').myPluginExtendedFromJQ1();
});
</script>

So once the document ready function is called, the jQuery calls inside refer to the second copy of jQuery that was loaded.

If this situation is unavoidable, then you'll need to define a variable associated with the first copy:

<script src="jquery-copy1.js"></script>
<script>var $jq1 = jQuery.noConflict();</script>
<script src="myPluginExtendedFromJQ1.js"></script>

<script src="jquery-copy2.js"></script>
<script src="myPluginExtendedFromJQ2.js"></script>

<!-- other stuff -->
<script>
// lets call plugins attached to the first copy of jQuery
// document ready can be called on either version $(function(){ ... })
jQuery(function(){
  // no problems
  jQuery('#demo-x').myPluginExtendedFromJQ2();

  // target first copy of jQuery
  $jq1('#demo-y').myPluginAttachedToJQ1();
});
</script>

Please refer to this jQuery forum post for more details.

In addition, I would report this issue to your web host, as they should be checking to see if jQuery already exists before loading it.

Answer 2

in my case the solution was to:

1. scripting order

jquery-1.11.1.js

jquery-latest.js

jquery.tablesorter.js

2. Method .ready(function($){}) - it is important to provide $

    jQuery(document).ready(function($){
            $("#tableSort").tablesorter(); 
    });