Jquery - 无法使用ajax检索下拉列表

时间:2015-02-05 23:37:21

标签: jquery ajax

我有这张桌子:

 <table id="fla_inf" width="100%">
<tbody>
<tr>
<th class="tab_header" colspan="6">Flavors and Additives</th>
</tr>
<tr>
<th class="tab_header_nam">Flavor Brand</th>
<th class="tab_header_nam">Flavor Name</th>
<th class="tab_header_nam">Dropper type</th>
<th class="tab_header_nam">Quantity Unit</th>
<th class="tab_header_nam">Quantity</th>
<th class="tab_header_nam">Add/Remove row</th>
</tr>
<tr class="flavors">
<td>[brand_list]</td>
<td><select id="arome0" class="arome"></td>
<td><select id="dropper0" class="dropper">
<option selected="selected" value="type1">type 1</option>
<option value="type2">type 2-3</option>
</select></td>
<td><select id="qtyunit0" class="qtyunit">
<option value="ml">ml</option>
<option value="drops">drops</option>
<option selected="selected" value="perc">%</option>
</select></td>
<td><input id="quantity0" class="quantity" type="number" /></td>
<td><input class="addline" src="http://spitilab.com/wp-content/uploads/2015/01/add.png" type="image" /><input class="remline" src="http://spitilab.com/wp-content/uploads/2015/01/delete.png" type="image" /></td>
</tr>
</tbody>
</table>

当在使用短代码[brand_list]生成的第一个值上选择值时,我需要更新ID为“arome0”的下拉列表。

我需要使用Ajax才能获得该品牌的子女并填写“arome0”下拉列表。

当我的第一个下拉列表的值发生变化时,我创建了这个jquery代码。

//On selected brand, update flavors list
$(document).on('change', "select[id^='marque']", function() {

        var $brandid =  $(this).val();
        var $brand_dd_id = $(this).attr('id');
        var $flav_dd_id = $brand_dd_id.substr($brand_dd_id.length-1);
        $("#arome"+$flav_dd_id).empty();

        //Make AJAX request, using the selected value as the GET
        $.ajax({
                type: 'GET',
                data: '{"parent_id":"' + $brandid + '"","id":"'+ $flav_dd_id +'",action":"brand_children"}',
                success: function(output) {
                    $("#arome"+$flav_dd_id).html(output);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status + " "+ thrownError);
        }});

});

在我的functions.php中我添加了这个:

add_action( 'wp_ajax_brand_children', 'GetBrandChildren');
add_action( 'wp_ajax_nopriv_brand_children', 'GetBrandChildren');

function GetBrandChildren($parent_id,$id) {
   $children = wp_dropdown_pages(array('id'=>'arome$id','post_type'=>'aromes-type','child_of'=>$parent_id,'echo'=>0));
   return $children;
}

但它不起作用,我发现返回的数据存在问题。 任何想法?

感谢

更新:

它现在正在运行,最后一个问题是下拉列表未使用父帖子ID正确过滤。也许我没有正确使用wp_dropdown_page。

更新的functions.php:

add_action( 'wp_ajax_brand_children', 'GetBrandChildren');
add_action( 'wp_ajax_nopriv_brand_children', 'GetBrandChildren');

function GetBrandChildren() {
   $parent_id = $_POST['parent_id'];
   $id = $_POST['id'];
   echo wp_dropdown_pages(array("id"=>"arome$id",'post_type'=>'aromes-type','child_of'=>$parent_id,'echo'=>0));
  //ob_clean();
  //echo "working";
  wp_die();
}

// need these two lines to be ale to locate the admin-ajax.php inside jquery
wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

更新的JQuery:

//On selected brand, update flavors list
$(document).on('change', "select[id^='marque']", function() {

        var $brandid =  $(this).val();
        var $brand_dd_id = $(this).attr('id');
        var $flav_dd_id = $brand_dd_id.substr($brand_dd_id.length-1);
        $("#arome"+$flav_dd_id).empty();

        //Make AJAX request, using the selected value as the GET
        //var ajax_url = admin_url('admin-ajax.php');
        $.ajax({
                url: MyAjax.ajaxurl,
                data: {
                        'parent_id': $brandid,
                        'id': $flav_dd_id,
                        'action': 'brand_children'
                      },
                success: function(output) {
                    console.log(output);
                    $("#arome"+$flav_dd_id).html(output);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status + " "+ thrownError);
        }});

});

最后一个问题是wp_dropdown_pages没有使用父ID进行过滤,也许我没有正确使用它。

1 个答案:

答案 0 :(得分:-1)

你似乎没有任何关于&#39; marque&#39;在id中,所以,你的ajax电话不会被激活。另外,这是做什么的? admin_url(&#39; admin-ajax.php&#39;);它没有在任何地方定义,所以它也不会起作用。