PJAX与PHP-不工作

PJAX with PHP - Not working

本文关键字:工作 PHP- PJAX      更新时间:2024-04-16

我目前正在尝试为选择性内容加载实现PJAX。

这是一个公文包网站,我想在index.php上点击任何缩略图时重新加载视频播放器页面。

页面可以在这里找到

我有一个称为content<div>元素,并且我想要相应视频页面中的任何<a>元素(在content内)到PJAX(进入content元素)

我的Javascript如下:

<script type="text/javascript">
            $(document).ready(function() {
                var $container = $('#thumbnail-array');
                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemSelector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });
            jQuery('.mobilemenu').click(function(e) {
                jQuery(this).toggleClass('is-active');
                jQuery('.mobile-nav').toggleClass('active');
                var delay = 100;
                    $('.linkitem').each(function(i, e) {
                    setTimeout(function() {
                    $(e).toggleClass('animate');
                    }, i * delay);
                });
                if(jQuery('.mobile-nav').hasClass('active')) {
                    $('body').on('touchmove', false);
                } else  {
                    $('body').off('touchmove', false);
                }
                });
                BackgroundCheck.init({
                    targets: '.name logo, .rightnav, .mobilemenu mobilemenu--htx'
            });
            $(".fittext").fitText(1.5);
            $(".fittext2").fitText(1.3, { minFontSize: '15px', maxFontSize: '20px' });
            $('.content a').pjax();
            $('.overlay').hover(function(){
                $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });
            $(window).bind("load", function() {
            $.getScript('js/social.js', function() {});
            });
        </script>

我没有收到任何与PJAX相关的错误或反馈,只是整页加载的常见行为。

我哪里错了?

您的选择器有一些错误。你的div有一个class而不是id它应该是:

$('.content a').pjax();

我在使用另一个脚本BackgroundCheck.JS时出现javascript错误-请参阅下面的修订javascript!:

    <script type="text/javascript">
        $(document).ready(function() {
            var $container = $('#thumbnail-array');
            $container.imagesLoaded(function() {
                $container.masonry({
                    itemSelector: '.video-thumbnail',
                    columnWidth: '.grid-sizer',
                    gutter: '.gutter-sizer',
                    percentPosition: true
                });
            });
        jQuery('.mobilemenu').click(function(e) {
            jQuery(this).toggleClass('is-active');
            jQuery('.mobile-nav').toggleClass('active');
            var delay = 100;
                $('.linkitem').each(function(i, e) {
                setTimeout(function() {
                $(e).toggleClass('animate');
                }, i * delay);
            });
            if(jQuery('.mobile-nav').hasClass('active')) {
                $('body').on('touchmove', false);
            } else  {
                $('body').off('touchmove', false);
            }
            });

        $(".fittext").fitText(1.5);
        $(".fittext2").fitText(1.3, { minFontSize: '15px', maxFontSize: '20px' });
        $('.content a').pjax();
        $('.overlay').hover(function(){
            $(this).parent().find('video').get(0).play();
            }, function() {
                var video = $(this).parent().find('video').get(0);
                video.pause();
                video.currentTime = 0;
            });
        });
        $(window).bind("load", function() {
        $.getScript('js/social.js', function() {});
        });
        document.addEventListener('DOMContentLoaded', function () {
            BackgroundCheck.init({
                targets: '.name, .logo, .desktop-nav, .right-nav, .mobilemenu span, .mobilemenu span:before, .mobilemenu span:after, .mobilemenu--htx'
            });
        });
    </script>

我仍然有一些问题,但至少我现在可以看到PJAX在推送内容。