CODEWITHSUNDEEP
javascriptjquerysafaritablesorter
skfjsdlfk
skfjsdlfk

Reputation: 71

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

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

Upvotes: 6

Views: 10574

Answers (4)

Rodrigo Ranzini
Rodrigo Ranzini

Reputation: 41

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.

Upvotes: 1

websky
websky

Reputation: 3172

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

Upvotes: 4

Rites
Rites

Reputation: 2332

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.

Upvotes: 0

Mottie
Mottie

Reputation: 86413

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.

Upvotes: 4

Related Questions