Question

我一直在试图理解为什么$ .post不起作用。我试图让两次下降..

第一个将包含主要类别，第二个下拉列表包含第一个下拉列表的子类别。

[MAIN CATEGORY DROP DOWN] [SUB CATEGORY DROP DOWN]

第一次下拉工作完美无瑕，但子类别只是因为我不知道的某些原因而不能用ajax获取..

add_shortcode( 'custom_query', 'custom_query' );
add_action( 'wp_ajax_custom_query', 'getSubCategory' );
add_action( 'wp_ajax_nopriv_custom_query', 'getSubCategory' );
function custom_query( $cat_id )
{       
    // first dropdown
    $first_dropdown = array( 'show_option_all'    => '','show_option_none'   => 'Select main category','orderby' => 'ID','order' => 'ASC','show_count' => 0,    'hide_empty' => 0, 'exclude' => 0,'echo' => 1,'selected' => 0,'child_of' => $cat_id,'hierarchical' => 1,'name' => 'chained-categories','id' => '','class' => 'postform',    'depth' => 1, 'tab_index' => 0,'taxonomy' => 'category', 'hide_if_empty' => false ); 
    wp_dropdown_categories( $first_dropdown );

    // subcategories empty but will be populated once the first main category is selected
    echo '<div id="chained-subcontainer">
            <select name="chained-subcategories" id="chained-subcategories">
                <option value="">- Select a category first -</option>
            </select>
        </div>';

    // javascript
    echo '  
        <script type="text/javascript">

            (function($)
            {
                var ajaxurl = "../../wp-admin/admin-ajax.php";
                var subdata = { action: "custom_query" };

                $("#chained-categories").change(function()
                {
                    subdata[ "chained_subcat_id" ] = $( this ).val();
                    subdata[ "chained_subcat_name" ] = $("#chained-categories option[value="+ $( this ).val() + "]").text();

                    if( $( this ).val() > 0 )
                    {
                        #this here works once the first cat is picked
                        alert($("#chained-categories option:selected").val());

                        $.post
                        (
                            ajaxurl, 
                            subdata,   
                            function( response )
                            {
                                $( "#chained-subcontainer" ).html( response );
                            }
                        );
                    } else {
                        $( "#chained-subcontainer" ).html( "<select name="chained-subcategories" id="chained-subcategories"><option value="">- Select a category first -</option></select>" );

                    }   
                });
            })(jQuery);

        </script>
    ';
}

function getSubCategory()
{
    $second_dropdown = array('show_option_all' => '', 'show_option_none' => 'Select subcategory','orderby' => 'ID', 'order' => 'ASC', 'show_count'  => 0, 'hide_empty' => 0, 'exclude' => 0, 'echo' => 1, 'selected' => 0, 'child_of' => $_POST[ 'chained_subcat_id' ], 'hierarchical' => 1, 'name'    => 'chained-subcontainer', 'id' => '', 'class'   => 'postform','depth' => 1, 'tab_index' => 0, 'taxonomy' => 'category', 'hide_if_empty' => false ); 
    wp_dropdown_categories( $second_dropdown );
}

我知道一个事实是$ .post部分不起作用，因为我在第一个下拉列表中选择任何选项时都会包含一个警报，它会显示它的值。只要代码的$.post部分不包括在内，它就能正常工作..

编辑：所以在大卫的建议之后，我能够检查一些代码，而一切都按照预期工作......就ajax工作而言......我遇到了一个小问题。

在这行代码中，

else {
    $("#chained-subcontainer").html("<select name="chained-subcategories" id="chained-subcategories"><option value="">Select a category first</option></select>");
}

如果我打开它，代码就无法工作到ajax ..如果我删除那部分，那么ajax正确地获取数据..我似乎无法理解为什么......这就是什么我来自JSHINT＆＃34; Expected ')' and instead saw 'chained'.＆＃34;

Answer 1

如果我继续这样做，代码就无法工作到ajax

那是因为你有一个语法错误，所以没有一个JavaScript会起作用。

请注意Stack Overflow上的语法高亮显示：

$( "#chained-subcontainer" ).html( "<select name="chained-subcategories" id="chained-subcategories"><option value="">- Select a category first -</option></select>" );
                                                 ^--- here

在这种情况下，最简单的解决方案就是为字符串使用单引号。由于您的字符串不是包含单引号（但执行包含双引号）：

$( '#chained-subcontainer' ).html( '<select name="chained-subcategories" id="chained-subcategories"><option value="">- Select a category first -</option></select>' );

任何时候字符串都包含引号字符，您必须确保解析器不会将该字符解释为字符串的结尾。通过使用不同类型的引号或通过＆＃34;转义＆＃34;那些引用字符。

为什么AJAX $ .post在wordpress中工作？

1 个答案: