[Resolved] jQuery for infinite scroll new content applies also previously loaded pages

Home Forums Support jQuery for infinite scroll new content applies also previously loaded pages

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1430332
    Jiri

    Hello,
    I am trying to run jQuery script when new content is load by infinite scroll.
    I use the advice mentioned here: https://generatepress.com/forums/topic/jquery-event-on-load-more-posts-in-infinite-scroll/#post-644588
    It is working well. JQuery runs on the new loaded content.

    But the problem is, that it applies also on all previously loaded content.

    The jQuery changes href attribute of .post-image a,h2.entry-title a classes.
    Please, is there any way how to apply the jQuery script only on infinite scroll newly loaded elements and the previously loaded content leave untouched?

    Best Regards

    #1431013
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Can you share your code so I can see what it’s doing?

    Let me know 🙂

    #1431463
    Jiri

    Hello,
    sure, no problem. Here it is:

    
    <script type="text/javascript">
    jQuery( document ).ready( function($) {
        var $container = $( '#main article' ).first().parent();
    
        $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
                       
               $(".post-image a,h2.entry-title a").one('click',function(){
               url=$(this).attr('href');
               $(this).attr('href','/tracking/track.php?u=' + escape(url));
               });
        } );
    } );
    </script>
    
    #1432173
    Tom
    Lead Developer
    Lead Developer

    Hmm, just did some searching around and couldn’t figure out a way to target newly appended items only.

    One idea is to add classes to the posts on the first page only, then target those classes:

    add_filter( 'post_class', function( $classes ) {
        if ( ! is_paged() ) {
            $classes[] = 'first-page-post';
        }
    
        return $classes;
    } );

    Then you could do this: .first-page-post .post-image a, .first-page-post h2.entry-title a

    #1432807
    Jiri

    Your PHP snippet took me to an interesting coding “trip”. 🙂 I have already resolved the first page before I wrote here. But the snippet, after some changes, is also usable to add new CSS classes into paged parts of infinite scroll. After some hard investigation I get to this version of PHP and jQuery codes.

    I changed the PHP snippet to use current page number to generate new classes for infinite scroll pages

    
    add_filter( 'post_class', function( $classes ) {
        
    	if ( is_paged() ) {
    	    $pagenum = (get_query_var('paged')) ? get_query_var('paged') : 1;
    		$classes[] = 'page-'.$pagenum.'-post';
    	}
    	
    	return $classes;
    	
    });
    

    jQuery script adding the tracking code I changed to use the new classes with current page number (and added also new functionality – add target _blank to the links)

    
    <script type="text/javascript">
    jQuery( document ).ready( function($) {
        var $container = $( '#main article' ).first().parent();
    
        $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
            var $infScroll = $container.data('infiniteScroll');  //current page number
    	var pagenum = $infScroll.pageIndex;
    	var aclass1 = '.page-' + pagenum + '-post .post-image a'; //create css classes based on current page number
    	var aclass2 = '.page-' + pagenum + '-post h2.entry-title a';
      
    		//select all classes and set target _blank
            	document.querySelectorAll(aclass1 + "," + aclass2) 
            	.forEach(function(elem) {
            	elem.setAttribute('target', '_blank');
            	});
               
    			//select all classes and add tracking code prefix to href 			
    			$(aclass1 + "," + aclass2).one('click',function(){  
               		url=$(this).attr('href');
               		$(this).attr('href','/tracking/track.php?u=' + escape(url));
               		});
        } );
    } );
    </script>
    

    Thank you very much for the PHP snippet. It helped me a lot.
    Now it seems to be working fine. But I appreciate your possible suggestions to the new code.

    Have a nice rest of the weekend

    #1433177
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I was able to point you in the right direction. Thanks for sharing your code! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.