Question

I’m trying to use jQuery UI in a modulated way. Instead of loading one .JS file (bigger than 200kb) with all jQuery UI funcionality:

<script type="text/javascript" src="jquery.ui.custom.js"></script>

I intent to load only needed ones (for autocomplete, for instance):

<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.position.min.js"></script>
<script type="text/javascript" src="jquery.ui.menu.min.js"></script>
<script type="text/javascript" src="jquery.ui.autocomplete.min.js"></script>

But i want to load these files through javascript only if autocomplete functionality isn’t detected. I know I can check if jQuery UI is loaded to a page with this JavaScript condition:

if (typeof jQuery.ui !== 'undefined'){
    // jQuery UI core is loaded
}

What I need to do is check specifically if jQuery UI Autocomplete functionality is available to use:

if (typeof jQuery.ui.autocomplete !== 'undefined'){
    // jQuery UI autocomplete is loaded
}

But the code above returns this error:

Uncaught TypeError: Object [object Object] has no method 'autocomplete'

What I’m trying to achieve is a way of load jQuery UI libraries only when one of its resources are used. Hotlink from websites such as Google isn’t an option, and I can’t put all jQuery UI libraries on all pages of a website I’m working with. To achieve this, I’ll make custom javascript functions for using jQuery UI Widgets such as Autocomplete and Datepicker, and inside these functions, I’ll check if jQuery UI libraries are loaded, and load them if they aren’t. I’ve achieved that for Autocomplete and Datepicker, but they won’t work if run both functions on a same page, because my jQuery UI libraries check isn’t totally functional.

Anyone know some way of doing this?

Answer 1

Isn’t autocomplete defined as part of a jquery extension? I’d think you should be checking:

$.fn.autocomplete

Since you call $(‘element’).autocomplete(); to call the plugin.