Question

I am trying to add Jquery to a SharePoint 2013 Visual webpart. I have put the script files in the layouts folder and I am able to reference them in my ascx, but it is not recognizing any jquery syntax.

<script src="../_layouts/15/jquery-2.1.0.min.js"></script>
<script src="../_layouts/15/jquery-ui-1.10.4.min.js"></script>


<script>
    $(function () { $("#accordian").accordion(); });//not recognized
</script>

Any advice would be appreciated.

Thanks

EDIT

When I try running it, I get Error: 'jQuery' is undefined. When I debug, it is in the UI script file, so it looks like it is loading the jQuery-UI but not the main jQuery script. (Maybe?)

EDIT

Actual problem turned out to be my jQuery file was malformed. @Moderator - Please delete

Was it helpful?

Solution

You might want to put your jQuery files in a specific folder in Layouts as to not clutter the Layouts directory.

And then you can simply reference your jQuery files like this:

<SharePoint:Scriptlink ID="jQuery" runat="server" Name="MyWebPart/jquery-2.1.0.min.js" Language="javascript" />
<SharePoint:Scriptlink ID="jQueryUI" runat="server" Name="MyWebPart/jquery-ui-1.10.4.min.js" Language="javascript" />

And so your files would be sitting in the following location on the server:

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\MyWebPart\jquery-2.1.0.min.js

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\MyWebPart\jquery-ui-1.10.4.min.js

OTHER TIPS

Do it like so

<link href="/_layouts/15/SBBJobBox/css/SBB/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="/_layouts/15/SBBJobBox/js/jquery-1.9.1.js"></script>
<script src="/_layouts/15/SBBJobBox/js/jquery-ui-1.10.3.custom.min.js"></script>

if the console shows above message in sharepoint.Instead of $(document).ready() function use _spBodyOnLoadFunctionNames.push();

_spBodyOnLoadFunctionNames.push("myFunctionName");//this function called during page load
function myCustomName(){
 alert('a');}

or it could be this

var j = jQuery.noConflict();
ExecuteOrDelayUntilScriptLoaded(run, "sp.js");
function run(){j('#selector').method();}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top