How evil is jQuery *inside* MooTools code?

Question

I live and breathe jQuery, but I also love finding an excellent plugin that does the job I want perfectly.

My Rails app is coded in jQuery, but for file uploading, I've yet to find anything better than FancyUpload (better IMHO than Uploadify or SWFUpload). Having tried all three libraries, FancyUpload is by far the best to integrate into my app.

However, FancyUpload is based on MooTools, and loading both libraries (let alone working with them) is beginning to be a bit of a headache. First, I only load MooTools on the pages that use the upload functionality; all other pages use jQuery exclusively. Second, I've had to manually namespace many of my jQuery functions, which is slightly annoying.

But perhaps the most cumbersome feature of this setup is that I don't know MooTools. As I've been able to do pretty much everything else with jQuery, I never bothered to learn. Now that I'm forcing myself to use this FancyUpload library (which I love and want to keep using), I'm faced with my ineptitude in MooTools.

Specifically, here is my onFileSuccess function for FancyUpload:

onFileSuccess: function(file, response) {
    var json = new Hash(JSON.decode(response, true) || {});

    if (json.get('status') == '1') {

      // success
        file.element.addClass('file-success');
        (function ($, elem, queue_item) {
          $('#images').append($(elem).hide().fadeIn('slow'));
          $(queue_item).fadeOut('slow', function () { $(this).remove(); });
        })(jQuery, json.get('data'), file.element);

    } else {

      // failure
        file.element.addClass('file-failed');

    }
}

As you'll notice, I have a jQuery function right in the middle of a MooTools function.

My question is this: is this a really bad thing to do? My function works just as I want it to, but I don't know if I'm snowballing towards some future disaster by doing this.

If this really is a bad idea, can someone give me a pointer as to what the MooTools-equivalent code would be?

I'd appreciate any insight or help.

Answer 1

This is generally not an issue, but I would recommend not mixing framework specific code in any functionality unless the framework you are using doesn't provide the features you need. This way you keep portability and you only have a single requirement instead of requiring 2 specific versions of 2 different libraries.

your code should be something like this:

onFileSuccess: function(file, response) {
    var json = new Hash(JSON.decode(response, true) || {});

    if (json.get('status') == '1') {
      // success
        file.element.addClass('file-success');
        document.id('images').adopt(document.id(json.get('data')).fade('hide').fade('in'));
        document.id(file.element).set('tween', {
          onComplete: function() { this.element.dispose();}
        }).fade('out');
    } else {
      // failure
        file.element.addClass('file-failed');
    }
}

edit: just noticed Dimitar made a somewhat similar reply. my solution works quite the same, but correctly avoids using the $ function which is specially needed when mixing frameworks.

Answer 2

I think using the reserved '$' character for both jq and mootools is never a good thing, considering it can easily be avoided by using namespacing properly. I'm assuming you're namespacing using something like:

jQuery.noConflict();

When a nicer way is just to assign it to a variable:

var jQ = jQuery.noConflict();

Now you can call jQ('selector here') for jq and $ for mootools. Helps me keep my code straight and makes it more readable as well. You can also just change your order of includes, that could fix the namespacing problem as well.