Ajax call goes only one time ASP.Net MVC5

Question

I am writing an AJAX function in ASP.Net MVC5 and I am getting a problem that the form AJAX request goes only one time. It is a search page. After I choose the filter I press search I get the correct result. However if I changed the filter and click the search submit again, nothing will happen.

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-enbw-target"));
        target.replaceWith(data);
        debugger;
    });

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

<form method="get" id="documentForm" action="@Url.Action("Index", "DocumentSearch")" def data-enbw-ajax="true" data-enbw-target="#documentSearchResult">
    <button type="submit" id="submitbtn" name="submitbtn" tabindex="100" class="k-button">
        <img src="~/Content/search_small_icon.png" /> 
        @WebResources.DocumentSearchButton
    </button>
</form>
@Html.Partial("Results", @Model)

public ActionResult Index(DocumentSearchInput model)
{
    if (Request.IsAjaxRequest())
    {
        return PartialView("Results", result);
    }

    return View(result);
}

I do not get any error. and when I get a debugger; in javascript. the new data is correct. can you please help me.

Did you tried a `debugger` in the very first line of your event ? — DontVoteMeDown, Dec 06 '16 at 15:54
Is the `#documentSearchResult` element a parent of the `form`? If so you'll need to use a delegated event handler. — Rory McCrossan, Dec 06 '16 at 15:55
I would like to suggest that you also look into using the `Ajax.BeginForm()` helper method, instead of having to write your own handlers and stuff. Much easier to work with, where applicable IMHO. If it's any use, here's another SO answer on how to use it: http://stackoverflow.com/a/17096835/6240567 — Geoff James, Dec 06 '16 at 15:57
@DontVoteMeDown I did the debugger at the first line. but the same. — Samy Sammour, Dec 06 '16 at 16:11

Taplar · Answer 1 · 2016-12-06T16:03:59.057

2

You are replacing the form in your ajax success. As such, the new form will not have the submit binding on it. If you truely want to do this you will have to rebind to the new form, or possibly use a delegate instead.

$('parentSelector').on('event', 'childSelector', function(){});

parentSelector - A parent element of the child that pre-exists the child element and should typically not be removed/created during the page lifespan.

childSelector - A selector for the element that will be created/changed/removed at some point in the lifespan of the page.

edited Dec 06 '16 at 16:03

answered Dec 06 '16 at 15:55

Taplar

24,788
4
22
35

How to do that? – Samy Sammour Dec 06 '16 at 16:00
@SamySammour e.g. by using [event-delegation](https://learn.jquery.com/events/event-delegation/) – empiric Dec 06 '16 at 16:01
what I noticed from the call is that code made a new connection. and have the correct result. but the problem is with the writing – Samy Sammour Dec 06 '16 at 16:10
Sorry to ask but what you mean by *new form* ? – DontVoteMeDown Dec 06 '16 at 16:13
`target.replaceWith(data);` is replacing the existing form with new elements. I am assuming data is a new form. This could be inaccurate. In any case, the old form which had the binding on it is destroyed. – Taplar Dec 06 '16 at 16:15

score 0 · Accepted Answer · answered Dec 06 '16 at 16:15

I found the answer. the problem wasn't with the submit. the problem was with re-writing the data.

$.ajax(options).done(function (data) {
    $("#documentSearchResult").empty();
    $("#documentSearchResult").html(data);
});

simply, I empty the div then write inside.

Ajax call goes only one time ASP.Net MVC5

2 Answers2