AJAX无法在选择字段中工作 - 更新

Question

I've made a form with two select fields. The first field is populated with the parents of a custom taxonomy. The second field is populated with the children of each one. I used AJAX to do that but does not seem to work. Nothing happens on change.

Below is my PHP code:

function products_selection()
{
    $args = array(
      'post_type'   => 'seller',
      'taxonomy'    => 'category',
      'hide_empty'  => 0,
      'exclude'     => 1,1078,1079
    );
    $products = get_categories( $args );

    if ( $products ) {
    echo '<select id="products-select">';
      echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>';

      foreach ($products as $product) {
        echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>';
      }
    echo '</select>';
  }
}

function nomoi()
{
  $args = array(
    'post_type' => 'seller',
    'taxonomy'  => 'nomos',
    'hide_empty'=> 0,
    'parent'    => 0
  );

  $categories = get_categories( $args );

  if ( $categories ) {
    echo '<select id="nomoi-select">';
      echo '<option selected="0" value="-1"><span>Νομοί</span></option>';

      foreach ( $categories as $category ) {
        $id = $category->term_id;
        $name = $category->name;
        $taxonomy = $category->taxonomy;
        echo '<option class="nomos" id="'. $id .'">'. $name .'</option>';
      }
    echo '</select>';
  }

  echo '<select id="town-select">';
    echo '<option selected="" disabled="" value="0"><span>Πόλεις</span></option>';
  echo '</select>';
}

function my_ajax() {
  if(isset($_POST['main_catid']))
    {
      $args = array(
        'order_by' => 'name',
        'hide_empty' => 0,
        'exclude' => 1,
        'taxonomy' => 'nomos',
        'name' => 'town-select',
        'hierarchical' => 1,
        'show_option_none' => 'Πόλεις',
        'selected' => -1,
        'child_of' => $_POST['main_catid'],
        'echo' => 1
      );
    $categories =  get_categories( $args );
    foreach ( $categories as $cat ) {
      $cat_name = $cat->name;
      $id = $cat->cat_ID;
      echo '<option class="town" id="'. $category->id .'">'. $category->name .'</option>';
    }
  die();
  } // end if
}

My script:

jQuery(document).ready(function() {
        // Avoid conflicts
        $ = jQuery;

        $('#nomoi-select').change(function() {

            $mainCat = $('#nomoi-select option:selected').attr('id');
            console.log('$mainCat: ' + $mainCat);

            // call ajax
            $("#town-select").empty();
            $.ajax
            (
                {
                    url:'index.php',
                    type:'POST',
                    // Use an object literal
                    data: {
                        "action" : "my_ajax()",
                        "main_catid" : $mainCat
                    },

                    success:function( results )
                    {
                        //  alert(results);
                         alert('Successfully called');
                        $("#town-select").append( results );
                    },

                    error:function( exception )
                    {
                        alert('Exception: ' + exception);
                    }
                }
            );
        });
    });

And the function to register my script:

function my_scripts() {
  wp_enqueue_script( 'header-form', get_template_directory_uri() . '/js/headerform.js', array(), '1.0.0', true );
    }

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Answer 1

Since you are working with WordPress, I suspect you could be having jQuery conflict issues. To confirm this, you can try changing all instances of $ to jQuery and see if you get the same errors.

Also - if you are running this script from a .js file, the PHP wont evaluate, but keeping the URL relative should still work fine.

I have made a few changes to the script which you can try:

jQuery(document).ready(function() {
    // Avoid conflicts
    $ = jQuery;

    $('#main_cat').change(function() {

        $mainCat = $('#main_cat option:selected').val();

        // call ajax
        $("#sub_cat").empty();
        $.ajax
        (
            {
                url:"/wp-admin/admin-ajax.php",
                type:'POST',
                // Use an object literal
                data: {
                  "action" : "my_ajax",
                  "main_catid" : $mainCat
                },

                success:function( results )
                {
                    //  alert(results);
                    $("#sub_cat").removeAttr("disabled").append( results );
                }
            }
        );
    });
});