0

该脚本在名为 otf.js 的文件中运行。下面列出的表单在共享文件夹的 _layout.cshtml 中运行。该脚本将在主网站页面上毫无问题地执行，但不会重定向用户的任何其他页面。我确实使用了 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/ 并保存我要查找的内容。

4

1 回答 1

0

为了使这个 ajax 函数无缝工作，我需要有一个 div ，它导致身体围绕在 @RenderBody() 周围，如下所示：

    <div id="body">            
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            <div id="restaurantList"> 
            @RenderBody()
                </div>
        </section>
    </div>

过去我确实尝试过这个，但我的问题是 pagedlist 功能不起作用。这是因为下面列出的代码：

    $.ajax(options).done(function(data) {
        var target = $a.parents("div.pagedList").attr("data-otf-target");
        $(target).replaceWith(data);
    });
    return false;
};

本质上，代码是找到具有属性“data-otf-target”的 div 的父级并替换它。这个错误只会发生在其他页面上，因为其他页面没有调用局部视图来呈现餐厅列表。因此，我需要确保在使用自动完成 ajax 并且用户单击分页列表图标之一时重新创建名为“restaurantList”的 div。

我通过用这个替换那个ajax代码来做到这一点：

    $.ajax(options).done(function (data) {
        var target = $a.parents("div.pagedList").attr("data-otf-target");
        $(target).replaceWith("<div id='restaurantList'>" + data + "</div>");

    });

感谢您查看并感谢您提供的所有有用的编辑。

于 2013-05-26T07:44:09.597 回答