Jquery Jscrollpane的问题,Wordpress中的Ajax动态加载内容

时间:2011-03-27 02:56:44

标签: jquery ajax wordpress jscrollpane dynamic-content

我遇到的问题是我的wp网站工作得很好,但jscrollpane没有加载到动态显示的内容上!

您可以在此处查看:www.ra-sittig.de

她可以看到问题!如果您点击此格式的网址:

www.ra-sittig.de/zeugenbeistandschaft

然后你可以看到滚动窗格工作,但是ajaxed laoded内容不起作用!

如果您点击这样的生成链接的正常方式(您可以在主页上查看!) http://www.ra-sittig.de/#url=http%3A//www.ra-sittig.de/zeugenbeistandschaft

然后加载ajaxed内容但不加载滚动窗格!我能做些什么来解决这个问题,因为需要工作,因为它是客户工作,你能帮我解决这个问题!

是否有人建议我该怎么做才能完成这项工作!

如果您需要代码:

<script type="text/javascript">
  jQuery(function($) {         //since your site is calling jQuery.noConflict()
    $('.scroll-pane').jScrollPane();
  });
</script>

这是header.php上的那个

这是ajaxed加载内容的.js代码,名为ajax-for-all.js

/**
 * TODO
 *
 * Back/forward history
 * Forms ?
 */
jQuery(document).ready(function($) {


    /**
     * Dispatcher class.
     *
     * @since 0.3
     */
    function AjaxForAllDispatcher() {
        this.completed  = 0;
        this.request    = new AjaxForAllRequest;
        this.tmp        = '';
        this.fire       = function(href) {
            if ( this.completed == 0 ) {
                this.step(false);
                div.hide();
                this.content = this.request.get(href);
            }
        }
        this.step       = function(content) {
            this.completed = this.completed + 1;
            if ( content != false ) {
                this.tmp = content;
            }
            if ( this.completed == 3 ) {
                div.reveal(this.tmp);
                this.completed = 0;
            }
        }
    }

    /**
     * Div class. The div that we will replace.
     *
     * @since 0.3
     */
    function AjaxForAllDiv() {
        this.width      = 0;
        this.height     = 0;
        this.id         = afa_id;
        this.preserve   = afa_preserve_size;
        this.transition = ajax_for_all_transition;
        this.transtime  = ajax_for_all_transtime;
        this.scrolltop  = ajax_for_all_scrolltop;
        this.scrolltime = ajax_for_all_scrolltime;
        this.hide       = function() {
            if ( this.preserve == true ) {
                this.height = $('#content').css( 'height' );
                this.width = $('#content').css( 'width' );
                $('#' + this.id ).wrapInner( '<div id="afasize" />' );
                $('#afasize').wrapInner( '<div id="afacontent" />' );
                $('#afasize').css( 'height', this.height );
                $('#afasize').css( 'width', this.width );
            }
            else {
                $('#' + this.id ).wrapInner( '<div id="afacontent" />' );
            }
            $('#' + this.id ).prepend( '<div id="afaspinner"> </div>' );
            $('#afaspinner').fadeIn();
            // scroll to top
            if (this.scrolltop) {
                $('html, body').animate({
                    scrollTop: 0
                }, this.scrolltime);
            }
            // transition
            switch (this.transition) {
                case 'none':
                    dispatcher.step(false);
                break;
                case 'fade':
                    $('#afacontent').fadeOut(
                        this.transtime,
                        function() {
                            dispatcher.step(false);
                        }
                    );
                break;
                default:
                case 'slide':
                    $('#afacontent').slideUp(
                        this.transtime,
                        function() {
                            dispatcher.step(false);
                        }
                    );
                break;
            }
        }
        this.reveal = function(tmp) {
            if ( typeof AjaxForAllCallback == 'function' ) {
                AjaxForAllCallback(tmp); // callback that gets all the data
            }
            // transition
            switch (this.transition) {
                case 'none':
                    $('#' + this.id ).html(tmp.content);
                break;
                case 'fade':
                    $('#' + this.id ).html(tmp.content);
                    $('#' + this.id ).fadeIn(this.transtime);
                break;
                default:
                case 'slide':
                    $('#' + this.id ).hide();
                    $('#' + this.id ).html(tmp.content);
                    $('#' + this.id ).slideDown(this.transtime);
                break;
            }
            // The position seems to be accurate even when the slideDown isn't
            // finished yet:
            if ( tmp.jump ) {
                anchor  = $('a[name|=' + tmp.jumpto + ']');
                offset  = anchor.offset();
                ytop    = offset.top;
                $('html, body').animate({
                    scrollTop: ytop
                }, this.scrolltime);
            }
        }
    }

    /**
     * Request class. Gets the content we will inject.
     *
     * @since 0.3
     */
    function AjaxForAllRequest() {
        this.ajaxurl    = ajaxurl;
        this.user       = ajax_for_all_curl_user;
        this.nonce      = ajax_for_all_curl_nonce;
        this.get        = function(href) {
            $.getJSON(
                this.ajaxurl, {
                    action: 'ajax_for_all',
                    href: href,
                    user: this.user,
                    nonce: this.nonce
                }, function(data) {
                    if (data.success) {
                        dispatcher.step(data);
                    }
                    else {
                        // just follow the link then
                        window.location = href;
                    }
                }
            );
        }
    }

    /**
     * Instantiate the unique objects
     */
    dispatcher = new AjaxForAllDispatcher();
    div = new AjaxForAllDiv();

    /**
     * Event binding
     */
    $('a').live( 'click',
        function() {
            if ( $(this).attr('target') ) {
                return true;
            }
            var href = $(this).attr('href');
            $.bbq.pushState({ url: href });
            if ( href.indexOf('#') == 0 ) {
                return true;
            }
            dispatcher.fire(href);
            return false;
        }
    );

    // Bind a callback that executes when document.location.hash changes.
    $(window).bind( "hashchange", function(e) {
        var hash = e.getState( 'url' );
        if ( hash !== undefined ) {
            dispatcher.fire(hash);
        }
        else if ( window.location != afa_root ) {
            dispatcher.fire(afa_root);
        }
    });

    if ( afa_nodeeplink != 'on' ) {
        $(window).trigger( 'hashchange' );
    }

});

PL帮助我解决这个问题! 谢谢你的建议!

亲切的问候

cominaction

1 个答案:

答案 0 :(得分:0)

我认为您需要在加载ajax内容后再次初始化滚动窗格(现在只有在页面准备好时才会完成)。只需将其添加到

中即可
if(data.success){ 
    dispatcher.step(data);
    $('.scroll-pane').jScrollPane();
}