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
Post a Comment