0

I'm trying to make webpart for autocompletion textbox using jQuery ui. after I created very simple webpart and deploy it to SP2013, each time I try to add it to page the page instantly crashes. This is the code:

<script src="_layouts/15/SearchPart/js/jquery-1.9.1.js"></script>
    <script src="_layouts/15/SearchPart/js/jquery-ui-1.10.3.custom.min.js"></script>
   <link href="_layouts/15/SearchPart/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
     <script type="text/javascript">
         $(document).ready(function () {
             $("input#Searchbox").autocomplete({
                 source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],


             });
         });
        </script>


<table><tr><td>
    <asp:Textbox ID="Searchbox"  runat="server"/>

           </td></tr></table>

I know it could be very amateur question ,but I'm new with both SP2013 and jQuery ui.

Please help.

  • The ID SearchBox is already used by SharePoint internally (for the search box, hehe). SO try change that ID, but also try looking in the developer dashboard in your browser, normally F12, (choose Console when it has opened). If you have javascript errors you will see them here – Robert Lindgren Nov 20 '13 at 8:24
  • I changed the ID but still got the same issue, but in the developer dashboard it's give me the following warning: :visited and :link styles can only differ by color. Some styles were not applied to :visited. I'm not sure whats could be but I'll search about it. Thanks – Mahde Abdnabi Nov 20 '13 at 9:21
  • That is unrelated. What do you mean with crashes? By the way, alos add a beginning "/" to the href / src script and link attributes – Robert Lindgren Nov 20 '13 at 9:29
  • Yeah I figure that out , added the "/" and still the same. I mean when I choose the webpart and click add the page crashes and "Sorry, something went wrong An unexpected error has occurred." message displays. – Mahde Abdnabi Nov 20 '13 at 9:41
  • Then you must look for the error in the ULS logs (located in the 15-hive) – Robert Lindgren Nov 20 '13 at 9:53
1

You are calling your javascript files incorrectly.

Please refer to my post here (Relevant quoted below): How to add jQuery script to a custom visual webpart?

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.

To answer this question. While not a duplicate the answer that shows how to scriptlink by me will prevent several things from breaking in SharePoint 2013. As it stands you are disabling several features as well as breaking the javascript on the page.

  • Strange that OP get an "Sorry, something went wrong An unexpected error has occurred" from trying to load a javascript though? Should he just not get an error in the browser console about "$ is undefined" e.g? – Robert Lindgren Nov 20 '13 at 11:46
  • 1
    It's in a ASP.net page, the code isn't allowed in that location. The script tags are technically illegal in there because but the error comes from it can't find the locations (The missing / causes this because it is looking for _layouts twice). This embedded code will also disable CSR and MDS and using scriptblocks and links is the correct way. But ontop of that you need to register other libraries with sharepoint using the global syntax. – Hugh Wood Nov 20 '13 at 11:53
  • True! Strange though, I asked OP to set a beginning "/" on his src / url tags. – Robert Lindgren Nov 20 '13 at 11:54
  • You shouldn't be deploying JS to layouts anyway, thats what site assets, style library and catalogs is for. – Hugh Wood Nov 20 '13 at 11:56
  • 1
    thats was helpful and solved the problem – Mahde Abdnabi Nov 21 '13 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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