views:

347

answers:

3

How to be a jQuery no.conflict expert?

I mostly face jQuery conflict errors with Prototypes JS. and I'm nota jquery expert.

Can I still solve all conflict problems. how to get expertize to solve conflict issues.

How to know whole code is jquery. what if simple javascript and jquery code mixed in one js file?

What if inside external js code directly begin from

       var opbox="";

this is source order Which i can't change

1

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

2
I want to remove conflict error from example.js

<script type="text/javascript" src="example.js"></script>

3

<script type="text/javascript" src="Prototype.js"></script>

4

<script type="text/javascript" src="scriptaculous.js ></script>
+3  A: 

Instead of using the $ shortcut, call jQuery.noConflict() and use the full length jQuery() object when using jQuery functionality.

For example:

<script>
    $(document).ready(function(){
        // Do some DOM manipulation here
    });
</scipt>

Would become:

<script>
   jQuery.noConflict();

   jQuery(document).ready(function(){
       // Do some DOM manipulation here
   });
</script>
Justin Niessner
but how to do in external js?
metal-gear-solid
Always use the full length jQuery object in your external scripts. That way you only have to add the call to jQuery.noConflict() to your pages.
Justin Niessner
what if $(document).ready(function(){ not present at top of external js?
metal-gear-solid
i wrapped a code inside as ur 2nd example code but peoblem is not solved.
metal-gear-solid
If you're going for no conflicts, you shouldn't be using $(document).ready() at the top of external js files. They should be using jQuery(document).ready() instead.
Justin Niessner
I added jQuery(document).ready() at the top of external js but it's still not working
metal-gear-solid
@Justin: I think the issue is that they're not his scripts, they're third-party plug-ins and such which are coded with `$` rather than `jQuery`.
T.J. Crowder
@T.J. Crowder - yes code is not mine but jib is to solve other code
metal-gear-solid
You should be able to use the same `$` to `jQuery` conversion without `$(document).ready()` as discussed on the noConflict page.
justkt
@justkt - You mean in external js file every `$` should be replace by `jQuery`
metal-gear-solid
Depends on whether you use T. J. Crowder's solution.
justkt
+1  A: 

The issue is that if you want to use Prototype on the page, $ must be Prototype's $, not jQuery's. Since $ is just an alias for jQuery anyway, jQuery provides the noConflict function as a means of telling jQuery to return control of $ back to whatever had it before jQuery was loaded.

That means whenever you might use $, you'd use jQuery instead, e.g.:

$('.foo').hide(); // Hide all elements with class "foo"

becomes

jQuery('.foo').hide(); // Hide all elements with class "foo"

If you're using external scripts, and if they use $, you have to modify them. One way is to do a search-and-replace and just change all the (appropriate) $'s to jQuery.

Another way is to put this just after your script tag including jQuery:

<script type='text/javascript'>jQuery.noConflict();</script>

...and then add this at the top of the external script:

(function($) {

...and this at the bottom of it:

})(jQuery);

(Yes, this means you have to modify the external scripts.)

What that does is put the entire external script inside a function, within which the $ symbol is resolved to jQuery rather than to Prototype's $, because $ is an argument to that function and so it takes precedence.

There are examples of this on the jQuery noConflict page, although they frequently combine the above with the ready function, which might be a bit confusing.

Note bobince's point about conflicts between frameworks not just being limited to the $ symbol. If you can possibly stick to using just one framework, do that.

T.J. Crowder
@T.J. Crowder - please explain your 2nd method after updating my question.
metal-gear-solid
@metal-gear-solid: So between #1 and #2, you'd put the inline script I show above that calls `noConflict`. Then you'd edit `example.js` to put the lines at the top and bottom of it as described. If you use any script on your own page (separate from `example.js`), be sure to use `jQuery`, not `$`.
T.J. Crowder
@T.J. Crowder - you mean for external js We just need to wrap external code inside this (function($) { // external code })(jQuery); and no need to replace $ with jquery.
metal-gear-solid
@metal-gear-solid: Should work, yeah, because the `$` within their code will resolve to the argument to the anonymous function, rather than to the global.
T.J. Crowder
@@T.J. Crowder - but what if external code is starting directly from "var opbox="";" ? will ur technique work whatever is written inside external js?
metal-gear-solid
@metal-gear-solid: What you quoted is fine, doesn't matter *unless* they later assume that `opbox` will be a property of the `window` object (which it would be if it were at global scope). Odds are that they don't make that assumption. The only way to know with a particular script is to try it and see.
T.J. Crowder
@T.J. Crowder - Is $ sign can used by anyone is simple javascript code also? are simple javascript cod and jquery code can be placed in same external js file?
metal-gear-solid
@metal-gear-solid: We're straying pretty far from the question at this point, but: jQuery isn't a language, it's a library. The language is Javascript. You don't write things "in" jQuery, you write them "in" Javascript *"with"* jQuery. `$` is a valid Javascript identifier (just like `jQuery`, or `foo`). It happens to be used by both Prototype and jQuery, which is one of the places conflicts arise. It has no intrinsic meaning in Javascript (just like `jQuery` or `foo`), it's only because it's used by these libraries that it has any meaning to speak of.
T.J. Crowder
@T.J - my problem solved , now i'm a no.conflict expert :)
metal-gear-solid
@metal-gear-solid: Cool! :-)
T.J. Crowder
A: 

in my experience the only secure way for use jQuery together with Prototype is to don't use the $(document).ready(function() and other onload method!

if you use instead a raw javascript AddEvent on load like this

http://www.dustindiaz.com/rock-solid-addevent/

then you can use your jQuery where you want without causing any conflict!

i know there are other method like jquery.noConflict() or place one lib before another, but in a real App expecially when other people can add other stuff before or next your, you can't be 100% sure to avoid conflict! the only way is avoid conflict on page load where the $ alias come first and may conflict with the one from prototype, so then all other stuff will work as expected!

...and of course you don't need to Re-Order your source!

example:

    function jQueryRun() {

    //my jquery stuff here!!!

    $('foo').click(function() {
    alert('work!');
    });

    $('bar').hide();
 }

    addEvent( window , 'load' , jQueryRun );

hope this help!

aSeptik