conflict of admin.js with WPCourseWare

[ravisoni6262]

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.

[nextgenthemes]

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?

[ravisoni6262]

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

[nextgenthemes]

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.

[ravisoni6262]

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]

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

[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]

@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?

[nextgenthemes]

@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.