警告: 私は Django と jQuery/Javascript の両方で非常に新しいです。これまでのところ、それは私を極寒の壁に追いやっています。ユーザーがドロップダウン メニューからクエリ パラメータを選択し、テキスト ボックスにクエリ テキストを入力できる検索ページを作成したいと考えています。また、より多くの検索バー/ドロップダウン メニューを動的に作成したいと考えています。また、特定のドロップダウン メニュー オプションの利用可能性に関するメモを表示できるようにしたいと考えています (たとえば、「年はすべてのレコードで利用できるわけではありません。年情報のないレコードは、追加のパラメーターなしでは表示されません。」)。
私が今抱えている大きな頭痛の種は、「もっと見る」ボタンが「送信」ボタンとして機能しているように見えることです。理由はわかりません。つまり、より多くの検索フォームを表示する代わりに、「詳細」ボタンをクリックすると、「送信」が行うはずのように、テキストボックス内の内容が URL に転送されます。それが私の JavaScript に問題があるのか、それとも Django がフォームを処理する方法に問題があるのか 、それとも何なのかわかりません。私が言ったように、私はこのようなことで耳の後ろが完全に濡れています。JSlint はすべて問題ないと言っていますが、私が見落としているのはばかげたことだと確信しています。誰か助けてください。
コード：
var i, i_str, sel_str, add_form, shownote, changeval, changebool, form_array,more_array, note_array, selected_str;
$(document).ready(function () {
i = 1;
i_str = i.toString();
sel_str = (i - 1).toString();
add_form = function () {
form_array = [
'<p><form id="form' + i_str + '" action="" method="get">',
'<select id="row" name="row">',
'<option value="dish_name">Name</option>',
'<option value="year">Year</option>',
'<option value="period">Five-Year Period</option>',
'<option value="location">Location</option>',
'<option value="ingredient">Main Ingredient</option>',
'<option value="course">Course or Dish Type</option>',
'</select>',
'<label for="query">Dish Name</label>',
'<input type="text" name="dish_name" id="query"></input>',
'<button id="more">More</button>',
'<input type="submit" value="Search"></input>'
];
more_array = [
'<select id="bool" name="bool">',
'<option value="none" selected="selected"> </option>',
'<option value="and">AND</option>',
'<option value="or">OR</option>',
'<option value="and_not">AND NOT</option>',
'<option value="or_not">OR NOT</option>',
'</select>'
];
note_array = [
'<p class="note"></p>',
'</form></p>'];
$("#search").append(form_array.join("\n"));
$("option:eq(" + sel_str + ")").attr("selected", "selected");
$("label").text = $(($("this select").val).text);
$("select#row").change(shownote());
$("button").click(function () {
$('input[type="submit"]').hide();
$(".search").append(more_array.join("\n"));
});
i++;
};
$(document).ready(add_form());
});
$(document).ready(function () {
shownote = function () {
switch ($(this).val) {
case "year":
$(".note").append("Note: Year information may not be available for all dishes. Dishes without years will not be returned without additional search criteria.<br />");
break;
case "period":
$(".note").append("Note: Please enter periods in YYYY-YYYY format. Period information may not be available for all dishes. Dishes without periods will not be returned without additional search criteria.<br />");
break;
case "location":
$(".note").append("Note: Location information may not be available for all dishes. Dishes without location information will not be returned without additional search criteria.<br />");
break;
}
};
});
$(document).ready(function () {
changeval = function () {
var changed_to = $("#row").val, get_new_label = function (changed_to) {switch (changed_to) {
case "dish_name":
return "Dish Name";
case "year":
return "Year";
case "period":
return "Five-Year Period";
case "location":
return "Location";
case "ingredient":
return "Main Ingredient";
case "course":
return "Course or Dish Type";
}
};
$('this label[for="query"]').innerHTML = get_new_label(changed_to);
$('this input[id="query"]').attr("name", changed_to);
};
});
$(document).ready(function () {
changebool = function () {
//something that changes the boolean values of the search string
};
});
$("#form" + i_str + " #row").change(changeval());
$("#form" + i_str + " #row").change(shownote());