Question

我创建了一个包含两个选择字段的表单。第一个字段填充了自定义分类的父项。第二个字段中填充了每个字段的子项。我使用AJAX来做到这一点，但似乎没有用。改变没有任何改变。

以下是我的PHP代码：

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
}

我的剧本：

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);
                    }
                }
            );
        });
    });

注册我的脚本的功能：

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

由于您正在使用WordPress，我怀疑您可能遇到jQuery冲突问题。要确认这一点，您可以尝试将$的所有实例更改为jQuery，看看是否出现相同的错误。

此外 - 如果您从.js文件运行此脚本，PHP将不会评估，但保持URL相对仍然可以正常工作。

我对您可以尝试的脚本进行了一些更改：

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 );
                }
            }
        );
    });
});

Answer 2

通过您提供的小提琴，只需添加console.log('$mainCat: ' + $mainCat);（请参阅this modified fiddle）即可确保change事件按预期触发。
除此之外，我们得到404 not found错误，这在小提琴示例的当前状态下非常正常。

所以可以肯定的是，您的问题来自Ajax称为脚本或其返回的数据。

你只是说“没有任何改变”，没有任何精确性。实际上，您现在应该使用Firebug或类似的方法查看错误消息，可能是：

网址生成错误：在这种情况下，您也应该收到404 not found错误
您正在调用的服务器脚本中的错误：在这种情况下，您应该收到500 server error错误
来自服务器的错误（格式错误）返回：在这种情况下，您应该收到JS错误

另请注意：

它不能是来自服务器的空返回，或者您的#sub_cat元素在JS错误发生之前已经丢失了它的disabled属性
相反（即使不太可能）它也可能是Ajax错误：所以要确保你应该在error:参数中添加always:或$.ajax()成员

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

2 个答案: