reload visual composer grid after ajax call

问题

I am currently implementing barba.js in a wordpress theme. I have managed to make most of the javascript functions to work properly after page change except the VisualComposer grid.

Reading this thread I have managed to make Visual composer basic functions work except the grid via window.vc_js();

If I add window.resize(); I get a window.resize is not a function error.

In quite a few pages I also get the same error with window.vc_js() - window.vc_js is not a function

How can I initalize the vc_grid? Why do I get these error when Visual composer is actually active?

Any help appreciated

回答1:

tl;dr

put your custom javascript code in here:

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

if you need to make some logic after Visual Composer grid has been loaded then do it like this (I'm pasting my code from some site):

// catch VISUAL COMPOSER AFTER GRID ITEMS ARE LOADED .. hook and update date strings,, ONCE!
$(window).bind( 'grid:items:added', function(){
    if ( ! $( 'body' ).attr('masonicaDone' ) == "1" ){
        $('.enddate, .startdate').each( function(ix, el){
            var tmm = sDate( TIME( $(el).text().trim() ), lang ) + ' ∙ ' + sTime( TIME( $(el).text().trim() ), lang  );
            $(el).text( tmm );
        });
        $( 'body' ).attr('masonicaDone', 1);
    }
});

the main thing is to bind to 'grid:items:added' event, that runs after ajax data has come down the wire,, in my example I'm formating date to local format (and not to native php date format, WP)

Also, very important to have is to add somekind of flag (I'm attr'ing on body) to not do it more then once (I'd endup with formating the datestring twice and have errors) but only first time (on after ajax). Note that this same event is fired on clicking on filter buttons (portfolio categories most of the time) and who knows maybe some transitions also..

来源：https://stackoverflow.com/questions/44436986/reload-visual-composer-grid-after-ajax-call