Okay
  Public Ticket #2537331
CUSTOM CSS OR JS
Closed

Comments

  •  2
    Denys Palumbo started the conversation

    Hi,

    I enqueued custom CSS and JS.

    How do I make these scripts and style working also on ajax loading?
    If I load from 0, without ajax I can see everything, but going back and forth seems that the stuffs enqueued via functions.php are not loading (like homepage scripts).


    This is my code:


    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function script_home() {
        if( is_front_page() )
        {
    wp_register_style('wnt_home_css', get_stylesheet_directory_uri() . '/home.css', '1', true);
    wp_enqueue_style('wnt_home_css');
    wp_register_script( 'wnt_home_js', get_stylesheet_directory_uri() . '/home.js', array( 'jquery' ), '1', true );
    wp_enqueue_script('wnt_home_js');

        }
    }
    add_action( 'wp_enqueue_scripts', 'script_home' ); /*classe pagina to body*/ function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . '-' . $post->post_name;
    }
    return $classes;
    }
    add_filter( 'body_class', 'add_slug_body_class' );
    /*js extra why not*/
    /*meta in head*/
    function child_meta() {
    //to-add-soon fb OG metatag
    }
    add_action( "wp_head", "child_meta" );
    /*close meta in head*/
    //jquery external
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
           function my_jquery_enqueue() {
           wp_deregister_script('jquery');
           wp_register_script('jquery', "//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js", false, null);
           wp_enqueue_script('jquery');
       wp_deregister_script('datepicker');
       wp_register_script('datepicker', '//cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js', 1, true);
       wp_enqueue_script('datepicker');
       wp_register_script('parallax_wnt', '//cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js', 1, true);
       wp_enqueue_script('parallax_wnt');
       wp_register_script('skroll_wnt', '//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js', 1, true);
       wp_enqueue_script('skroll_wnt');
        };
    /*js child*/
    function wnt_js() {
        wp_enqueue_script( 'wnt_js', get_stylesheet_directory_uri() . '/custom.js', array( 'jquery' ), '1', true );
    }
    add_action('wp_enqueue_scripts', 'wnt_js');


    thanks

  •  1,825
    Support replied

    Hello Denys,

    As you probably know Ajax page transitions loads the target page content container within the original page. Since the target page is not loaded normally the <head> and <body> elements will stay the same.

    Since a lot of plugins are using javascript initialisation in the head (or the footer) of the page they don't get called in the target page.

    The solution we found is to put all the extra inits in ajaxSuccess event handler as you can see in the child theme we provide in main archive (I attach it here for your convenience, childscript.js file)


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy