jquery - ASP.NET MVC 3 Ajax forms: Running JavaScript after DOM is updated -


i have mvc3 web project includes simple search form. uses unobtrusive ajax bring html fragment containing results in table form, , replaces existing table. problem is, want use datatables jquery plug-in on table sorting, paging, etc. cannot figure out correct way call plug-in initialization code on table.

what have far (this.html.script extension method wrote auto-gen script tags):

search.cshtml:

@section scriptsection  {     @this.html.script("libs/jquery.unobtrusive-ajax.min.js")     @this.html.script("libs/jquery.validate.js")     @this.html.script("libs/jquery.validate.unobtrusive.js")     @this.html.script("libs/jquery.datatables.js")      <script type="text/javascript">         function inittable() {             $("table.datatable").datatable();         }     </script> }  @using ( this.ajax.beginform("dosearch", "case", new ajaxoptions {     httpmethod = "get",     insertionmode = insertionmode.replace,     updatetargetid = "results",     onsuccess = "inittable" }) ) {     <button type="submit" name="searchtype" value="date">search</button> }  <table id="results" class="datatable"> </table> 

the problem inittable() appears called before table want in dom. outcome results table inserted page unstyled , none of datatable features enabled.

am doing right, or there different way trigger jquery run once dom has been updated?

put code in:

 $(document).ready(function() {   // handler .ready() called. });  

and see if - dom should loaded then.


Comments