Initializing Visual Composer upon Ajax content load

问题

Basic Structure below, have an ajax script that replaces the div inner-content and updates the menu, pushes history states, fade in/out contents ect..

The inner-content contains a foundation grid row and content of wordpress editor lives inside that container.

Now here is the issue... when using any Visual composer function that requires javascript triggers, Full width Span, slider, animations nothing gets loaded again when my ajax function triggers a content replace.

Here is part of my code that loads after ajax have got the content.

// Update the content
$content.stop(true,true);
//$("[data-vc-grid-settings]").vcGrid();
$('#content').foundation();
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */

// Update the title
document.title = $data.find('.document-title:first').text();

I thought .vcGrid() was the right init, but got the not defined console error. Where can I find docs related to re-initializing the visual composer elements?

<html>
<header>
Meta Content
</header>
<div off-canvus>
   <menu></menu>
   <div content>
      <div inner-content>

      </div>
   </div>
   <footer>
   </footer>
   <scripts>
</html>

回答1:

to add some custom javascript logic after Visual composer grid has been loaded do it like this:

$(window).bind( 'grid:items:added', function(){ 
  // add some logic here
});

for detailes look at this question => here

回答2:

Found the data I needed after digging through visual composer's javascript, added a resize action for window which triggers the visual composer's grid to work correctly.

$content.stop(true,true);
window.vc_js();
window.resize();
$('#content').foundation();
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */

// Update the title
document.title = $data.find('.document-title:first').text();
try {
    document.getElementsByTagName('title')[0].innerHTML = document.title.replace('<','&lt;').replace('>','&gt;').replace(' & ',' &amp; ');
}
catch ( Exception ) { }

来源：https://stackoverflow.com/questions/41708153/initializing-visual-composer-upon-ajax-content-load

标签

jquery

html

ajax

visual-composer