CODEWITHSUNDEEP
jqueryajaxprototypejsconflict
Vladislav
Vladislav

Reputation: 165

Jquery does not work with Prototype

<script src="jquery.js"></script>
<script>
    var $jq = jQuery.noConflict();
    $jq(document).ready(function(){
        alert("123");
        $jq("#redactor_content").redactor();
        alert("456");
    });
</script>
<script src="prototype.js"></script>
<script src="redactor.js"></script>

"redactor.js" is the WYSIWYG-editor based on JQuery: http://imperavi.com/download/redactor/get/ with that source:

...
(function($){
   // Initialization
   $.fn.redactor = function(options)
   { ... };
})(jQuery);
...

When I comment "prototype.js" - everything works(I see "123456").

With "prototype.js" - see only "123" and "redactor" doesn't work. (It's means that the namespace is working correctly, right? Why then the second alert is not working?)

When I comment only $jq(document).ready(function(){ and move "redactor.js" before calling (call "redactor()" without waiting DOM) - everything fine too.

I do not understand the principle. After including "jquery.js" I first "$" overwrite and then include "prototype.js" to avoid conflicts. But Namespace Jquery somehow still intersects with Prototype. I suspect that the error is somewhere here: $jq("#redactor_content").redactor(); and I need to do something like: .redactor($jq);, but it broke my head and I can not guess.

P.S.: Yeah, I read the documentation ( http://docs.jquery.com/Using_jQuery_with_Other_Libraries ) and tried different ways(swaps libraries and try $.noConflict, jQuery(document).ready...). I wrote an example that anything is working and there is some clarity.

My second question: will it work together: jQuery(document).ready(function() and Prototype's document.observe("dom:loaded", function() and if NO, how to get to work together?

Thanks.

Upvotes: 2

Views: 2123

Answers (2)

Johan
Johan

Reputation: 3212

As far as I see, this should work. The only thing that could go wrong is that redactor.js needs the $-assignment somewhere in its code (which would be a bug there), but it seems to handle that correctly.

You could test that by loading prototype first, then jquery + redactor.js, then using jQuery.noConflict() (that switches back the $-operator to the previous value, prototype in this example).

Btw, I would expect some error in the console if the second alert doesn't pop up, that would be relevant info too.

And to your second question: Yes, both methods should work fine. But you only need 1 of course :).

Upvotes: 0

Shef
Shef

Reputation: 45589

Try replacing 

<script>
    var $jq = jQuery.noConflict();
    $jq(document).ready(function(){
        alert("123");
        $jq("#redactor_content").redactor();
        alert("456");
    });
</script>

with

<script>
(function($){
    $(document).ready(function(){
        alert("123");
        $("#redactor_content").redactor();
        alert("456");
    });
})(jQuery);  
</script>

Upvotes: 1

Related Questions