来自AJAX请求的响应仅显示一次

时间:2013-06-28 13:59:22

标签: javascript jquery ajax

我有一些代码在提交表单时发送ajax请求。这是第一次提交表单(它是一个搜索模块),但只有一次。我添加了一个效果来在返回数据时突出显示该表,并且您只能看到它一次(数据也只改变一次)。

当我查看chrome dev工具中的响应时,我可以看到它包含新搜索查询的数据但是没有显示。为什么我只能显示一次结果?

JS:

$(function () {
// Creates an ajax request upon search form submit
 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-nn-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");
    });

    // Prevent default action
    return false;
 };

 $("form[data-nn-ajax='true']").submit(ajaxFormSubmit);
});

HTML:

<form method="GET" action="@Url.Action("Index", "Show")" data-nn-ajax="true" data-nn-target="#contentlist" class="form-search">
    <div class="input-append mysearch">
        <input type="search" class="span5 search-query" name="query" data-nn-autocomplete="@Url.Action("AutoComplete")" />
        <input type="submit" class="btn" value="Search" />
    </div>
</form>

<div id="contentlist">
    @Html.Partial("_Shows", Model)
</div>

2 个答案:

答案 0 :(得分:4)

我认为您应该使用html()代替replaceWith()方法:

$target.html($newHtml);

答案 1 :(得分:2)

只是一个想法...尝试

$target.html(data);

而不是

$target.replaceWith($newHtml);

通过replaceWith,您实际上可能会删除要填充内容的div。然后,第二次,它找不到要插入内容的div。