CODEWITHSUNDEEP
javascriptjqueryasp.netajaxasp.net-mvc
Samy Sammour
Samy Sammour

Reputation: 2465

Ajax call goes only one time ASP.Net MVC5

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.

Upvotes: 1

Views: 263

Answers (2)

Samy Sammour
Samy Sammour

Reputation: 2465

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.

Upvotes: 0

Taplar
Taplar

Reputation: 24965

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.

Upvotes: 2

Related Questions