[Resolved] Adding Views to the Mega Menu in Astra Theme causes Beaver Builder to Break

[Author]

Posts

[Timothy]

Hi,

I've reached out to Astra but they say it must be a Toolset issue. I'm using their mega menu feature to add a View. On the front end when I activate Beaver Builder and try to add new modules, it basically stops working, and in console errors appear. When I remove the View from the mega menu it all works fine.

This is the error in console:

Uncaught TypeError: Cannot read property 'appendChild' of undefined
at h.<computed>.<computed>._createHelper (jquery.ui.sortable.js:926)
at h.<computed>.<computed>.h.isFunction.a.<computed> [as _createHelper] (widget.min.js:11)
at h.<computed>.<computed>._mouseStart (jquery.ui.sortable.js:180)
at h.<computed>.<computed>.h.isFunction.a.<computed> [as _mouseStart] (widget.min.js:11)
at h.<computed>.<computed>._mouseMove (mouse.min.js:11)
at h.<computed>.<computed>.h.isFunction.a.<computed> [as _mouseMove] (widget.min.js:11)
at HTMLDocument._mouseDistanceMet._mouseDelayMet._mouseMoveDelegate (mouse.min.js:11)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.r.handle (jquery.js:3)

And this is line 926 of that file:

  $(o.appendTo !== "parent" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);

This is the test page:
hidden link

Iv'e tried deactivating plugins, so I've narrowed it down to Views and Astra Pro plugin.

[Shane]

Hi Timothy,

Thank you for getting in touch.

Its quite possible a 3 way conflict. Are you able to tell which plugin the script error is coming from ?

Right now I see that the menu is working fine with the view . I'm assuming that BB is currently disabled.

Thanks,
Shane

[Timothy]

The error appears to be coming from Beaver Builder. Beaver Builder is not disabled, the menu works always, it is beaver builder that stops working. When I try to edit or add modules to the page the error appears and nothing can be added or edited via beaver.

Tim

[Shane]

Hi Timothy,

Based on this and your initial thread I wouldn't say this is a Toolset or is with Astra since both work fine together. It is when Beaver Builder is introduced thats when the issue comes up.

Also you mentioned that the error is coming from one of the files from Beaver Builder.

In this case it would be best to get in touch with the BB support team since we won't be able to do anything about this error. The BB team needs to investigate what is causing the error to be thrown.

Thanks,
Shane

[Timothy]

Ok, I will talk to Beaver Builder support. But I thought maybe the inserted View might be affecting the DOM somehow, which that error seems to indicate is happening.

[Christian Cox]

Hi, Shane is unavailable this week as he is on vacation. I'm taking a look at his tickets and wanted to follow up here. If there is a problem in the View's output, it's possible that the DOM structure could be broken. For example, if there is an unclosed div tag somewhere or an extra closing div tag somewhere in the loop, it's possible that could break the BB editor, but it's difficult to tell offhand. I can review your View's loop editor code and loop template code if you include it in your next reply. Use the Formatting instructions link above the reply editor to see how to add code in your reply so that is easily readable.

I can review the View's contents and see if anything looks off, and give you some feedback.

[Timothy]

Thanks, here's the Loop and Template code.

The Loop Editor

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
      <div class="row-feaut-books-menu">
          <wpv-loop  pad="true">
              [wpv-item index=all]
                  [wpv-post-body view_template="loop-item-in-featured-book-for-menu"]	
          </wpv-loop>
      </div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	<!--[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No books found[/wpml-string]</strong>
	[/wpv-no-items-found]-->
[wpv-layout-end]

The Template

<div class="book-menu-box">
   <div class="book_cover">[types field='book-cover' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='150' proportional='false'][/types]</div>
  	<!--div class="info_book_menu_wrapper"-->
       <div class="book_title">[wpv-post-title] </div>
       <div class="tooltip_book_menu">Read More
               <span class="tooltiptext_book"> [types field='book-description'][/types]</span>
       </div>
      <div class="btn_buy_row">
         <a class="buy_book_btn_menu" href="<em><u>hidden link</u></em> field='book-isbn-number-2' output='raw'][/types]" target="_blank" rel="noopener noreferrer">
              BUY THIS BOOK
         </a>
     <!--/div-->
  </div>
</div>

[Christian Cox]

I don't see anything obviously wrong in the loop code. However, I've seen issues where Content Templates cause problems when used with Elementor Pro's Theme Builder templates. As a test, please replace the loop template shortcode in the loop code with some simple text. Replace this shortcode:

[wpv-post-body view_template="loop-item-in-featured-book-for-menu"]

...with some test text like this (no shortcodes):

test

Then test once more in the Elementor template. Is the issue resolved? If so, then you can try moving the code contents from the loop template editor into the loop editor, replacing the loop template shortcode. That may resolve the conflict between Content Templates and Elementor Pro Theme Builder templates.

If the issue was not resolved, I'll need to take a closer look. Let me know what you find out.

[Timothy]

I'm using Beaver Builder, but when I replaced the loop template shortcode with "test", it does indeed fix the issue. Ok, so is this a bug, or should I just replace "test" with what I had in the template and let this issue go? It's been driving me nuts for weeks now, so if I cannot use templates then I'm ok at this point.

[Christian Cox]

Okay my apologies, I was confused about BB vs. Elementor. It could indeed be a conflict between how Toolset's Content Templates work inside the BB designer tool, but it could also be something produced by the template that is causing the problem, like if there is poorly formatted HTML code in one of the fields displayed in the template. The most straightforward solution may be to place the content from the template into the loop directly, as I mentioned before. If that produces no issues in the BB builder, it's most likely just an issue using Content Templates (including those in the loop of a View) in that particular area of the BB builder. I'd need to see more about the BB builder design you're using and more information about how the View is implemented in the Mega Menu feature to see if that is a known issue or if this is a bug we need to resolve on our end. But the fastest solution is probably just replacing the CT shortcode with the contents of that CT.

[Timothy]

My issue is resolved now. Thank you!