0

I have three drop-down list in cascade, I'm using the code of Ján Bočínec but it working just the first level when I choose the grade it not work, should enable the third drop-down list and show the groups.

When I choose the school, not problem the second drop-down work fine, but when I choose the grade the third drop-down not work

enter image description here

I see that the jQuery('#parent_grado').change is not working, I don't know if is because is created dynamically.

Can you please help me to find the bug or advice me if is possible the way that I try to created the web page of my school thanks

This is my code modified

<?php
 //Parent child con ajax

 function parent_child_cat_select() { ?>
    <script type="text/javascript">
        /* <![CDATA[ */
    jQuery(document).ready(function() {

        //segundo drop down
        jQuery('#parent_grado').change(function(){
            var parentgrado=jQuery('#parent_grado').val();
            alert("hola");
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grupo&parent_cat_ID=' + parentgrado,
                success:function(results)
                {
                    jQuery("#sub_grupo_div").html(results);
                }
            })
        });

//primer drop down
        jQuery('#parent_cat').change(function(){
            var parentCat=jQuery('#parent_cat').val();              
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grado&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_cat_div").html(results);
                }
            })
        });



    });


    /* ]]> */
</script>

<form action="<?php bloginfo('url'); ?>/" method="get">

    <div id="parent_cat_div"><?php 
    $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => 0,
        )
        );
        $datosparent="";
    echo '<select id="parent_cat" name="escuelas">';
        // Get categories as array  
         echo '<option disabled selected value> -- Seleccione Escuela -- </option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            $datosparent=$datosparent . ',' . $term->term_id;
        endforeach;
    echo '</select>';
     ?></div>       

    <div id="sub_cat_div"><select name="sub_cat_disabled" id="parent_grado" disabled="disabled"><option>Seleccione grado!</option></select></div>

    <div id="sub_grupo_div"><select name="sub_grupo_disabled" id="parent_grupo" disabled="disabled"><option>Seleccione grupo!</option></select></div>

    <div id="submit_div"><input type="submit" value="View" /></div>

</form>
<?php }

//Primer dropdown grado

function implement_ajax() {
    $parent_cat_ID = $_POST['parent_cat_ID'];
    $nameid = $_POST['nameid'];
    if ( isset($parent_cat_ID) )
    {
        $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => $parent_cat_ID,
        )
        );      
    if ( $terms ) {
            echo '<select id="' . $nameid . '" name="grado">';
            // Get categories as array
            echo '<option disabled selected value> -- Seleccione Grado -- </option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';

    } else {
        ?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select><?php
    }
    die();
} // end if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.

Thanks for your help

  • so what is the qustion? this is not exactly a "debig my code for me for free with only partial information given" kind of site? – Mark Kaplun Aug 11 '17 at 5:06
  • 1
    ... and if you are going to ask people to debug things for you, at least edit the question and properly format the code. – Mark Kaplun Aug 11 '17 at 5:07
0

Already was resolve my problem and the cause is because the component was created dinamically, the solution is use .on("change", instead .change(function().

I share the code of Ján Bočínec with the modification to use three dropdownlist or more.

//Parent child con ajax

function parent_child_cat_select() { ?>
 <script type="text/javascript">
        /* <![CDATA[ */
        jQuery(document).ready(function() {

        //segundo drop down
        jQuery('#sub_cat_div').on('change','#parent_grado',function(){
        var parentCat=jQuery('#parent_grado').val();                
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grupo&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_grupo_div").html(results);
                }
            })
        });


  //primer drop down
        jQuery('#parent_cat').change(function(){
            var parentCat=jQuery('#parent_cat').val();              
            // call ajax
            jQuery.ajax({
                url:'/dentrorealdelvalle/wp-admin/admin-ajax.php',
                type:'POST',
                data:'action=category_select_action&nameid=parent_grado&parent_cat_ID=' + parentCat,
                success:function(results)
                {
                    jQuery("#sub_cat_div").html(results);
                }
            })
        });



    });


    /* ]]> */
</script>

<form action="<?php bloginfo('url'); ?>/" method="get">

    <div id="parent_cat_div"><?php 
    $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => 0,
        )
        );
        $datosparent="";
    echo '<select id="parent_cat" name="escuelas">';
        // Get categories as array  
         echo '<option disabled selected value> -- Seleccione Escuela -- </option>';
        foreach ( $terms as $term ) :
            echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            $datosparent=$datosparent . ',' . $term->term_id;
        endforeach;
    echo '</select>';
     ?></div>       

    <div id="sub_cat_div"><select class="ramiro" name="sub_cat_disabled" id="parent_grado" disabled="disabled"><option>Seleccione grado!</option></select></div>

    <div id="sub_grupo_div"><select class="ramiro" name="sub_grupo_disabled" id="parent_grupo" disabled="disabled"><option>Seleccione grupo!</option></select></div>

    <div id="submit_div"><input type="submit" value="View" /></div>

</form>
<?php }
function implement_ajax() {
$parent_cat_ID = $_POST['parent_cat_ID'];
$nameid = $_POST['nameid'];
if ( isset($parent_cat_ID) )
{
        $terms=get_terms('grupos',
        array(
            'hide_empty' => false,
            'parent' => $parent_cat_ID,
        )
        );      
    if ( $terms ) {
            echo '<select id="' . $nameid . '" name="grado">';
            // Get categories as array
            echo '<option disabled selected value> -- Seleccione Grado -- </option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
            endforeach;
            echo '</select>';

    } else {
        ?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No child categories!</option></select><?php
    }
    die();
} // end if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.