このスクリプトは、otf.js という名前のファイル内で実行されます。以下に示すフォームは、共有フォルダーの _layout.cshtml で実行されます。このスクリプトは、メインの Web サイト ページでは問題なく実行されますが、それ以外のページではユーザーはリダイレクトされません。fiddler2 を使用して ajax が情報を返しているかどうかを確認したところ、データは回復されましたが、リダイレクトされず、データがメイン ページに渡されませんでした。
$(function () {
var ajaxFormSubmit = function () {
var $form = $(this);
var options = {
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function(data) {
var $target = $($form.attr("data-otf-target"));
$target.replaceWith(data);
});
return false;
};
var submitAutocompleteform = function(event, ui) {
var $input = $(this);
$input.val(ui.item.label);
var $form = $input.parents("form:first");
$form.attr("action", "/home/index"); // doesn't work on other pages
$form.submit();
};
var createAutocomplete = function() {
var $input = $(this);
var options = {
source: $input.attr("data-otf-autocomplete"),
autoFocus: "true",
select: submitAutocompleteform
};
$input.autocomplete(options);
};
var getPage = function() {
var $a = $(this);
var options = {
url: $a.attr("href"),
data: $("form").serialize(),
type: "get"
};
$.ajax(options).done(function(data) {
var target = $a.parents("div.pagedList").attr("data-otf-target");
$(target).replaceWith(data);
});
return false;
};
$("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
$("input[data-otf-autocomplete]").each(createAutocomplete);
$(".main-content").on("click", ".pagedList a[href]", getPage);
});
私のウェブサイトの私のレイアウト ビューの私のフォーム:
<form action="@Url.Action("Index","Home")" method="get"
data-otf-ajax="true" data-otf-target="#restaurantList" >
<input type="search" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete","Home")"/>
<input type="submit" value="Search By Name" />
</form>
オートコンプリートはレストランのリストを取得しますが、/home/index/ にリダイレクトせず、探しているものを保存しません。