私はDjangoとWeb開発全般にかなり慣れていないので、これらのアイデアの多くを概念化しようとしています。
私が理解するのに苦労しているのは、設定した選択/ドロップダウンボックスで選択した内容に基づいて、[送信]ボタンをクリックしたときにHTMLフォームのアクション属性を適切に処理する方法です。
たとえば、ユーザーがドロップダウンボックスで車を選択（または以下の例ではトリム）してから[移動]ボタンをクリックした場合、車のトリムに関する情報を含む新しいページにユーザーを送信します。これが私が持っているものです：
テンプレート
<!-- Bar of dropdowns for searching. -->
<div class="container-fluid">
<form action="" method="get" class="form-inline" id="dropdownText">
<div class="form-group" id="dropdownGroup">
<span style="display:inline-block" class="selectBox">
<select class="form-control" id="make">
<option value='empty'></option>
<!-- List each make's name. -->
{% for make in allMakes %}
<option value="{{ make.id }}">{{ make.name }}</option>
{% endfor %}
</select>
<label for="make" style="display:block">Make</label>
</span>
<span style="display:inline-block" class="selectBox">
<select class="form-control" id="model" disabled>
<!-- List each make's model's name. -->
</select>
<label for="model" style="display:block">Model</label>
</span>
<span style="display:inline-block" class="selectBox">
<select class="form-control" id="trim" disabled>
<!-- List all trims for each make/model. -->
</select>
<label for="trim" style="display:block">Trim</label>
</span>
</div>
</form>
<form action="" id="trimDetail">
<div class="text-center">
<button type="submit" class="btn btn-default" id="go">GO!</button>
</div>
</form>
</div>それはどのようなものか
http://puu.sh/phaHG/105ed07b28.png
車のトリムのDetailView
class DetailView(generic.DetailView):
model = Trim
template_name = 'search/detail.html'
ビューに対応するURL
url(r'^(?P<pk>\d+)/$', DetailView.as_view(model=Trim,
template_name='search/detail.html')),
トリムを選択して[移動]をクリックすると、ページが更新され、URLが次のように変更されます。
"/？trimId = 4"
、trimIdはユーザーが選択したものに基づいて変更されますが、IDの情報を表示するテンプレートには送信されません。
ボタンをクリックしてjQueryを使用してフォームアクションを変更するだけでこれを機能させることができますが、これが悪い習慣であるかどうかはわかりませんでした。適切なDjangoの方法を学びたいと思います。
それを行う私のjQueryの方法：
var $elTrim = $('select#trim'); // The trim select box.
var $trimForm = $('form#trimDetail'); // The form around the button.
function updateAction(){
if($elTrim.find('option:selected').val() != 'empty'){
$trimForm.attr('action', $elTrim.val());
}
}
$elTrim.change(updateAction);
これは良い方法ではありません。検索ページは常に同じ場所に送信する必要があります。そのページは、結果を直接表示するか、表示する関連ページにリダイレクトするかのいずれかを担当できます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加