Develop Reference

How can I bind an array of data to html table using Spring boot REST apllication and not by Spring MVC

I have a Spring Boot REST application, in which one of the REST API sends mail to the respective users.
I have designed a mailer template in Html and my rest API has data in an array which I am binding to an Html table using and tags.
How can I bind an array of data to Html table using Spring Boot REST application and not by Spring MVC
1. HTML code
<tr>
<td style="padding: 20px 18px 0; color: #888686; font-size: 15px; font-family: 'Open Sans';">
<table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
DATE</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
AVAILABILITY</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK END TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK END TIME</th>
</tr>
<c:forEach var="oldList" items="${scheduleDetailsOld}">
<tr>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.day}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.availability}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workEndTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakEndTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
2.email sender method
public void shiftUpdatedMailForEditor(Staff staff) {
new Thread(() -> {
try {
Map<String, String> values = new HashMap<>();
values.put("getName", staff.getName());
values.put("getSubject", "Work schedule details have been modified.");
mailerService.sendStaffShiftUpdatedForEditorEmail(values, staff.getEmail());
} catch (PaperTrueException e) {
e.printStackTrace();
}
}).start();
}
3. get HTML temlate service
protected void sendStaffShiftUpdatedForEditorEmail(Map<String, String> valuesMap, String receiverEmail)
throws PaperTrueJavaException {
// concerned Editor (receiverEmail)
System.out.println("Inside sendStaffShiftUpdatedForEditorEmail");
mailer.sendMail("xyz#gmail.com", "xyz#gmail.com", valuesMap.get("getSubject"),
formatHtml(getHTMLBody(HtmlTemplateURL), valuesMap));
}
4. here is my controller
#PostMapping("/update-schedule-details")
public ResponseEntity<StatusResponse> updateScheduleDetails(#Valid #RequestBody addScheduleDetailsBody body,
Model model) {
StatusResponse statusResponse = new StatusResponse();
try {
util.isStaffLoggedIn(request, response, List.of(StaffRole.EDITOR, StaffRole.HR_MANAGER));
Iterator<AddScheduleDetails> iterator = body.getScheduleDetails().iterator();
ArrayList<ScheduleDetails> scheduleDetailsNew = new ArrayList<ScheduleDetails>();
ArrayList<ScheduleDetails> scheduleDetailsEarlier = new ArrayList<ScheduleDetails>();
while (iterator.hasNext()) {
AddScheduleDetails addScheduleDetails = (AddScheduleDetails) iterator.next();
if (scheduleDetailsService.getShift(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId())) {
addScheduleDetails(addScheduleDetails);
} else {
scheduleDetailsEarlier = updateScheduleDetails(addScheduleDetails, scheduleDetailsEarlier);
}
ScheduleDetails scheduleDetails = scheduleDetailsService.get(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId());
scheduleDetailsNew.add(scheduleDetails);
}
model.addAttribute("scheduleDetailsOld", scheduleDetailsEarlier);
model.addAttribute("scheduleDetailsNew", scheduleDetailsNew);
emailSender.shiftUpdatedMailForEditor(util.getLoggedInStaff(request));
statusResponse.setStatus(new Status("Editor Schedule Details Updated Successfully"));
} catch (PaperTrueException e) {
util.logException(e, LogType.GET_JOBS);
statusResponse.setStatus(new Status(e.getCode(), e.getMessage()));
}
return ResponseEntity.ok(statusResponse);
}

If you use some standard library like Datatables, it will be much easier. See this,
https://datatables.net/reference/option/ajax.data
This way, you can just send json data from your REST API in response

Entering values in a table through java selenium

Got a table with below html structure
<table style="width: 100%;" data-bind="foreach: CargoViewModel.PackageArray()">
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="1_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="1_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="2_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="2_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
</table>
How can I send values (through sendkeys) into textboxes and checkboxes associated with each row. How to traverse through each row with in this table.
The rows can also be dynamically added but how can I send values to textboxes and select checkboxes with in this table structure
Trying to achieve this through Selenium Java

This piece of code after hits and misses with the xpath(s) is working well.
List<WebElement> tbodyElements = driver.findElements(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody"));
System.out.println(tbodyElements.size());
for(int i=1; i<= tbodyElements.size(); i++)
{
String value=null;
if(i%2 == 0)
{
value="Bag";
}
else if(i%2==1)
{
value="Pallet";
}
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[1]/td[1]/input")).sendKeys("10");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[2]/table/tbody/tr[2]/td/input")).sendKeys("100");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[3]/table/tbody/tr[2]/td/input")).sendKeys("200");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[2]/td[3]/input")).click();
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[4]/textarea")).sendKeys("SM");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[5]/textarea")).sendKeys("Description");
driver.findElement(By.id(i+"_txtPkgName")).sendKeys(value);
Thread.sleep(2000);;
driver.findElement(By.xpath("(//li[#class='active']//a)["+i+"]")).click();
}

i have a code of jw player wont show cc on mobile browsers?

i have this code for jw player it show the cc on desktop browsers but when i open it on my phone it wont show cc button can any one help me
<div id="player" class="jwplayer jw-reset jw-state-playing jw-skin-seven jw-stretch-uniform jw-flag-aspect-mode jw-breakpoint-4 jw-flag-user-inactive" tabindex="0" style="width: 100%; height: 270px;">
<div class="jw-aspect jw-reset" style="padding-top: 56.25%;"></div>
<div class="jw-media jw-reset"><video class="jw-video jw-reset" src="blob:http://ravitel.com/b8757611-97e2-4dc0-b9af-a76050d03843" __idm_id__="629968897" jw-loaded="data" style="object-fit: fill;"></video></div>
<div class="jw-preview jw-reset"></div><div class="jw-captions jw-captions-enabled jw-reset" style="height: 363px; font-size: 18.5px;"><div class="jw-captions-window jw-reset"><span class="jw-captions-text jw-reset" style="font-family: Arial, sans-serif; background-color: rgb(0, 0, 0);"></span></div></div><div class="jw-title jw-reset" style="display: none; padding-left: 0px; padding-right: 0px;">
<div class="jw-title-primary jw-reset"></div>
<div class="jw-title-secondary jw-reset"></div>
</div>
<div class="jw-overlays jw-reset"><div id="player_jwpsrv" class="jw-plugin jw-reset"></div><div id="player_related" class="jw-plugin jw-reset jw-plugin-related"></div></div>
<div class="jw-controls jw-reset"><div class="jw-display-icon-container jw-background-color jw-reset">
<div class="jw-icon jw-icon-display jw-button-color jw-reset" role="button" tabindex="0" aria-label="Pause"></div>
</div><div class="jw-controls-right jw-reset"><div class="jw-dock jw-reset">
</div></div><div class="jw-nextup-container jw-reset"><div class="jw-nextup jw-reset">
<div class="jw-nextup-tooltip jw-reset">
<div class="jw-nextup-header jw-reset">
</div>
<div class="jw-nextup-body jw-background-color jw-reset">
<div class="jw-nextup-thumbnail jw-reset"></div>
<div class="jw-nextup-title jw-reset"></div>
</div>
</div>
<button class="jw-nextup-close"></button>
</div><span class="jw-text jw-reset jw-text-alt" role="status"></span></div><div class="jw-group jw-controlbar-right-group jw-reset"><span class="jw-text jw-reset jw-text-duration" role="timer">۰۵:۰۹</span><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-next" role="button" tabindex="0" aria-label="Next" style="display: none;"></div><div class="jw-icon jw-icon-tooltip jw-icon-hd jw-button-color jw-reset jw-hidden" tabindex="0" role="button" aria-label="Quality" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-tooltip jw-icon-cc jw-reset jw-toggle jw-off" tabindex="0" role="button" aria-label="Closed captions" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-tooltip jw-icon-audio-tracks jw-button-color jw-reset jw-hidden" tabindex="0" role="button" aria-label="Audio tracks" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-volume" role="button" tabindex="0" aria-label="Volume" style=""></div><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-cast jw-off" role="button" tabindex="0" aria-label="Chromecast" style="display: none;"></div><div class="jw-slider-volume jw-background-color jw-reset jw-slider-horizontal jw-reset" aria-hidden="true">
<div class="jw-slider-container jw-reset">
<div class="jw-rail jw-reset"></div>
<div class="jw-buffer jw-reset"></div>
<div class="jw-progress jw-reset" style="width: 90%;"></div>
<div class="jw-knob jw-reset" style="left: 90%;"></div>
</div>
</div><div class="jw-icon jw-icon-tooltip jw-icon-volume jw-button-color jw-reset" tabindex="0" role="button" aria-label="Volume" aria-hidden="false"><div class="jw-overlay jw-reset"><div class="jw-slider-volume jw-volume-tip jw-background-color jw-reset jw-slider-vertical jw-reset" aria-hidden="true">

PDF not getting generated when using iText API with CSS

I am trying to generate pdf from HTML having CSS.
Below is the code snippet
Document document = new Document();
PdfWriter pdfWriter = PdfWriter.getInstance(document, new FileOutputStream(outFileName));
document.open();
String htmlTxt = FileUtils.readFileToString(new File(dirPath + inpFileName), "UTF-8");
ByteArrayInputStream fis = new ByteArrayInputStream(htmlTxt.getBytes("UTF-8"));
XMLWorkerHelper worker = XMLWorkerHelper.getInstance();
// worker.parseXHtml(pdfWriter, document, fis);
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName),
new FileInputStream(CSS));
// close the document
document.close();
// close the writer
pdfWriter.close();
I tried generating pdf using
worker.parseXHtml(pdfWriter, document, fis);
PDF gets generated without
which worked fine then used
worker.parseXHtml(pdfWriter, document, new FileInputStream(dirPath + inpFileName), new FileInputStream(CSS));
In this case pdf gets generated but without any content .
I also tried how to use CSS resolver as suggested in iText Parse HTML with CSS Example
IMPORTANT Note -- The HTML has been generated from jTidy API.
Here is the HTML and CSS file
#pdfPreview { font-family: arial }
#pdfPreview .page_1 {position:relative; overflow: hidden;padding: 0px;border: none;width: 90%;margin:0 auto;}
#pdfPreview .page_1 .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 100%;overflow: hidden;}
#pdfPreview .page_1 .id_2 {border:none;margin: 107px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview .page_1 #dimg1 {position:absolute;top:181px;left:0px;z-index:-1;width:736px;height:677px;}
#pdfPreview .page_1 #dimg1 #img1 {width:736px;height:677px;}
#pdfPreview .page_1 #inl_img1 {position:relative;width:7px;height:17px;}
#pdfPreview #page_2 {position:relative; overflow: hidden;margin: 41px 0px 37px 40px;padding: 0px;border: none;width: 776px;}
#pdfPreview #page_2 #pdfPreview .id_1 {border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 776px;overflow: hidden;}
#pdfPreview #page_2 .id_2 {border:none;margin: 28px 0px 0px 8px;padding: 0px;border:none;width: 720px;overflow: hidden;}
#pdfPreview #page_2 #dimg1 {position:absolute;top:7px;left:0px;z-index:-1;width:741px;height:935px;}
#pdfPreview #page_2 #dimg1 #img1 {width:741px;height:935px;}
#pdfPreview .vehicleDescriptionTable{
border: black 1px solid;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(1){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(2){
width: 57%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(3){
width: 3%;
padding-left: 1%;
}
#pdfPreview .vehicleDescriptionTable table tr td:nth-child(4){
width: 37%;
}
#pdfPreview td{
vertical-align: top;
}
#pdfPreview tr{
/* line-height: 0em; */
}
#pdfPreview html {
font: 13px 'Arial';
}
#pdfPreview p.sectionHead {
text-align: center;
font: 16px 'Arial' bold;
background-color: #ccc;
height: 2em;
padding-top: .5em;
margin-bottom: 0;
border-top: black 1px solid;
border-left: black 1px solid;
border-right: black 1px solid;
/* width: 774px; */
}
#pdfPreview p.subSectionHead {
font-size: 14px;
font-weight: bold;
background-color: #eee;
margin-top: 0;
height: 1.5em;
padding-left: 2%;
padding-top: .2em;
margin-bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
/* border-bottom: none; */
/* border-right: black 1px solid; */
/* width: 100%; */
}
#pdfPreview table {
/* border: 1px solid black; */
border-bottom: 4em;
width: 100%;
}
#pdfPreview td:nth-child(3) {
border-left: black 1px solid;
}
#pdfPreview tbody {
border-bottom: black 1px solid;
/* padding-bottom: 1em; */
}
#pdfPreview p {
margin-top: 0;
margin-bottom: .2em;
}
#pdfPreview .floatright{
float: right;
text-align: right;
}
#pdfPreview .floatleft{
float:left;
text-align: left;
}
#pdfPreview .topmargin{
margin-top:.4em;
}
/*Melissa Page2*/
#pdfPreview #page2, #vehicleListTable, #table3 {
width: 90%;
margin: 0 auto;
border-spacing: 0px;
}
#pdfPreview #page2 thead {
background-color: #eee;
}
#pdfPreview #page2 thead th:first-child {
padding-bottom: 2rem;
text-align: left;
}
#page2 thead th:nth-child(2) {
padding-bottom: 2rem;
text-align: right;
}
#pdfPreview #page2 tbody .simple td {
font-weight: bold;
}
#pdfPreview #page2 tbody .simple td p {
font-weight: normal;
}
#pdfPreview #page2 tbody .header {
width: 15%;
padding: .3rem;
background-color: #eee;
font-weight: bold;
}
#pdfPreview #page2 tbody .subheader {
width: 10%;
padding: .3rem;
}
#pdfPreview #page2 tbody .subtableheader {
text-align: center;
}
#pdfPreview #page2 tbody .fillout {
padding: .3rem;
text-align: center;
color: #E6E6E6;
}
#pdfPreview #page2 tbody .filledout {
padding: .3rem;
text-align: center;
color: black;
}
#page2 tbody .bottomrow {
padding-bottom: 6rem;
text-align: left;
}
#pdfPreview .border-top {
border: 1px solid black;
}
#pdfPreview .border-top-left{
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-left {
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .border-middle-fix{
border-bottom: 1px solid black;
}
#pdfPreview .border-middle {
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-left {
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .bottom-right {
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#pdfPreview .footer1{
margin-bottom:4em;
}
#pdfPreview td.topmargin{
width:50%;
}
#pdfPreview .footerClass{
width:90%;
margin:0 auto;
padding-bottom:4em;
}
#pdfPreview .mainBodyHeadArea{
border-left:1px solid black;
border-right:1px solid black;
border-top:1px solid black;
}
#pdfPreview .submissionCellLeft{
width:50%;
padding:1em;
}
#pdfPreview .submissionCellRight{
width: 50%;
padding:1em;
border-left: 1px solid black;
}
#pdfPreview td.addressCity {
width: 40%;
}
#pdfPreview td.addressZip {
width: 20%;
}
#pdfPreview td.addressState {
width: 20%;
}
#pdfPreview td.addressCountry {
width: 20%;
border-left:none;
}
#pdfPreview table{
border-spacing: 0;
}
#pdfPreview .addressRow{
padding: 0;
}
#pdfPreview #vehicleListTable th, #pdfPreview #vehicleListTable td {
padding:.5em;
font-weight: bold;
}
#pdfPreview .filloutHeight{
height:1em;
}
#pdfPreview .borderLeft{
border-left:1px solid black;
}
#pdfPreview .fillAddressCity,.fillAddressState,.fillAddressCountry,.fillAddressZip{
margin-left: 3em;
}
#pdfPreview .center{
text-align: center;
}
#pdfPreview #vehicleListTable, #pdfPreview #table3 {
width:90%;
margin:0 auto;
}
#pdfPreview td {
padding:.5em;
}
#pdfPreview {
width: 800px;
}
#pdfPreview p, td{
font-size:12px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml-stylesheet href="foo.css" media="all" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Java (vers. 2009-12-01), see jtidy.sourceforge.net" />
<meta charset="UTF-8" />
<title>PDF HTML Title</title>
<link rel="Stylesheet" type="text/css" href="previewStylesPDF.css" />
</head>
<body>
<div id="pdfPreview">
<table id="page2">
<thead>
<tr>
<th colspan="2" class="border-top-left">Table Title</th>
<th colspan="6" class="border-top">Author Name</th>
</tr>
</thead>
<tbody>
<tr class="simple">
<td colspan="8" class="border-middle-left">Single or Multiple
Vehicle Registration for a Single Customer</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p>Instructions for members only: Scan and upload this
completed and <b><ins style="font-weight: bold">signed</ins> form
to the mail-id myName#Company.com</b></p>
</td>
</tr>
<tr>
<td class="header border-middle-left">Dealer</td>
<td class="subheader border-middle-fix">Dealer Name</td>
<td colspan="4" class="border-middle fillDealerName filledout">
Mercedez</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="border-middle fillDealerPhone filledout">
(###)###-####</td>
</tr>
<tr>
<td class="subheader border-middle-left">Name Dealer Code</td>
<td class="border-middle-fix fillDealerCode filledout">BorderLand</td>
<td class="subheader border-middle">Dealer Contact Name</td>
<td colspan="3" class="border-middle fillDealerContact filledout">
</td>
<td class="subheader border-middle">Email</td>
<td class="border-middle fillDealerEmail filledout"></td>
</tr>
</tbody>
</table>
<table id="vehicleListTable">
<thead>
<tr>
<th class="header border-middle-left">Serial Number</th>
<th colspan="4" class="subtableheader border-middle-fix">COL TITLE #1</th>
<th colspan="2" class="subtableheader border-middle borderLeft">COL TITLE #2</th>
<th colspan="2" class="subtableheader border-middle">COL TITLE #3</th>
</tr>
</thead>
<tbody>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
<tr class="filloutHeight">
<td class="fillout border-middle-left filloutHeight"></td>
<td class="fillout border-middle-fix filloutHeight" colspan="4">
</td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
<td class="fillout border-middle filloutHeight" colspan="2"></td>
</tr>
</tbody>
</table>
<table id="table3">
<tbody>
<tr>
<td class="header border-middle-left">Customer</td>
<td class="subheader border-middle-fix">Name</td>
<td colspan="3" class="border-middle fillCustomerName filledout">
Atlantis City</td>
<td class="subheader border-middle">Phone</td>
<td colspan="2" class="fillout border-middle">Phone</td>
</tr>
<tr>
<td class="subheader border-middle-left" colspan="2">Authorized
Representative Name</td>
<td class="fillout border-middle" colspan="6">Name</td>
</tr>
<tr>
<td class="subheader border-middle-left">Email</td>
<td class="fillout border-middle" colspan="7">Email</td>
</tr>
<tr>
<td class="subheader border-middle-left">Address</td>
<td class="border-middle filladdress1 filledout" colspan="7">Street Address</td>
</tr>
<tr>
<td colspan="8" class="addressRow">
<table>
<tbody>
<tr>
<td class="subheader border-middle-left addressCity">City <span
class="fillAddressCity filledout">ATLANTIS</span></td>
<td class="subheader border-middle addressState">State/Province
<span class="fillAddressState filledout">EE</span></td>
<td class="subheader border-middle addressCountry">Country</td>
<td class="subheader border-middle addressZip">Zip/Postal Code
<span class="fillAddressZip filledout">99999</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="subheader border-middle-left">The above
vehicles will be used for the following vocation / applications
only:</td>
<td class="fillout border-middle" colspan="4">Vocation</td>
</tr>
<tr class="simple">
<td colspan="8" class="border-middle-left">
<p><b>Customer Certification:</b> All information to go here.</p>
</td>
</tr>
<tr>
<td colspan="4" class="subheader bottomrow bottom-left">Customer
Authorized customer representative signature (REQUIRED)</td>
<td colspan="4" class="subheader bottomrow bottom-right">Date</td>
</tr>
</tbody>
</table>
<div class="footerClass">
<div class="floatleft topmargin">
<p class="">PDF (Rev: 4/2/2014)</p>
</div>
<div class="floatright topmargin">
<p class="">Page 2 of 2</p>
</div>
</div>
</div>
</body>
</html>

How handle confirmation dialog using java selenium

I try to find out how can I click on button "deactivate" . This is html code:
<div class="ui-widget-overlay" style="width: 1328px; height: 1063px; z-index: 1001;"></div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: block; z-index: 1002; outline: 0px none; height: auto; width: 640px; top: 737.4px; left: 173px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;">
<span id="ui-dialog-title-1" class="ui-dialog-title" unselectable="on" style="-moz-user-select: none;"></span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button" unselectable="on" style="-moz-user-select: none;">
<span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;"></span>
</a>
</div>
<div class="confirmDialog ui-dialog-content ui-widget-content" style="width: auto; min-height: 134.133px; height: auto;">
<span class="closeButton"></span>
<h3></h3>
<p></p>
<p></p>
<div class="buttonRow">
<button class="negative cancel" type="button"></button>
<button class="deactivate" type="button"></button>
</div>
</div>
</div>
I tried to click on this button in this way:
#FindBy(className = "deactivate")
private WebElement deactivateButton;
WebDriverWait wait =new WebDriverWait(driver,15);
wait.until(ExpectedConditions.elementToBeClickable(deactivateButton));
deactivateButton.click();
But this doesn't help

Instead of elementToBeClickable please try with visibilityOf like below. It's much cleaner.:
WebDriverWait wait =new WebDriverWait(driver,20);
wait.until(ExpectedConditions.visibilityOf(deactivateButton));
deactivateButton.click();