Load after ajax

  • Resolved holby

    (@holby)


    5 years, 9 months ago

    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)

    5 years, 9 months ago

    Hi @holby,

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

    Thread Starter holby

    (@holby)

    5 years, 9 months ago

    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)

    5 years, 9 months ago

    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)

    5 years, 9 months ago

    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)

    5 years, 9 months ago

    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.