sharepoint 2010 - 2013 web parts migraiton: jQuery is undefined error

Question

I posted this in the general Stack overflow site but this seems like a better place to post a sharepoint question.

I am trying to move a custom web app (contacts list) from sharepoint 2010 to sharepoint 2013. The contact list works by using jQuery to show a name with a picture, and after clicking on the dark gray bar reveals the rest of the contact information like this: https://i.sstatic.net/sFZ1W.jpg

The list works perfectly in sharepoint 2010 but not in 2013. Here is the code that seems to be breaking:

<script type="text/javascript" language="javascript">
jQuery('#' + '<%= firstpane.ClientID %>' + " div.menu_head").click(function () 
{
jQuery(this).css({ backgroundImage: "" }).next("table.menu_body").slideToggle(100).siblings("table.menu_body").slideUp("fast");
jQuery(this).siblings().css({ backgroundImage: "" });
});

</script>

In sharepoint 2010 when the contact bar is clicked, the table of information is shown perfectly. In 2013, the contact bar is shown but when clicked does not toggle. When I run this in developer tools I get an error stating:

in IE: SCRIPT5009: 'jQuery' is undefined

in chrome: Uncaught ReferenceError: jQuery is not defined

If I try and change jQuery to $ then I get the same error but instead it says $ is not defined. I checked the permissions of the jQuery file in sharepoint and it says the file is there and accessible. Does anyone know how to fix this? Thanks!

Roger

Answer 1

Roger, Looking at the error description it seem to me that jQuery library is not loaded correctly, Can you check your jQuery.min.js file reference. Make sure it is pointing to the current site address.

Also try changing it to following line to see if that works. None of the jQuery script will be executed if your reference is not correct.

Put this code on your page (script editor web part) and see if it executes correctly.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert('loaded');
});
</script>

Answer 2

Not sure where you are storing your js files, but if you are storing them in the LAYOUTS folder you need to reference what hive you are storing them in now. Example:

2010: src="/_layouts/js/jquery-1.11.0.js"

2013: src="/_layouts/15/js/jquery-1.11.0.js"

Hope this helps!