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.