Uncaught TypeError: Cannot read property 'mobiledetect' of undefined

This is actually a rather important bug since it interferes with a lot of things in a website. Specifically, ajax requests in the View admin screen are not working, CKEditor is not loading, ajax requests in the panel administration are also not working etc.

The error log:

Uncaught TypeError: Cannot read property 'mobiledetect' of undefined colorbox_node.js?n13l1t:13
Drupal.behaviors.colorboxNode.attach colorbox_node.js?n13l1t:13
(anonymous function) drupal.js?n13l1t:76
e.extend.each jquery.min.js?v=1.7.1:2
Drupal.attachBehaviors drupal.js?n13l1t:74
(anonymous function) drupal.js?n13l1t:412
n jquery.min.js?v=1.7.1:2
o.fireWith jquery.min.js?v=1.7.1:2
e.extend.ready jquery.min.js?v=1.7.1:2
c.addEventListener.B

The same problem is also described here.

Is there some kind of workaround for this?

I've just encountered this bug after adding a custom ajax form. I'm not sure if this is a correct fix, I'm no expert, but I made the following change and it seems to work:

In the file js/colorbox.js on line 9, I changed:

    if (settings.colorbox.mobiledetect && window.matchMedia) {

to:

    if (typeof settings.colorbox !== 'undefined' && typeof settings.colorbox.mobiledetect !== 'undefined' && settings.colorbox.mobiledetect && window.matchMedia) {

Making the code run only once during page load also seems to fix it, though I don't know enough about the code to know if this will break the functionality.

    if (context == document) {
      if (settings.colorbox.mobiledetect && window.matchMedia) {
        // Disable Colorbox for small screens.
        mq = window.matchMedia("(max-device-width: " + settings.colorbox.mobiledevicewidth + ")");
        if (mq.matches) {
          return;
        }
      }
    }

Therefore, I'm sticking to my first workaround as it seems to me less likely to break anything.

Please see attached patch

Re-rolling patch

Here's a patch that fixes up errors in colorbox_inline.js also.

Cheers

Marking this as needs review as to test the patch. Also setting the version to the dev branch.

+++ b/js/colorbox.js
@@ -6,6 +6,8 @@ Drupal.behaviors.initColorbox = {
+	if(typeof settings.colorbox == 'undefined') return;
+	

+++ b/js/colorbox_inline.js
@@ -15,6 +15,9 @@ Drupal.behaviors.initColorboxInline = {
+	
+	if(typeof settings.colorbox == 'undefined') return;
+	

This doesn't follow Drupal coding standards. Drupal coding standards state that we should put the return; on a newline and enclose it inside {}. Also, this patch uses tabs and not spaces.

After applying the patch manually I noticed that it didn't actually solve the problem for me. For me the issue was also that there are no .colorbox elements on my site so the .once was calling .colorbox on an empty array and breaking things. What I ended up doing was a check to see if $(.colorbox).length returned 0.

    var $colorbox = $('.colorbox', context);
    if ($colorbox.length == 0) {
      return;
    }

I rewrote the patch from #9 to using Drupal coding standards.

After doing a little more digging I don't think this patch holds the solution.

I used this call:

var ajaxCall = new Drupal.ajax('imagebank-basket-content', basket, {
    url: basket.attr('data-uri') + '?n=' + this.basketList.join(';'),
    settings: {},
    event: 'click'
});

Here, settings is set to an empty object, this will be used prior to calling the attachBehaviours in the 'insert' command. Removing the settings from this call solves it!

Correct:

var ajaxCall = new Drupal.ajax('imagebank-basket-content', basket, {
    url: basket.attr('data-uri') + '?n=' + this.basketList.join(';'),
    event: 'click'
});

And then, not patches are needed for the Colorbox module.

Testing for settings.colorbox should not break anything so no harm in adding it. Please test this patch, it fixes all the js files.

Applied the patch at #15 and it worked perfectly.

Committed to 7-dev as well as 8-dev.