java - Wicket datatable change font or css of cell after onchange -
in application have defaultdatatable, clickable column , search field filter table. filter filters content of datatable after character inserted input field. goal underline (or other css) parts of text in fields apply input of user.
example: characters 'a' , 'b' of string 'abc' should underlined if user enters 'ab'. javascript can add styling, function strange things datatable. deletes inside table tags en puts new html there. other information gone. doing wrong?
<script> $('.searchfield').keyup(function(){ var page = $('.datatable'); alert(page.text()); var pagetext = page.text().replace("<span>","").replace("</span>"); alert(pagetext); var searchedtext = $('#searchfield').val(); var theregex = new regexp("("+searchedtext+")", "igm"); var newhtml = pagetext.replace(theregex ,"<b>$1</b>"); alert(newhtml); page.html(newhtml); }); </script>
new table:
<table id="id" class="datatable" wicket:id="id"> col1 col2 123 <b>matchedchar</b> text <b>matchedchar</b> text </table>
old table (collapsed body en head):
<table id="id" class="datatable" wicketsource="url.java" wicket:id="id"> <thead wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:datatable.java:181" wicket:id="toptoolbars"> <tbody wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:datatable.java:207" wicket:id="body"> <tr class="even" wicketsource="org.apache.wicket.extensions.markup.html.repeater.data.table:defaultdatatable.java:71" wicket:id="rows"> </tbody> </table>
i think have handler on searchfield
perform table refresh. need subcribe on complete ajax event
.
wicket.event.subscribe('/ajax/call/complete', function(jqevent, attributes, jqxhr, errorthrown, textstatus) { // call code highlight text });
you can put subscription method in page(in script
tag). if want link js call specific behavior onchangeajaxbehavior
, need call target.appendjavascript
:
new onchangeajaxbehavior(){ @override protected void onupdate(ajaxrequesttarget target) { target.appendjavascript("<call highlight function here>"); } };
try this jquery highlight plugin. more ajax global call listeners here.
i've made simple demo can check it.
Comments
Post a Comment