2

SharePoint 2013, added a custom application page and trying to add third party scripts to it but non works, so far i tried select2 and typeahead it through errors,

Uncaught TypeError: $(...).select2 is not a function

and .aspx page then,

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <link href="jquery.select2.css" rel="stylesheet" />
    <link rel="Stylesheet" type="text/css" href="fling.css" />
    <script src="/_layouts/15/jQuery/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.select2.js"></script>
    <script type="text/javascript" src="fling.js"></script>
</asp:Content>

and,

$(document).ready(function () {
    $(".js-example-basic-multiple").select2();
});

which is in fling.js file...

I am also trying to add it in page-init

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);

    ClientScriptManager cs = Page.ClientScript;
    if (!cs.IsClientScriptIncludeRegistered("jQuery"))
        cs.RegisterClientScriptInclude("jQuery", "/_layouts/15/jQuery/jquery.min.js");

    if (!cs.IsClientScriptIncludeRegistered("jQuery.Select2"))
    {
        cs.RegisterClientScriptInclude("jQuery.Select2", "/_layouts/OwnSolutionFolder/jquery.select2.js");
    }
}

3 Answers 3

1

Worked with this,

        cs.RegisterClientScriptInclude("jQuery.Select2", "/_layouts/15/OwnSolutionFolder/jquery.select2.js");

Still don't know why it doesn't work when i add it to .aspx page

1

To include in .aspx page, you can use following tag.

<SharePoint:ScriptLink ID="ScriptLink2" Name="~SiteCollectionLayouts/<Path To Folder inside layouts folder>/jquery-1.11.1.js" runat="server"></SharePoint:ScriptLink>

I hope this helps!!

0

The likely culprit are publishing pages (and some other as well), where $ is sometimes used as a function name by Sharepoint itself.
An easy solution is to use jQuery's no-conflict

jQuery.noConflict(); //Right after jQuery is loaded

And then wrap all your own script files to use $ for jQuery instead:

(function ($) {
    //Your script goes here, $ is now jQuery in this scope
} (jQuery));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.