2011-12-20 25 views
2

私はプロジェクトをphpからDjangoに変換しており、フィルタリングされたメニューの問題にぶつかりました。私は、フォームを持っている:今、私はisland_groupの選択に応じてisland_nameの出力をフィルタリングするdjango動的フィルタフォーム

<form action="{% url cdrs_search %}" method="post">{% csrf_token %} 
{% for field in form %} 
<div class="fieldWrapper"> 
    {{ field.errors }} 
    {{ field.label_tag }}: {{ field }} 
</div> 
{% endfor %} 
</form> 

class SearchForm(forms.Form): 
    genus = forms.CharField(max_length=100) 
    # species 
    species = forms.CharField(max_length=100) 
    # island group 
    island_group = forms.ModelChoiceField(queryset=Localitymayor.objects.values_list('islandgroup', flat=True).distinct('islandgroup').exclude(islandgroup="n/a").order_by('islandgroup'), empty_label=_("Not Specified")) 
    # island name 
    island_name = forms.ModelChoiceField(queryset=Localitymayor.objects.values_list('islandname', flat=True).distinct('islandname').exclude(islandname="n/a").order_by('islandname'), empty_label=_("Not Specified")) 

私のテンプレートの線に沿っています。私のPHPプロジェクトでは、別のPHPスクリプトを呼び出してajax onChangeを使ってこれを管理しました。しかし、私はDjangoでこれを行う方法が少し失われています。 Djangoで初めてAjaxを使って作業するので、この単純で共通のフィルタリングされたメニューの問題に対処するベストプラクティスの方法については、何かアドバイスをいただければ幸いです。前もって感謝します。

+0

なぜDjangoでそれが違うのですか?サーバー側のビューを呼び出すAjax onChange関数が必要です。 –

答えて

0

ここでは、betspire.comのチケットフォームのコードを変更しています。このコードスニペットは、jQueryがロードされているかどうかによって異なります。

function update_select(select, data) { 
     select.find('option').remove(); 
     select.append($('<option value="">-------</option>')); 
     for (var i in data) { 
      select.append($('<option value="'+data[i][0]+'">'+data[i][1]+'</option>')); 
     } 
    } 

    $('select[name=island_group]').live('change', function(e) { 
     $.get(
      '{% url island_name_choices_for_island_group %}', 
      { 
       'island_group': $(this).val(), 
      }, 
      function(data, textStatus, jqXHR) { 
       update_select($('select[name=island_name]'), data); 
      }, 
      'json' 
     ); 
    }); 

は、URLに追加します:

url(
    r'island_name/choices/$', 
    'island_name_choices_for_island_group', { 
    }, 'island_name_choices_for_island_group', 
), 

は、ビューに追加:

from django.utils import simplejson 

from models import * 

def island_name_choices_for_island_group(request, qs=None): 
    if qs is None: 
     # Change the default QS to your needs 
     # (you didn't specify it) 
     qs = Island.objects.all() 

    if request.GET.get('island_group'): 
     # assuming your Island model has an FK named island_group to model IslandGroup 
     qs = qs.filter(island_group__pk=request.GET.get('island_group')) 

    results = [] 
    for choice in qs: 
     results.append((choice.pk, choice.name)) 

    return http.HttpResponse(simplejson.dumps(results)) 

あなたはどのtroubbleで実行する場合は私に知らせてください。ここ

はあなたが必要とするjavascriptのです。

+0

こんにちは、いくつかの変更であなたのコードを試しましたが、私はまだメニューを更新するajaxを得ることができません。具体的には、自分のhtmlについてはわかりません。あなたが見ているコードを送ってもらえますか? –

+0

最初に、ajaxビューにPythonエラーがありますか(URLを開くかFirebugを使用してajaxビューを確認してください)? 2番目:javascriptエラー(firebugを使用)がありますか? 3番目: "console.log"文を追加するか、またはfirebugを使ってjavascriptをデバッグし、期待されるコードが期待されるパラメータで実行されていることを確認してください:) – jpic

+0

私は 'qs = None'だがまだ不明ですが。それがなぜ必要なのか説明できますか? –

1

グループに基づいた名前のリストを尋ねるために、あなたのajaxスクリプトがヒットするビューが必要です。

# views.py 
def ajax_endpoint(request): 
    # leaving error checking to you 
    group = request.GET.get('group') 
    names_list = avalable_names(group) # some function or db call 
    return HttpResponse(json.dumps(names_list)) 
1

1つの選択肢は、JavaScriptでこれを行うことです。 jQueryからのajaxリクエストを使用して別のビューを呼び出すことができます。この別個のビューの仕事は、ユーザーが選択したisland_groupに基づいてモデルデータ(島)名のサーバー側ソートを処理することです。次に、javascriptを使用して、ビューからの応答を使用してフォームを再作成することができます。これを行う方法に関するいくつかの良い例は、in this blog(少し緻密ですが、非常に便利です)、in an article on how to do this with javascript、およびin this tutorial(強くお勧めします)があります。

このようにする必要がある理由を説明する良いSO投稿もありますが、それは含めるのが少し難解かもしれませんが、フィルタされたフォームを作成している間に私のことを明確にするのに役立ちました。その質問については accepted answerをご覧ください。

+0

貴重な情報をありがとう。私はそれが私のために働くことができるかどうかわかります。 –

関連する問題