MVC, Ajax beginform in partial view only works once

Question

I am having an odd issue with a partial view that has an ajax form in it. It works once but after that it, the controller at least believes it works fine but the partial view content does not update even though the data at least in the controller has actually has an updated model.

I have no clue what do to.

Can it have something to do with the div I an replacing the data with is outside the partial view?

Should I just not use the ajax form and just use jquery to do an ajax request to the controller?

So I have this form in my View (doesn't matter if it is in my view or the partial view) and a div that holds the html from the partial

 @using (Ajax.BeginForm("ChangePage", "Staging", null, new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.ReplaceWith, UpdateTargetId = "divResults", OnBegin = "showLoading", OnComplete = "hideLoading" }, new { id = "frmPage" }))
    {
        <input type="hidden" id="pageDir" name="pageDir" />
        <input type="hidden" id="codeFilter" name="codeFilter" />
        <input type="hidden" id="glauFilter" name="glauFilter" />
        <input type="hidden" id="gacctnoFilter" name="gacctnoFilter" />
        <input type="hidden" id="glcoFilter" name="glcoFilter" />
        <input type="hidden" id="employeeFilter" name="employeeFilter" />
        <input type="hidden" id="maxPages" name="maxPages" />
        <input type="hidden" id="page" name="page" />
    }
<div id="divResults" name="divResults">
    @Html.Partial("~/Views/Staging/_stagingResults.cshtml", Model)
</div>

I have JS that does the form submit in the partial view. All of this works just fine. I can click the button, controller gets hid, generates my new model, the partial view generates HTML and it gets displayed in divResults BUT ONLY on the first time.

Any other page change made does everything above but it won't put the new HTML in divResults. In chrome's dev console I can see the new request come out and come back with the correct HTML but it is never replaced.

Answer 1

You can add a javascript function on success() method in AJAX begins form properties, which will fire after your ajax request completely loaded

  @using (Ajax.BeginForm("AjaxOptionPostData", "Home", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess" }))   

Here OnSuccess will be your javascript method

    function OnSuccess()
     {
       //You can do your stuff here
     }