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

Teletypesetter

It is difficult to help unless we get some more information... Can you please share more of your code, etc doesn't help. Are you sure that jQuery and the plugin are loading? Is there a DOCTYPE specified? Are you loading any other libraries like prototype? Is jQuery being loaded more than once? – Anchises

Thanks Mottie, my free webhoster did load jQuery a second time for their ads etc. – Teletypesetter

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.

Anchises

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(); 
    });

Lp

Thank heavens mate! Bugged me for an hour until I added ($) in the function($). Can you explain why this fixes it, and also why in their official getting started guide, there's no $? – Mai

The issue is related to my answer. This answer is incorrect in that the loading jquery-1.11.1.js needs to be removed - you're loading jQuery twice. – Anchises

Answer 3

This problem is because you're defining more than one jquery script. I had only this:

<script src="@Url.Content("~/Scripts/jquery-1.11.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.widgets.js")" type="text/javascript"></script>

And got the same error again and again.

Then I realized that the error was that! But I was using a Layout which defined another version of jquery. After changing the definition in my Layout the error was gone.

Granniah

This just so happens to be the only answer that worked for me... after going through so many – Homogenize

Answer 4

I was also facing the same issue. In my case, sequence was the problem. The sequence adding jquery and tablesorter js is important. Load jquery first and then tablesorter.

<script src="/js/jquery-1.11.0.min.js"></script> 
<script src="/js/jquery.tablesorter.min.js"></script>

earlier It was written as

<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>

Hope it helps.

Maria