Fire Wordpress Plugin/Shortcode after Ajax Load

Question

I have a website that loads its main content via Ajax, but I have run into a problem with getting any plugins/shortcodes that are in said content to load. The plugins do work fine if I directly load each page via the url bar.

Ajax Code

jQuery(document).ready(function() {
    var History = window.History;
    if (!History.enabled) {
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ 
      var State = History.getState(); 
      //History.log(State.data, State.title, State.url);
      var goto_url = State.url;   
      jQuery('.content').load(goto_url+ ' #main').hide().delay(750).fadeIn(1000); 
    });

    jQuery('.main-menu a').click(function(evt){
        var href = jQuery(this).attr('href');
        History.pushState({}, '', href);

        var elementClassName = jQuery(this).attr('class');
        jQuery('.main-menu a').removeClass('active');
        jQuery('.main-menu a.'+elementClassName).addClass('active');

        jQuery('.content').load(href+ ' #main',
            function() { 
                jQuery(this).fadeIn(750);
            });
         return false;
    });
});

I am looking to run page specific shortcodes..

<?php echo do_shortcode('[shortcode goes here]'); ?>

after it's corresponding page is loaded via ajax. I believe the correct solution is to run the scripts in the load functions callback but I am not sure how to do this with shortcodes. If need be, I can get the function being called by each shortcode..

Example Shortcode Function

jQuery(document).ready(function($){ window.dzsp_init("#port0",{
settings_slideshowTime:3
,settings_mode: "masonry"
,title: ""
,design_item_width: ""
,design_item_height: ""
,design_categories_style: "normal"
,design_categories_pos: "top"
,design_pageContent_pos: "top"
,settings_disableCats: "off"
,settings_lightboxlibrary: "zoombox"
,settings_preloadall: "off"
,audioplayer_swflocation: "http://sbmdesigns.net/wp-content/plugins/dzs-portfolio/ap.swf"
,videoplayer_swflocation: "http://sbmdesigns.net/wp-content/plugins/dzs-portfolio/preview.swf"
,disable_itemmeta: "off"
,settings_ajax_loadmoremethod: "button"
,settings_mode_masonry_layout: "masonry"
,design_total_height_full: "off"
,settings_mode_masonry_layout_straightacross_setitemsoncenter: "off"
,design_item_height_same_as_width : "off"})
});

You're not going to be able to run the shortcodes to run from the browser. They need to have already run when the server responds to the AJAX request. Can you post your php code that responds to AJAX? You need to make sure the server processes everything first... — manishie
As manishie mentioned we would need to see the php code to help with this. Most likely, you can utilize output buffers within the ajax handler(ie your ajax php function that deals with this request) to process the shortcode php and store it in a string. Then, return that string, so you can use the jQuery success function to place the string you got back from the server in an appropriate place in the document. — zoranc

tainterr tainterr · Accepted Answer · 2013-11-21T23:14:09

Not the most elegant solution, but depending on which plugins/shortcodes you are trying to re-init, you can do this for many in the .load callback with the appropriate jQuery initialization.

$( "#result" ).load( "ajax/test.html", function() { /*put re-init code here*/ });

For example for flex sliders:

jQuery('.slider-<?php echo $slider->ID; ?>').flexslider({
                                      animation: "<?php echo $animation; ?>",
                                      easing: "swing",
                                      direction: "<?php echo $direction; ?>",
                                      slideshowSpeed: "<?php echo $slideshow_speed; ?>",
                                      animationSpeed: "<?php echo $animation_speed; ?>",
                                      controlNav: <?php echo $control_nav; ?>,               
                                      directionNav: <?php echo $directional_nav; ?>,  
                                      pauseOnAction: <?php echo $action; ?>,
                                      pauseOnHover: <?php echo $hover; ?>,
                                      useCSS: false
                                          });

Or to replicate the Audio Shortcode you could do something like this (with the proper scripts previously enqueued in functions.php):

$('.asset-audio').mediaelementplayer({videoHeight: 30,  videoWidth: 0, alwaysShowControls: true,
    features: ['playpause','progress','current','duration','volume'],
});

Fire Wordpress Plugin/Shortcode after Ajax Load

1 Answers