IMCE upload button disappear because the module doesn't play nicely with external .js files [#2268899]

It looks like the script necessary to generate the upload button located in imce.js (it add the buttons to a div named ops-list) crash because it interact with Javascrip located in several other modules.

On my site I had a script implementing the Select2 Jquery plugin to create more attractive dropdown menus and also the Modernizr javascript library that also crash and prevent the buttons from loading. Given that several other modules seem to crash with IMCE I think it may be appropriate if the IMCE.js file is patched to solve the issue.

I would have loved to help in writing the actual code for it but I am very weak in my coding skills so I can only provide the code I used to solve the issue in my specific case.

My old code:

Drupal.behaviors.searchProtocols = {
  attach: function (context, settings) {
    jQuery('select').select2(); //This is the call that fails when trying to load the buttons.
    
    if (Modernizr.input.placeholder) { //This also causes an exception in the debugger.
       jQuery('body').addClass('mdrnzr-placeholder'); 
    }
    
    var $window = jQuery(window);
    Drupal.molmeth.$searchAreaBoxes = jQuery('.search-area .findProtocols, .search-area .block-block');

    if($window.width() > 549){
      molmethEqualHeights(Drupal.molmeth.$searchAreaBoxes);
    }

    jQuery(window).resize(molmethEqualHeights);
  }
};

New non-crashing code:

Drupal.behaviors.searchProtocols = {
  attach: function (context, settings) {
    var selector = jQuery('select');

    if('select2' in selector){ //Test to see if select2 is available before the function is called.
      selector.select2(); 


      if (Modernizr.input.placeholder) {
        jQuery('body').addClass('mdrnzr-placeholder');
      }

      var $window = jQuery(window);
      Drupal.molmeth.$searchAreaBoxes = jQuery('.search-area .findProtocols, .search-area .block-block');

      if($window.width() > 549){
      molmethEqualHeights(Drupal.molmeth.$searchAreaBoxes);
      }
      jQuery(window).resize(molmethEqualHeights);
    }
  }
};

In my case modernizr is only called after the select2 plugin so I only made one check which is a bit lazy but good enough in my case.

Comments

Comment #1

Sigvard CreditAttribution: Sigvard commented 16 May 2014 at 08:42

Issue summary:

View changes

Comment #2

ufku CreditAttribution: ufku commented 16 May 2014 at 20:31

Category:

Bug report

» Support request

IMCE can not do anything about a module that adds its javascript to every page and executes code without checking for the requirements.

Comment #3

Sigvard CreditAttribution: Sigvard commented 19 May 2014 at 07:34

Do you have any ideas on why IMCE is unique in this case?

Because I have never seen a comment queue like this on other modules that I use.

Comment #4

ufku CreditAttribution: ufku commented 19 May 2014 at 12:19

I have had the same issue and for me it was caused by IMCE.js interfering with the select2 and modernizr javascript libraries.

For some reason these are called (and fail) by the IMCE.js scrip which prevent the Upload button from being created.

imce.js is neither interfering with nor calling other scripts.

If you add your script(implementing Drupal.behaviors) to every page by ignoring the context or availability of required libraries, it is your responsibility to do "Feature Detection".

Comment #5

Sigvard CreditAttribution: Sigvard commented 21 May 2014 at 07:27

Apparently, a huge number of modules and themes do the same thing as other people have the problem when using different modules and themes.

For me this problem is solved as I added the check for select2.

Comment #6

Anonymous (not verified) CreditAttribution: Anonymous commented 30 June 2014 at 01:46

I had the same issue when installed with External js library - Modernizr.

Check the Console for any errors

Comment #7

brunorios1 CreditAttribution: brunorios1 at Dexa commented 9 July 2015 at 12:40

I solved this issue verifying if the Modernizr object exists before calling it, like this:

var select = $('select', context);

if (typeof Modernizr == 'object') { 
  if (!Modernizr.touch && select.length > 0) {
    $('select', context).select2({
      minimumResultsForSearch: 10,
    });
  }
}

I hope it helps.
Thanks!