Most common and unresolved problem when using jquery in J2.5 extensions

Question

In joomla 2.5 people are asking problems on jquery when there are various extensions in a page. The question is as a extension developer how do we use jquery in j2.5 extension ??, considering that other extensions also declares jquery file and jquery no-conflict codes and there are some developers not care about it or don't know and use jquery their own way so is jquery not works in extension.

Now i should check jfactory->getapplication->get('jquery') but it's not enough as i mentioned above.So among the following which is right way to use jquery declaring jquery script file(as i said above why i should declare) -

1. nc_mode = jQuery.noConflict(); nc_mode(function(){ ...... });
2. jQuery.noConflict(); jQuery(function(){ ....});
3. Using only jQuery - jQuery(function(){ ....});

It's very much necessary to resolve it right way because usage of jquery is very common in extensions.

Answer 1

noConflict is used so that the alias used when declaring functions does clash with other libraries. Joomla uses Mootools (gradually being removed from the core) which has major conflict issues with jQuery as both as the $ alias to declare functions like so:

$('button').click(function() { ...

To get a better and more in-depth understanding of noConflict, have a read of the following which will also give you examples of usage:

http://api.jquery.com/jquery.noconflict/

As for importing jQuery in extensions, this is a bit of a tricky one. Having seen your comment on a previous answer of mine, you're fully aware that there are different ways of importing jQuery. Ensuring only 1 instance of it is imported is possible but one may run into some problems.

When doing this for you own site, I would simply recommend using jQuery Easy which is a plugin. One main feature is it strips out all other instances of jQuery so that it doesn't get imported multiple times.

When writing your own extension that you want to make available to the public, as a developer, research on this matter is the first thing that should be done. Detacting whether jQuery has already been loaded and then importing it only works if other extensions are using this same method as you mentioned in your question. The problem being is that nothing is ever perfect and you will always run into issues where some extensions are written correctly and others aren't, therefore there will always be a possibility of conflicts. The only way I can actually think to avoid this is by looking at the code for jQuery Easy and seeing how they strip other instances of jQuery and trying to do that yourself.

Update

You don't have to use jQuery as an alias for everything. We are all of course used to using $ but as a matter of fact jQuery is the default alias. So good way to get around everything is to encapsulate it like so:

jQuery.noConflict();

jQuery(document).ready(function($) {
    $("element").hide();
    // more code using $
});

From here on out, you can carry on using $ as a locally scoped alias.