Support » Plugin: Code Snippets » Load after ajax

  • Resolved holby

    (@holby)


    Hi

    I am moving some stuff around in a div using a javascript snippet

    On the page I also have a AJAX filter to jump between categories. After using the ajax I need to trigger the snippet again somehow, something along these lines perhaps?

    add_action( 'wp_head', function () { ?>
    <script>
    
    $.ajaxComplete(function () {
      // Somehow trigger the other JS snippet again after AJAX.
    });
    	
    </script>
    <?php } );

    Thanks for any help

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Shea Bunge

    (@bungeshea)

    Hi @holby,

    Can I ask what the other JS snippet roughly looks like?

    Thread Starter holby

    (@holby)

    Sure, here goes:

    // Content Views - add custom script
    add_action( 'wp_footer', 'cv_theme_custom_script', 999999 );
    function cv_theme_custom_script() {
    	?>
    	<script>
    		jQuery( document ).ready( function ( $ ) {
    			$('.pt-cv-ctf-ev_stichtag').each(function(){
    $(this).find('.pt-cv-ctf-value').css('width','100%');
    $(this).closest('.pt-cv-ctf-column').css({'position': 'absolute', 'bottom': '30px', 'left': '0px', 'text-align': 'left'});
    });
    
    		} );
    	</script>
    	<?php
    }
    Plugin Author Shea Bunge

    (@bungeshea)

    I’d recommend wrapping your code in a function:

    add_action( 'wp_head', function () { ?>
    <script>
    	var my_very_unique_function_name = function ($) {
    		$('.pt-cv-ctf-ev_stichtag').each(function() {
    			$(this).find('.pt-cv-ctf-value').css('width','100%');
    			$(this).closest('.pt-cv-ctf-column').css({'position': 'absolute', 'bottom': '30px', 'left': '0px', 'text-align': 'left'});
    		});
    	};
    </script>
    }, 5 ); <?php

    Then, you can just call this function when the page is loaded:

    add_action( 'wp_footer', 'cv_theme_custom_script', 999999 );
    function cv_theme_custom_script() { ?>
    <script>
    	jQuery( document ).ready( function ( $ ) {
    		my_very_unique_function_name($);
    	} );
    </script>
    <?php
    }

    And you can also call it in response to an Ajax request:

    add_action( 'wp_head', function () { ?>
    <script>
    
    $.ajaxComplete(function () {
    	// trigger the other JS snippet again after AJAX.
    	my_very_unique_function_name($);
    });
    
    </script>
    <?php } );
    Thread Starter holby

    (@holby)

    Wow, thank you so much

    there is a small error which I am sure is trivial but beyond my scope

    In the first script on the last line:

    Parse error: a syntax error, expecting "}"
    Parse error: a syntax error, expecting ")"

    Thank you again

    Plugin Author Shea Bunge

    (@bungeshea)

    My apologies, looks like something got messed up when I posted the code. Here’s a fixed version:

    add_action( 'wp_head', function () { ?>
    <script>
    	var my_very_unique_function_name = function ($) {
    		$('.pt-cv-ctf-ev_stichtag').each(function() {
    			$(this).find('.pt-cv-ctf-value').css('width','100%');
    			$(this).closest('.pt-cv-ctf-column').css({'position': 'absolute', 'bottom': '30px', 'left': '0px', 'text-align': 'left'});
    		});
    	};
    </script>
    <?php }, 5 );
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Load after ajax’ is closed to new replies.