Uncaught type error (loading jQuery scripts)

Question

Good day! I use jQuery Tablesorter for pagination. I get this error

    Uncaught TypeError: undefined is not a function viewTags:24
    (anonymous function) viewTags:24
    fire jquery-1.10.2.js:3048
    self.fireWith jquery-1.10.2.js:3160
    jQuery.extend.ready jquery-1.10.2.js:433
    completed

in the browser's console. The problem is highly because of the loading of scripts. This is the code

<link rel="stylesheet" href="/assets/stylesheets/style.css" type="text/css" />
<script type="text/javascript" src="//tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>   

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Please help me figure this out. Thank you very much!

Answer 1

Update to this:

<link rel="stylesheet" href="/assets/stylesheets/style.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>   

<script>
   jQuery(function($) {
      var availableTags = @Html(Json.toJson(tagNames).toString); 
      $( "#tags" ).autocomplete({
            source: availableTags
      });

      $("table").tablesorter({widthFixed: true, widgets: ['zebra'] }) 
                .tablesorterPager({
                          container: $("#pager"),
                          size:5
      }); 
   }); 
</script>

---

You don't need to have two jQuery's doc ready block, one is enough to put those functions in it. Also you have to do a stack order of your script this way.
If still issue is there then try to inspect in network tab of inspector ( chrome ) to see if some library is not getting loaded properly.

Answer 2

You just need to include jQuery once. Currently you've loaded it twice, so you can remove:

<script type="text/javascript" src="//tablesorter.com/jquery-latest.js"></script>

After that, you need to include tablesorter plugin after core jQuery file since your jquery.tablesorter.js require jQuery to work:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>  

Answer 3

please review this code

<script type="text/javascript" src="/tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="/assets/javascripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>



 $(document).ready(function() {
        $("#myTable").tablesorter({
            widthFixed : true,
            widgets : ['zebra'],
            headers : {
                0 : {
                    sorter : false
                },
                1 : {
                    sorter : false
                },
                2 : {
                    sorter : false
                },
                3 : {
                    sorter : false
                },
                4 : {
                    sorter : false
                }
            }
        }).tablesorterPager({
            container : $("#pager"),
            size : 5
        });
    });

please use only this code, remove all other things and try