Partial View Not Rendering With Asynch Request For Update

My objective is to make an asynchronous call in my jquery file(otf.js) that updates my restaurant list in my home page (index.cshtml) with a Search term entered in the form that

Solution 1:

The problem is that <div id="restaurantList"> is wrapping around the @Html.Partial("_Restaurants", Model) line in index.cshtml, and it needs to be wrapped around the @foreach code block in the partial view _Restaurants.cshtml

I made this change to my code, and presto, the restaurant list was updated every time i clicked the search button, not just the first time.

Now the only question is why does this cause the list not to update after the first time?

Solution 2:

Looks like you are removing form from DOM to be replaced by new form. In this case, you should delegate event.

So:

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

Become: { here i use document as delegate, but better is to use closest static container of the form }

$(document).on('submit',"form[data-otf-ajax='true']",ajaxFormSubmit);