Question

I have a website that is rendering a prototype based calender on 90% of the pages. I’m also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don’t play nicely and a lot of the solutions I’ve tried such as NoConflict hasn’t worked for me I still get the “not defined” errors in firebug all over the place. I’m wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I’ve considered switching my Prototype code with JQuery but I’ve yet to see a better JQuery solution for this particular calendar plugin that I’m using.

Answer 1

Use a proper structure for noConflict.

<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
    $("#someelement").uploadify();
});
</script>

If this doesn’t answer your question, please provide more(some) code.

Edit for comments:

Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.

<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
    $.noConflict();
</script>

sample js file:

(function($){
    // since we passed a reference to jQuery to this anonymous
    // function and accepted it as a parameter named "$", we can
    // safely use "$"
    $("#target").uploadify();
})(jQuery);

If you need a document ready, you can do it this way:

jQuery(document).ready(function($) {
    $("#target").uploadify();
});