Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery in widget

Tags:

I want to use jQuery in an add on JS library that can be added to random websites. These websites may or may not use jQuery already.

I have 3 questions around this actually:

  1. I will probably load jQuery dynamically from my own js script (not from a script tag in the document head). Will jquery work this way? how can I make sure it will run in time without having the standard $(document).ready(function(){} in the main document?

  2. What should I do to avoid conflicts with existing jQuery (if any) in the web site code.

  3. Is there a recommended way to add a widget that includes jQuery to random websites while providing minimal code and simplest integration.

like image 227
Nir Avatar asked Feb 25 '09 20:02

Nir


People also ask

What are the widgets in jQuery mobile?

A widget is a small gadget or control of your jQuery mobile application. Widgets can be very handy as they allow you to put your favorite applications on your home screen in order to quickly access them.

Does jQuery include jQuery UI?

jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications.

What are JavaScript widgets?

You use the JavaScript widget to embed JavaScript code in your page. JavaScript is used to enhance the functionality of your website. For example, you can use JavaScript to validate user input. After you place the JavaScript widget on your page, you configure which JavaScript to include.

What is jQuery UI used for?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.


1 Answers

This is pretty loose and incomplete -- and really is meant to be a starting point:

if (typeof $ != 'undefined') {
    var msg = 'This page already using jQuery v' + $.fn.jquery;
} else {
    var s = document.createElement('script');
    s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
    document.getElementsByTagName('head')[0].appendChild(s);
    var msg = 'This page is now jQuerified';
}

then wait via a brief setTimeout() before running a ready() function

like image 131
Scott Evernden Avatar answered Sep 30 '22 19:09

Scott Evernden