How does the InsertionMode.Replace works on the Ajax.BeginForm

ajax.beginform, asp.net-mvc-3, jquery

Solution

You're misunderstanding `InsertionMode.Replace`. It will replace everything inside the HTML element you specify with `UpdateTargetId`, not the element itself.

It's the same as

$("#searcharea").html(newHTMLcontent);

An insertion mode that destroyed the element it worked with wouldn't be very useful for the reason you mentioned: you'd only be able to use it once.

Problem

i have the following `Ajax.beginform` inside my asp.net mvc view, where the result of the ajax call will replace the `<div id= "searcharea">`, as follow:- ``` @using (Ajax.BeginForm("Search", "Patient", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "searcharea", LoadingElementId = "progress2" })) { <table > <tr> <th> Searching By First Name (English) :- </th> <th> <input type="text" name="firstname" /> </th></tr> <tr> <th> Searching By Family Name (English) :- </th> <th> <input type="text" name="familyname" /> </th></tr> <input type="submit" value="Search " /></th><th></th></tr> </table> } <div id = "progress2"> <img src= "@Url.Content("~/Content/images/Ajax-loader-bar.gif") "> </div> <p> <div id= "searcharea"> </div> ``` So at the begining i though that i will only be able to perform one search since the `<div id= "searcharea">` will be replaced with the result of the ajax call and it will not be avilalbe after that, and if i try to do anther ajax call there will be no more `<div id= "searcharea">` to replace the result with. But what actually happened is that I was able to do multiple searches without any problem ,, so does this means that the `InsertionMode.Replace` will not replace the DOM element and that it will only insert the result of the ajax call within this DOM,, because i can not understand how i can reference a DOM element multiple times even if it has been replaced by my first ajax call ???!! can anyone explain how this happen ? BR

Original source