advanced-responsive-video-embedder icon indicating copy to clipboard operation
advanced-responsive-video-embedder copied to clipboard

Published 20 hours ago • verified publisher icon nextgenthemes

conflict of admin.js with WPCourseWare

Open ravisoni6262 opened this issue 2 years ago • 8 comments

When the Advanced Responsive Video Embedder is enabled, the WP Courseware course builder doesn't work. There are multiple JavaScript errors.

ReferenceError: sectionsDisplayed is not defined TypeError: this.$el.querySelectorAll is not a function ReferenceError: sectionsDisplayed is not defined Seems there is a conflict with the admin.js script. Both plugins are using Vue and both plugins have admin.js with similar functions.

ravisoni6262 avatar Jan 17 '23 12:01 ravisoni6262

ARVE uses Vue 2.0 for the short code creation dialog and the settings page. I can't see anything that I may have coded wrong that may cause these errors, or how to fix this. I use Vue, not even as an external resource, but it's compiled into the admin.js script.

Have you asked them to fix this as well? Maybe they use Vue 3.0? I don't know how this sectionsDisplayed would end up not defined as pretty much just executing my admin code, should at least have it as an empty object.

So sorry, but this is very low priority for me. Last thing I fixed from my end even though another plugin was breaking, my plugin only spawned new issues for me to fix. Ask them, give them this information, I don't know how to deal with multiple Vue uses or that that plugin does to break ARVE.

But it happens ONLY when you activate WP Courseware right?

nextgenthemes avatar Jan 21 '23 00:01 nextgenthemes

Hi @nextgenthemes , thanks for your reply. I was debugging the issue further and found that add_media_button is invoked on WP action media_buttons and it is adding multiple <div id="arve-sc-vue"> elements having the same ID,

This could be a problem here.

See my loom. https://www.loom.com/share/29557940bde342819fc05bc469397e9f

ravisoni6262 avatar Jan 23 '23 17:01 ravisoni6262

Thank you, @ravisoni6262. I did not understand what you said at the end of the video, something about shortcode executing? Anyway, I made a change so that the code with <div id="arve-sc-vue"> that is printed during add_media_button can only be printed once. It's possible that WP Courseware causes this to be fired multiple times per pageload. If that was the issue, the latest ARVE update should fix that. I did not test this yet, please let me know if it works for you.

nextgenthemes avatar Jan 25 '23 20:01 nextgenthemes

arve-sc-vue

Thank you, new version solved the repeat <div id="arve-sc-vue">, but there are still errors related to sectionsDisplayed because the vue is not able to initialize on <div id="arve-sc-vue">. Let me know how can I contribute on solving this case, I do have a dev site, would you like to access it?

ravisoni6262 avatar Jan 26 '23 15:01 ravisoni6262

FYI: In the latest version the VueJs is DEV mode.

ravisoni6262 avatar Jan 26 '23 16:01 ravisoni6262

Update:

  • I tried renaming our plugin JS file to WPCW_admin.js but this doesn't help. still getting sectionsDisplayed is not defined.
  • vue is not being loading inside <div id="arve-sc-vue">

ravisoni6262 avatar Jan 27 '23 10:01 ravisoni6262

@nextgenthemes hey, I understand you are busy, I don't want to disturb you, but I'm just following up on my comments and to see if there is any updates?

ravisoni6262 avatar Feb 03 '23 03:02 ravisoni6262

@ravisoni6262 I can not reproduce any of the JavaScript errors you are reporting. However, I just released a fix for an issue with WP Courseware a customer had that made the Course Builder Metabox permanently collapsed.

Again, if this is urgent to you and 9.9.9 does not fix this for you ask the WP Courseware devs if they can fix this.

nextgenthemes avatar Feb 05 '23 20:02 nextgenthemes