I am trying to get an Ajax ActionLink to insert a small amount of content into a div within a view. No matter what I try, instead of inserting the content into the div with the rest of the HTML in the view in tact, it wipes out the entire existing view, and sends only the partial to the browser.
<div> Other Stuff</div>
@Ajax.ActionLink("Click here to see the latest review",
"LatestReview", new AjaxOptions
{
UpdateTargetId = "latestReview",
InsertionMode = InsertionMode.ReplaceWith,
HttpMethod = "GET",
LoadingElementId = "progress"
})
<div id="latestReview"></div>
<div>More Stuff</div>
So we start with this HTML:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview"></div>
<div>More Stuff</div>
And what I want after the link is clicked it this:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview">[Content Of The Latest Review]</div>
<div>More Stuff</div>
But instead, I get this:
<html><head></head><body>
<div class="review">
content of partial view
</div>
</body></html>
I have tried all the options within InsertMode: InsertAfter, InsertBefore, Replace, and ReplaceWith. I'm probably missing something simple. Just not sure what it is.
The problem turned out to be a miss-match between jquery files. I downloaded the latest versions of jquery, jquery-ui, and jquery.unobtrusive, and then it worked.