PJAX mit PHP - funktioniert nicht

Question

Ich versuche gerade, PJAX für selektive Inhalte zu implementieren.

Es ist eine Portfolio-Website und ich möchte die Video-Player-Seite neu laden, wenn auf eine Miniaturansicht geklickt wird index.php.

Die Seite kann here

Ich habe ein <div> Element content und ich möchte eine der <a> Elemente genannt zu finden (innerhalb content) zu PJAX in der entsprechenden Video-Seite (in den content Element)

Mein Javascript ist unten:

<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> 

Ich bekomme keine Fehler oder Rückmeldungen im Zusammenhang mit PJAX, nur die u sual-Verhalten einer vollständigen Seitenlast.

Wohin gehe ich falsch?

Answer 1

Ihr Selektor hat einige Fehler. Und Ihre div hat ein class kein id Es sollte:

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

Answer 2

Ich hatte einen Javascript-Fehler in Bezug auf meine Verwendung einer anderen Schrift, BackgroundCheck.JS - Siehe die überarbeitete Javascript unten !:

<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> 

Ich habe immer noch ein paar Probleme, aber zumindest kann ich jetzt sehen, dass PJAX den Inhalt schiebt.