How to add jQuery script to a custom visual webpart?

Question

Similar to some previous questions, I'm trying to use jQuery in a visual web part but I keep getting that jQuery is undefined. I've added the jQuery script to SiteAssets as well as a script folder inside my visual webpart project, and tried referencing it in the ascx file with both:

<script src="~sitecollection/SiteAssets/jquery-1.9.1.min.js"></script>
<script src="./Scripts/jquery-1.9.1.min.js"></script>

And also in code behind, in the Page_Load method, with lines such as:

this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "custJquery1", "~/SiteAssets/jquery-1.9.1.min.js");
this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "custJquery2", "~sitecollection/SiteAssets/jquery-1.9.1.min.js");
this.Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "custJquery2", "/SiteAssets/jquery-1.9.1.min.js");

I've also tried not referencing jQuery anywhere because I thought maybe the page (Discussion board topics) I'm using the webpart may already have jQuery on it.

The javascript I am using to check the jquery in my ascx file is:

<script type="text/javascript">
    function TheFunctionToDoTheWork() {
        if (typeof jQuery == 'undefined') {
            alert('jQuery didnt load');
        }
        else
            alert("Ive never received this message");
    }

    // "Subscribe to the SharePoint "page load"
    _spBodyOnLoadFunctionNames.push('TheFunctionToDoTheWork');
</script>

All I ever get is the alert that 'jQuery didnt load'. What might be wrong?

Answer 1

I think the problem is src attribute of tag. Try <script src="/StyleLibrary/js/jquery-1.9.1.min.js" /> and take a look at this article

Edit If you decide to store js in _layouts folder, use <SharePoint:ScriptLink runat="server" ID="ScriptLinkJQuery" name="/Js/jquery-1.9.1.min.js" Localizable="false" />

Answer 2

I know this is a late answer but this sums up the work that has been done in the past few months on this subject:

Here is some example code I used in a control for SOD, in a visual web-part it should be the same.

    // Running in a Control added to Master Page
    // Register the JavaScript file to the header
    ScriptLink.Register(
        this.Page,
        @"js/ajaxlibrary.js",
        false
    );

    // But tell the page to load it
    // at the end of the page
    string clientLoadjaxLibrary =
        "LoadSodByKey('js/ajaxlibrary.js');";
    SPPageContentManager.RegisterClientScriptBlock(
        this,
        this.GetType(),
        "clientLoadjaxLibrary",
        clientLoadjaxLibrary
    );

for scriptlinks there syntax if you want it loaded on request is:

<SharePoint:ScriptLink language="javascript" name="~sitecollection/Site Assets/js/jquery.js" runat="server" OnDemand="False" LoadAfterUI="True" />

also make sure you wrap your JQuery up like so to register it as a global library in sharepoint:

function $_global_jquery() {
    //jquery code here
}

calling this function either in a scriptblock on your required page/control or at the bottom of the JS file to load the library:

$_global_jquery();

All custom libraries should be wrapped up with that, also custom namespaces should be registered with SharePoint as well.

On another note JQuery 1.10.2 is the only version that has no conflicts with any part of SharePoint. Older versions throw strange errors from time to time with $ conflicts.