Jquery .click function for getting subcat of id element

Question

I try to build a car search plugin, with 3 category levels. Like: 1 row = Maincat, 2 row = Subcat, 3 row = Subsubcat...

Here is an example of what i want to do: https://www.aez-wheels.com/3DKonfigurator/index.php?lcs=onz2sm13at&lng=en

in my code the first level appears and the second level loads. but the third level is not loading. I Think the problem is, that the second row is created dynamicaly. Can somebody tell me where i have a wrong code?

   // Loading WordPress hooks
    function __construct()
    {
        add_action( 'avada_after_header_wrapper', array($this, 'llm_car_conf_list') );

        // Register ajax action
        add_action( 'wp_ajax_get_cat', array($this, 'getCat') );


        // Register ajax action for non loged in user
        add_action('wp_ajax_nopriv_get_cat', array($this, 'getCat') );


    }

// function for the maincat
function llm_car_conf_list() { 
            if ( is_front_page() ) {?>

            <div class="llm_car_container">
                <div class="car_wrapper">
                    <div class="car_row">
                        <div class="car_title"><h2>1. Fahrzeug wählen</h2></div>
                        <ul id="maincat" class="car_conf"><?php

            $categories = get_categories(array (
            'taxonomy'      => 'product_cat',
            'parent'        => 0
            ));

            foreach ( $categories as $category ) {
            printf( '<li class="car_list_item"><a id="%1$s">%2$s</a></li>',
                esc_html ($category->term_id ),
                esc_html( $category->cat_name )
                  );
            }
?></ul></div>

// Jquery to load first subcat
<script type="text/javascript">
                (function($){
                    $("#maincat li").click(function(){
                        $("#second_row").empty();
                        $.ajax({
                            type: "post",
                            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                            data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                            success: function(data) {
                                $("#second_row").append(data);
                            }
                        });
                    });
                })(jQuery);
            </script>
    <div class="car_row">
    <div class="car_title"><h2>2. Typ wählen</h2></div>
    <ul id="second_row" class="car_conf"></ul>
    </div>

    // Jquery to load subsubcat
 <script type="text/javascript">
                (function($){
                    $("#second_row li").click(function(){
                        $("#third_row").empty();
                        $.ajax({
                            type: "post",
                            url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                            data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                            success: function(data) {
                                $("#third_row").append(data);
                            }
                        });

                    });
                })(jQuery);
            </script>
    <div class="car_row">
    <div class="car_title"><h2>3. Jahrgang wählen</h2></div>
    <ul id="third_row" class="car_conf"></ul>
    </div>

 </div>
 </div>
 <?php 
            }
 }


    // Function to load the subcats

    function getCat() {
        $categories = get_categories(array (
            'taxonomy'      => 'product_cat',
            'child_of'      => $_POST['cat_id'],
            'parent'        => $_POST['cat_id']
        ));

        foreach ( $categories as $category ) {
            printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
                esc_html ($category->term_id ),
                esc_html( $category->cat_name )
                  );
            }    
        die();
    }

Possible duplicate of [Adding onClick event dynamically using jQuery](https://stackoverflow.com/questions/12284168/adding-onclick-event-dynamically-using-jquery) — miken32, May 22 '19 at 22:42
I read the other question. Unfortunately it doesn't help me or I didn't understand. Sorry, I'm still learning Javascript. — Mar__co, May 23 '19 at 08:05
I've found a solution. I moved the jquery code for the third row into the function getCat. Now it works — Mar__co, May 23 '19 at 08:49
@Mar__co would you like to post your solution here as an answer? — Grant Noe, May 23 '19 at 18:37

score 0 · Answer 1 · answered May 29 '19 at 14:40

Here is my full code, that works in my plugin

<?php
defined('ABSPATH') or die("Thanks for visting");

if ( ! class_exists( 'frontendAjaxDdown' ) ):
    class frontendAjaxDdown
    {


         // Loading WordPress hooks
        function __construct()
        {
            add_action( 'avada_after_header_wrapper', array($this, 'llm_car_conf_list') );

            // Register ajax action
            add_action( 'wp_ajax_get_cat', array($this, 'getCat') );
            add_action( 'wp_ajax_get_subcat', array($this, 'getSubCat') );
            add_action( 'wp_ajax_get_subsubcat', array($this, 'getSubSubCat') );



            // Register ajax action for non loged in user
            add_action('wp_ajax_nopriv_get_cat', array($this, 'getCat') );
            add_action('wp_ajax_nopriv_get_subcat', array($this, 'getSubCat') );
            add_action('wp_ajax_nopriv_get_subsubcat', array($this, 'getSubSubCat') );



        }

function llm_car_conf_list() { 
    if ( is_front_page() ) {?>

        <div class="llm_car_container">
           <div class="car_wrapper">
             <div class="car_row">
                 <div class="car_title"><h2>1. Fahrzeug wählen</h2></div>
                 <ul id="maincat" class="car_conf"><?php

                    $categories = get_categories(array (
                    'taxonomy'      => 'product_cat',
                    'hide_empty'    => 1,
                    'parent'        => 0
                    ));

                    foreach ( $categories as $category ) {
                    printf( '<li class="car_list_item"><a id="%1$s"><img src="http://climair-schweiz.ch.185-117-169-242.srv201.webpreview.ch/wp-content/uploads/carbrands/%2$s.png" width="20px">%2$s</a></li>',
                        esc_html ($category->term_id ),
                        esc_html( $category->cat_name )
                    );
                    } ?>
                </ul>
                </div>

                <script type="text/javascript">
                        (function($){
                            $("#maincat li").click(function(){
                                $("#second_row, #third_row, #fourth_row").empty();
                                $.ajax({
                                    type: "post",
                                    url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                                    data: { action: 'get_cat', cat_id: $(this).find('a').attr('id') },
                                    success: function(data) {
                                        $("#second_row").append(data);
                                    }
                                });
                            });
                        })(jQuery);
                </script>
                <div class="car_row">
                  <div class="car_title"><h2>2. Model wählen</h2></div>
<ul id="second_row" class="car_conf"></ul>
                </div>


                <div class="car_row">
                  <div class="car_title"><h2>3. Baujahr | Typ wählen</h2></div>
                  <ul id="third_row" class="car_conf"></ul>
                </div>

                <div class="car_row">
                  <div class="car_title"><h2>4. Form | Türen wählen</h2></div>
                  <ul id="fourth_row" class="car_conf"></ul>
                </div>

           </div>
        </div> <?php 
    }
}

function getCat() {

    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
            esc_html ($category->term_id ),
            esc_html( $category->cat_name )
        );
    } ?>
    <script type="text/javascript">
        (function($){
            $("#second_row li").click(function(){
                $("#third_row, #fourth_row").empty();
                $.ajax({
                    type: "post",
                    url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                    data: { action: 'get_subcat', cat_id: $(this).find('a').attr('id') },
                    success: function(data) {
                        $("#third_row").append(data);
                    }
                });

            });
        })(jQuery);
    </script> <?php
    die();
}

function getSubCat() {
    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li id="%1$s" class="car_list_item"><a id="%1$s">%2$s</a></li>',
            esc_html ($category->term_id ),
            esc_html( $category->cat_name )
              );
        }
    ?> <script type="text/javascript">
            (function($){
                $("#third_row li").click(function(){
                    $("#fourth_row").empty();
                    $.ajax({
                        type: "post",
                        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
                        data: { action: 'get_subsubcat', cat_id: $(this).find('a').attr('id') },
                        success: function(data) {
                            $("#fourth_row").append(data);
                        }
                    });

                });
            })(jQuery);
        </script> <?php
    die();
}

function getSubSubCat() {
    $categories = get_categories(array (
        'taxonomy'      => 'product_cat',
        'hide_empty'    => 1,
        'child_of'      => $_POST['cat_id'],
        'parent'        => $_POST['cat_id']
    ));

    foreach ( $categories as $category ) {
        printf( '<li class="car_list_item"><a href="%1$s">%2$s</a></li>',
        esc_url( get_category_link( $category->term_id ) ),
            esc_html( $category->cat_name )
              );
        }

    die();
}

}
endif;
new frontendAjaxDdown();
?>

Jquery .click function for getting subcat of id element

1 Answers1