There's some Ajax and JS errors when I work with Owl Carousel and Views. I am using jQuery 1.4 for the backend, but I had the same errors on 1.7. Here's the console log:

Uncaught TypeError: this._core.$element.on is not a function

When I save I get this AJAX screen

[{"command":"settings","settings":{"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"adminimal","theme_token":"cYOsOCuybcSW74xHwCPcpF7CRXrECjBy6mnOuB227j4","jquery_version":"default"},"urlIsAjaxTrusted":{"\/admin\/structure\/views\/ajax\/display\/slideshow\/block_1\/style_plugin":true}},"merge":true},{"command":"viewsDismissForm"},{"command":"viewsShowButtons","changed":true},{"command":"viewsTriggerPreview"},{"command":"insert","method":"html","selector":"#views-tab-block_1","data":"\u003Cdiv id=\u0022edit-display-settings-details\u0022\u003E\u003Cdiv id=\u0022edit-display-settings-top\u0022 class=\u0022views-ui-display-tab-actions views-ui-display-tab-bucket clearfix\u0022\u003E\u003Cdiv class=\u0022ctools-no-js ctools-button ctools-dropbutton\u0022\u003E\u003Cdiv class=\u0022ctools-link\u0022\u003E\u003Ca href=\u0022#\u0022 class=\u0022ctools-twisty ctools-text\u0022\u003Eopen\u003C\/a\u003E\u003C\/div\u003E\u003Cdiv class=\u0022ctools-content\u0022\u003E\u003Cul class=\u0022horizontal right actions\u0022\u003E\u003Cli class=\u0022duplicate\u0022\u003E\u003Cinput type=\u0022submit\u0022 name=\u0022op\u0022 value=\u0022clone Block\u0022 class=\u0022form-submit\u0022 \/\u003E\u003C\/li\u003E\u003Cli class=\u0022delete\u0022\u003E\u003Cinput type=\u0022submit\u00 ...

CommentFileSizeAuthor
#12 owlcarousel-2678554-12.patch934 bytesNikro
#10 owl.carousel error.png27.8 KBmichelhack
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lluisandreu created an issue. See original summary.

labboy0276’s picture

labboy0276 CreditAttribution: labboy0276 commented

I am fairly confident Owl Needs 1.10 JQuery to work properly.

Have you tried installing the JQuery Update 3.x branch. Then enabling JQuery Migrate and Changing the system wide JQuery version to 1.10. This usually solved any JQuery Version issues and oddness.

swim’s picture

swim CreditAttribution: swim commented
Status: Active » Closed (works as designed)

labboy0276 has the right idea, as the readme says use jQuery update module.

juliaset’s picture

juliaset CreditAttribution: juliaset commented

I don't think jQuery version is the problem. I've seen the exact same issue and I have jQuery 1.10 enabled for both admin and frontend themes. As soon as I change the format from OwlCarousel to anything else, I can save again. As soon as I change it back to OwlCarousel and try to save, the screen fills with raw JSON data as described above. No other views on my site have this issue.

juliaset’s picture

juliaset CreditAttribution: juliaset commented
Status: Closed (works as designed) » Needs work
swim’s picture

swim CreditAttribution: swim commented

Can you re-download the latest dev release, clear caches and check? Let me know how you go.

juliaset’s picture

juliaset CreditAttribution: juliaset commented

Confirmed....still erring with latest dev + drush cc all.

I made a video to show you.
https://v.usetapes.com/GA8KICDMCd

swim’s picture

swim CreditAttribution: swim commented
Status: Needs work » Active

Thanks for the video, makes diagnosing much easier.

Can you open your javascript console while on that page and copy any errors? This looks like either the wrong jQuery version is loading or the Owl library isn't in the right location.

alanom’s picture

alanom CreditAttribution: alanom commented

In the meantime, OwlCarousel 1.X can be found here: https://github.com/OwlFonk/OwlCarousel

michelhack’s picture

michelhack CreditAttribution: michelhack commented
FileSize
owl.carousel error.png27.8 KB

im also getting errors with views, i get white page with bunch of text, also is not able to click on various settings on views
look at picture, that's what i get from the console

also if auto preview box is unchecked i can make modifications and views works normal, but getting to that point is a miracle

Uncaught TypeError: Cannot read property 'lazyLoad' of undefinedDrupal.behaviors.owlcarousel.attachOwlCarousel @ VM21323:39Drupal.behaviors.owlcarousel.attachInit @ VM21323:24Drupal.behaviors.owlcarousel.attach @ VM21323:12(anonymous function) @ drupal.js?o68f6g:76jQuery.extend.each @ jquery.js?v=1.10.2:665Drupal.attachBehaviors @ drupal.js?o68f6g:74Drupal.ajax.commands.insert @ ajax.js?v=7.43:570Drupal.ajax.success @ ajax.js?v=7.43:428ajax.options.success @ ajax.js?v=7.43:189options.success @ jquery.form.js?v=3.51.0:203fire @ jquery.js?v=1.10.2:3048self.fireWith @ jquery.js?v=1.10.2:3160done @ jquery.js?v=1.10.2:8235callback @ jquery.js?v=1.10.2:8778

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

I am also getting this error in views.

Nikro’s picture

Nikro CreditAttribution: Nikro as a volunteer commented
Status: Active » Needs review
FileSize
owlcarousel-2678554-12.patch934 bytes

Hey,

Got the same issue, the problem is that there's already a property called "instance" that goes through as a valid carousel.
We should always clean-up this in JavaScript before running the loop over all the defined carousel settings.

Anyway, here's a patch. Thought to share it.

Thanks!

juliaset’s picture

juliaset CreditAttribution: juliaset commented

Just FYI...I could not get the patch in #12 to install by command line...installing it manually did not resolve the issue for me.

Nikro’s picture

Nikro CreditAttribution: Nikro as a volunteer commented

@juliaset - if you have the warning with .on then you should have a higher version of jQuery in your administration theme (one that supports .on).

This patch fixes the problem of having multiple carousels on the same page (or having an Ajax view that re-initializes an owl carousel).

swim’s picture

swim CreditAttribution: swim commented
Status: Needs review » Fixed
Related issues: +#2673332: Broken panels interface

This issue should be fixed by the patch in https://www.drupal.org/node/2673332.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

vchen’s picture

vchen CreditAttribution: vchen commented
Issue summary: View changes

I just want to add that I had this exact problem even after applying all patches mentioned (by the way, the patch mentioned in #15 was already applied to 2.x).

I played with the jQuery versions. Contrary to the suggestion to keep admin jQuery version at 1.4 at this duplicate issue https://www.drupal.org/node/2179577#comment-9057667, when I increased it to 1.7, that's when the errors go away.

So, I hope this helps for others who are still seeing the errors.

jQuery admin: 1.7
Default jQuery: 1.9

The above works for me.

quantos’s picture

quantos CreditAttribution: quantos commented

Bingo! That worked for me too. After a lot of fannying about earlier. Thank you guys/vchen.

IE I couldn't previously get the Views interface/options to work with either the 7.1x or the 7.2xdev line. IE On updating to jQuery 1.7 for the admin scheme (Rubik) + 1.9 for the default kick-started the Carousel views page + Views UI (and preview) straight away (with owl carousel 2.x lines).

Q.