Problems with Jquery UI and Sitefinity 3.7

Question

Im building a search autocomplete using Jquery UI. Everything worked perfectly fine when I built the search in a minimal document with nothing but an input. eg:

<input id="autocomplete" />

and the Jquery

<script>

    $( "input#autocomplete" ).autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p']
    });
</script>

However, once I place my code into a Sitefinity 3.7 page, I get an error, telling me that "$("input#autocomplete").autocomplete" is not a function.

This error only occurs once its in sitefinity

Things Iv tried

1. Im using the latest Jquery UI library with the autocomplete widget.
2. Iv checked that my file paths are correct. (they are).
3. Used alerts eg alert("$('input#autocomplete').autocomplete")
   • they keep returning undefined.

Any help would be much appreciated!

Answer 1

Sitefinity itself employs jquery and is probably overriding many of the base classes/methods with the same shorthand classnames ($, Jquery).

The consequence is that you cannot have your javascript on your page BEFORE any sitefinity page elements/controls are being inserted. I was having this same issue. I moved all my javascript AFTER the sitefinity elemens, to the bottom of my pages and everything worked fine again.

Bear in mind, what is actually happening in this case is that

1. sitefinity injects their own jquery, then
2. your link to the jquery.min.js file overrode sitefinity's.

So it's possible that doing this may actually break some of sitefinity's jquery-based functionality, although I haven't had any issues in the last 2 months.

You can also try using the sitefinity built-in version of jQuery (which is what Telerik recommends at the forum link below, although I didn't have much luck with this technique):

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

Here's the link to a recent Sitefinity forum post regarding this exact same issue: http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/jquery-popup-not-working-in-telerik-webapplication.aspx

Good luck!