Ajax 加载后触发 Wordpress 插件/短代码答案

【问题标题】：Fire Wordpress Plugin/Shortcode after Ajax LoadAjax 加载后触发 Wordpress 插件/短代码
【发布时间】：2013-10-06 23:06:56
【问题描述】：

我有一个通过 Ajax 加载其主要内容的网站，但在加载所述内容中的任何插件/短代码时遇到了问题。如果我通过 url 栏直接加载每个页面，插件就可以正常工作。

Ajax 代码

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;
    });
});

我正在寻找运行特定于页面的短代码..

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

通过ajax加载相应页面后。我相信正确的解决方案是在加载函数回调中运行脚本，但我不确定如何使用短代码来执行此操作。如果需要，我可以获取每个简码调用的函数..

示例简码函数

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"})
});

【问题讨论】：

您将无法通过浏览器运行简码。当服务器响应 AJAX 请求时，它们需要已经运行。您可以发布响应 AJAX 的 php 代码吗？您需要确保服务器首先处理所有内容...
正如 manishie 提到的，我们需要查看 php 代码来帮助解决这个问题。最有可能的是，您可以利用 ajax 处理程序（即处理此请求的 ajax php 函数）中的输出缓冲区来处理短代码 php 并将其存储在字符串中。然后，返回该字符串，以便您可以使用 jQuery 成功函数将从服务器返回的字符串放置在文档中的适当位置。

标签： jquery ajax wordpress shortcode

【解决方案1】：

不是最优雅的解决方案，但取决于您尝试重新初始化的插件/短代码，您可以在 .load 回调中使用适当的 jQuery 初始化对许多人执行此操作。

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

例如对于弹性滑块：

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
                                          });

或者要复制音频简码，您可以执行以下操作（使用之前在 functions.php 中排队的正确脚本）：

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

【讨论】：