jquery - How to clone/ create duplicate, set of fields in Apache wicket -
i have requirement there field set adding , displaying existing comments. design is, on top half, existing comments db displayed row wise, beneath separator line followed row active input fields( date picket field, text area comment , add button). clicking add button should add latest comment entry made in comment list above , clear input fields. have managed doing using jquery's clone method. however, not satisfied approach have not leveraged wickets power such here. new framework , honest still not comfortable rudimentary basics required take full benefit of framework. appreciate if can ideas ( better if can give me live example links, knowledge source etc) achieve task mentioned using wicket.
html :
<div class=row> <!-- comments grid widget - begin --> <div class=formfield> <fieldset style="padding-bottom: 5px; padding-top: 5px; padding-left: 4px; width: 985px"> <legend>comments</legend> <div id=frmgrid1 style="height: 130px"> <div id="commentgrid"> <div style="overflow: auto; height: 130px"> <table id="tblgridcomment" class="tabledata" width="955" border="0" > <thead> <tr bgcolor=#eaeaea> <td class=tabletitle style="width: 100px" nowrap>date</td> <td class=tabletitle nowrap>comment</td> <td class=tabletitle style="width: 100px" nowrap align=center>delete</td> </tr> </thead> <tbody> <tr bgcolor="#ffffff" wicket:id="comrow"> <td class="tabledata commenttd" valign=top> <a href="#" wicket:id="comdtlink"> <span wicket:id="comdt"> 12/12/12 </span> </a> </td> <td class="tabledata commenttd" valign="top"> <input wicket:id="exsistcomment" style="width: 750px" maxlength="2000" name="exsistcomment" /> </td> <td class="tabledata commenttd" valign=top> <input type="checkbox" wicket:id="commdelete" name="commdelete"/> </td> </tr> </tbody> </table> </div> <hr width=955> </div> <!-- comment grid end --> <div style="text-align: right; width: 955px"> <span class=row> <span class=formfield> <label wicket:id="pdeffdatelabel">effective date: </label><br> <input wicket:id="pdeffdate" id="pdeffdate" name="pdeffdate" /> <!-- <a wicket:id="linkpdeffdate" href="#"> <img style="vertical-align: text-bottom; margin-left: 2px" border=0 alt="select comment effective date" src="cal.gif" width=16 height=19 wicket:id="pdeffdateimg" id="pdeffdateimg"> </a> --> </span> <span class=formfield> <label wicket:id="pdcommentlabel">comment: </label><br> <textarea wicket:id="pdcomment" id="pdcomment" cols="94" name="pdcomment"> </textarea> </span> <span class=formfield><br> <input id="addcomment" title="add row" class="btnz" type="button" value=" add " name="btnaddrowcomment"> </span> </span> </div> </div> </fieldset> </div> </div> jquery :
$("#addcomment").click(function () { console.log("djkdk"); var sourcetr = $('[id^="commenttr"]').last(); var clonetr = $(sourcetr).clone(); clonetr.insertafter(sourcetr); var clonetrid = clonetr.attr("id"), res = "", newid = ""; if(clonetrid != "") { res = clonetrid.substring(9,clonetrid.length); newid = clonetrid.substring(0,9); } clonetr.attr('id',newid); clonetr.find('[id^="comdt"] span').text($('#pdeffdate').val()); $('#pdeffdate').val(""); clonetr.find('[id^="exsistcomment"]').val($('#pdcomment').val()); $('#pdcomment').val(""); clonetr.show(); }); as per whatever find on internet, seems can use webmarkupcontainer group rows , perhaps clone somehow. not sure if possible or not though.
thanks help. suvo
use listview generate repetitive elements
go through following http://wicket.apache.org/guide/guide/repeaters.html
Comments
Post a Comment