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

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -