1

私は長い間この問題を抱えていました。しかし、私はこれを行う方法を理解することができません。テンプレート言語で JavaScript オブジェクトを使用する方法はありますか。たとえば、選択ウィジェットでレンダリングされるカテゴリのクエリセットがあります。

Category: <select name="category" id="id_category">
{% for category in categories %}
<option value="{{category.id}}">{{category.name}}</option>
{% endfor %}
</select>

ここで、選択したカテゴリについて、サーバーを非同期的に呼び出して、関連する製品タイプを返します。

$('#id_category').change(function(){
    getProductTypes($(this).val());

});

ajax 関数では、url テンプレート タグで category_id js オブジェクトを使用できません。このため、ターゲット URL をハードコードする必要があります。誰でもこれを処理する方法を提案できますか。ありがとう

function getProductTypes(category_id){
         //Would like to do this
           var url = {% url lookup_product_types category_id %}
         //But end up doing this
           var url = '/'+category_id+'/product_types/find/'
              $.ajax({
                url:url,
                data:{category:category_id},
                dataType:'json',
                success: function(data, status, xhr){
                    html = '<select>';
                    $.each(data, function(index, value){
                        html += '<option value='+this.pk+'>'+this.fields.name+'</option>';
                    });
                    html += '</select>';
                    $('#productType').html(html);
                }  
              });
4

1 に答える 1

1

オプションタグでデータ属性を使用するのはどうですか?

テンプレートを次のように更新します-

{% for category in categories %}
    <option data-url="{% url lookup_product_types category.id %}" value="{{category.id}}">{{category.name}}</option>
{% endfor %}

次に、次の行に沿って ajax を変更します -

$('#id_category').change(function(){
    var url = $(this).find('option:selected').attr('data-url');
    getProductTypes($(this).val(), url);
});

function getProductTypes(category_id, url){
    $.ajax({
        url: url,
        data:{ category:category_id},
        // ..
于 2012-12-12T07:34:27.873 に答える