【问题标题】:Ajaxify Wordpress site with Social Plugins带有社交插件的 Ajaxify Wordpress 网站
【发布时间】:2015-04-07 21:28:00
【问题描述】:

我安装了插件“Ajaxify Wordpress Site”,并且还使用了“Easy Social Share 按钮”。 ajax 可以很好地加载较旧/较新的页面内容,而无需加载页面的其余部分(参见 www.squanderedink.com)。但是,加载后,社交按钮计数器不会更新。

Easy Social Share 给了我以下代码,必须在 ajax 加载完成后放置:

jQuery('.essb_links.essb_counters').essb_get_counters();
jQuery('.essb_counters .essb_links_list').essb_update_counters();

我添加了以下代码,但现在计数器“堆栈”(即,它们的计数器随着时间的推移而重复,页面通过 ajax 刷新)

//Update social
$(document).ready(function () {
    $("body").live("runScripts", function () {
        jQuery('.essb_links.essb_counters').essb_get_counters();
        jQuery('.essb_counters .essb_links_list').essb_update_counters();
    });
    $("body").trigger("runScripts"); // This line should also be added to the Ajax File
});

谢谢, 凯尔

AJAX 代码:

(function (window, undefined) {

    // Prepare our Variables
    var
        History = window.History,
        $ = window.jQuery,
        document = window.document;

    // Check to see if History.js is enabled for our Browser
    if (!History.enabled) return false;

    // Wait for Document
    $(function () {
        // Prepare Variables
        var
            // Application Specific Variables 
            rootUrl = aws_data['rootUrl'],
            contentSelector = '#' + aws_data['container_id'],
            $content = $(contentSelector),
            contentNode = $content.get(0),
            // Application Generic Variables 
            $body = $(document.body),
            scrollOptions = {
                duration: 800,
                easing: 'swing'
            };

        // Ensure Content
        if ($content.length === 0) $content = $body;

        // Internal Helper
        $.expr[':'].internal = function (obj, index, meta, stack) {
            // Prepare
            var
                $this = $(obj),
                url = $this.attr('href') || '',
                isInternalLink;

            // Check link
            isInternalLink = url.substring(0, rootUrl.length) === rootUrl || url.indexOf(':') === -1;

            // Ignore or Keep
            return isInternalLink;
        };

        // HTML Helper
        var documentHtml = function (html) {
            // Prepare
            var result = String(html).replace(/<\!DOCTYPE[^>]*>/i, '')
                .replace(/<(html|head|body|title|script)([\s\>])/gi, '<div id="document-$1"$2')
                .replace(/<\/(html|head|body|title|script)\>/gi, '</div>');
            // Return
            return result;
        };

        // Ajaxify Helper
        $.fn.ajaxify = function () {
            // Prepare
            var $this = $(this);

            // Ajaxify
            $this.find('a:internal:not(.no-ajaxy,[href^="#"],[href*="wp-login"],[href*="wp-admin"])').on('click', function (event) {
                // Prepare
                var
                    $this = $(this),
                    url = $this.attr('href'),
                    title = $this.attr('title') || null;

                // Continue as normal for cmd clicks etc
                if (event.which == 2 || event.metaKey) return true;

                // Ajaxify this link
                History.pushState(null, title, url);
                event.preventDefault();
                return false;
            });
            // Chain
            return $this;
        };

        // Ajaxify our Internal Links
        $body.ajaxify();

        // Hook into State Changes
        $(window).bind('statechange', function () {
            // Prepare Variables
            var
                State = History.getState(),
                url = State.url,
                relativeUrl = url.replace(rootUrl, '');

            // Set Loading
            $body.addClass('loading');

            // Start Fade Out
            // Animating to opacity to 0 still keeps the element's height intact
            // Which prevents that annoying pop bang issue when loading in new content

            if ('' != aws_data['transition']) {
                $content.animate({
                    opacity: 0
                }, 800);
            }
            if ('' != aws_data['loader']) {
                $content
                    .html('<img src="' + rootUrl + 'wp-content/plugins/ajaxify-wordpress-site/images/' + aws_data['loader'] + '" />')
                    .css('text-align', 'center');
            }

            // Ajax Request the Traditional Page
            $.ajax({
                url: url,
                success: function (data, textStatus, jqXHR) {
                    // Prepare
                    var
                        $data = $(documentHtml(data)),
                        $dataBody = $data.find('#document-body:first ' + contentSelector),
                        bodyClasses = $data.find('#document-body:first').attr('class'),
                        contentHtml, $scripts;

                    var $menu_list = $data.find('.' + aws_data['mcdc']);

                    //Add classes to body
                    jQuery('body').attr('class', bodyClasses);

                    // Fetch the scripts
                    $scripts = $dataBody.find('#document-script');
                    if ($scripts.length) $scripts.detach();

                    // Fetch the content
                    contentHtml = $dataBody.html() || $data.html();

                    if (!contentHtml) {
                        document.location.href = url;
                        return false;
                    }

                    // Update the content
                    $content.stop(true, true);
                    $content.html(contentHtml)
                        .ajaxify()
                        .css('text-align', '')
                        .animate({
                            opacity: 1,
                            visibility: "visible"
                        });

                    //Scroll to the top of ajax container
                    if ('' != aws_data['scrollTop']) {
                        jQuery('html, body').animate({
                            scrollTop: jQuery(contentSelector).offset().top
                        }, 1000);
                    }



                    //Append new menu HTML to provided classs
                    $('.' + aws_data['mcdc']).html($menu_list.html());
                    $body.ajaxify();
                    //Adding no-ajaxy class to a tags present under ids provided
                    $(aws_data['ids']).each(function () {
                        jQuery(this).addClass('no-ajaxy');
                    });

                    // 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) {}

                    // Add the scripts
                    $scripts.each(function () {
                        var scriptText = $(this).html();

                        if ('' != scriptText) {
                            scriptNode = document.createElement('script');
                            scriptNode.appendChild(document.createTextNode(scriptText));
                            contentNode.appendChild(scriptNode);
                        } else {
                            $.getScript($(this).attr('src'));
                        }
                    });

                    // BuddyPress Support
                    if (aws_data['bp_status']) {
                        $.getScript(rootUrl + '/wp-content/plugins/buddypress/bp-templates/bp-legacy/js/buddypress.js');
                    }

                    $body.removeClass('loading');

                    // Inform Google Analytics of the change
                    if (typeof window.pageTracker !== 'undefined') window.pageTracker._trackPageview(relativeUrl);

                    // Inform ReInvigorate of a state change
                    if (typeof window.reinvigorate !== 'undefined' && typeof window.reinvigorate.ajax_track !== 'undefined')
                        reinvigorate.ajax_track(url); // ^ we use the full url here as that is what reinvigorate supports
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    document.location.href = url;
                    return false;
                }

            }); // end ajax

        }); // end onStateChange

    }); // end onDomLoad

})(window); // end closure

【问题讨论】:

    标签: javascript jquery ajax wordpress


    【解决方案1】:

    搜索“//更新内容”并将其放在该代码之后。

    【讨论】:

    • 不幸的是,这不起作用。我应该能够完全按原样粘贴 jQuery 代码,还是需要进行一些函数调用?
    • 我通过添加以下代码使其部分工作,但现在当页面通过 ajax 重新加载时,计数器“堆栈”(如果重新加载 3 个页面,将有三个计数器彼此相邻) //更新社交 $(document).ready(function(){ $("body").live("runScripts", function(){ jQuery('.essb_links.essb_counters').essb_get_counters(); jQuery('. essb_counters .essb_links_list').essb_update_counters(); }); $("body").trigger("runScripts"); // 此行也应该添加到 Ajax 文件中 });
    • 您是否有指向该站点的实时链接,您必须在更新代码之前添加一个 $(selector).empty(),但我无法确定选择器是什么.可能是 $('.essb_links.essb_counters').empty();
    • 网站是 www.squanderedink.com
    • 供参考,当您点击“旧帖”三次时,社交按钮会获得三个计数器,如下图所示:i.imgur.com/ozqYBMd.png
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-11-08
    • 2015-02-01
    • 2019-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多