Can't seem to figure out why the InnerHTML statements are not working - innerhtml

I have been using a javascript editor and it works fine in it's built-in browser but when I try it in IE and Firefox it loads but then doesn't function.
The HTML is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<noscript>
<p>This page requires JavaScript. Please turn on JavaScript if your browser supports it and reload the page.</p>
</noscript>
<script type = "text/javascript" src="jscripts/pvar.js">
</script>
<title></title>
</head>
<body>
<form name="form1">
Version 2012.10.1.1a
<h2>
Panasas Sizing Form
</h2>
<br>
<table colspan='3' border='0'>
<tr>
<td align="left"> <input type="text" name="textq1" id="dtextq1" readonly="readonly" value="How will this be sized?" style="border: 0"/>
<select name="question1" id="dquestion1" value="" onfocus="this.style.background='khaki'" onblur="this.style.background='white'" onchange="setOptions1(document.form1.question1.options[document.form1.question1.selectedIndex].value)">
<Option value=""></option>
<Option value="Capacity">Capacity</option>
<Option value="Bandwidth">Bandwidth</option>
<Option value="Both">Both</option>
</select></td>
<tr>
<td align="left" id="q1c1"> </td>
<tr>
<td align="left" id="q2c1"> </td>
<tr>
<td align="left" id="q3c1"> </td>
<tr>
<td align="left" id="q4c1"> </td>
<tr>
<td align="left" id="q5c1"> </td>
<tr>
<td align="left" id="q6c1"> </td>
<tr>
<td align="left" id="q7c1"> </td>
</table>
</form>
</body>
</html>
The Javascript is as follows:
function setOptions1(chosen)
{
var label=document.getElementById;
var textbox1="";
var textbox2="";
if (chosen == "") {
label('q1c1').innerHTML="";
label('q2c1').innerHTML="";
label('q3c1').innerHTML="";
label('q4c1').innerHTML="";
label('q5c1').innerHTML="";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Capacity") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q1c1').appendChild(document.createTextNode(' '));
textbox1 = document.createElement('INPUT');
textbox1.type = 'text';
textbox1.value = 0;
textbox1.size = 2;
textbox1.maxLength = 4;
label('q1c1').appendChild(textbox1);
label('q1c1').appendChild(document.createTextNode(' '));
textbox2 = document.createElement('SELECT');
textbox2_option = document.createElement('option');
textbox2_option= new Option ('GB',1,true,false);
textbox2_option= new Option ('GiB',2,false,false);
textbox2.add(textbox2_option);
label('q1c1').appendChild(textbox2);
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="Network efficiency:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Bandwidth") {
label('q1c1').innerHTML="What are the bandwidth requirements?";
label('q2c1').innerHTML="Network efficiency:";
label('q3c1').innerHTML="Average File Size:";
label('q4c1').innerHTML="What price level?";
label('q5c1').innerHTML="Would you like to include an IB Router?";
label('q6c1').innerHTML="";
label('q7c1').innerHTML="";
}
if (chosen == "Both") {
label('q1c1').innerHTML="How much capacity do you require?";
label('q2c1').innerHTML="Average File Size:";
label('q3c1').innerHTML="What are the bandwidth requirements?";
label('q4c1').innerHTML="Network efficiency:";
label('q5c1').innerHTML="What price level?";
label('q6c1').innerHTML="Would you like to include an IB Router?";
label('q7c1').innerHTML="";
}
}//end function

The problem is this line:
var label=document.getElementById;
Replace it with
function label(s) {
return document.getElementById(s);
}
Host objects are picky -- they don't always like to be treated like regular function references.
BTW: I cut-and-pasted your code into a file than ran it through Google Chrome. The error message was an invalid invocation which let me down replacing the definition of label as my first debugging step.

Related

Posting to Servlet From Two Forms Within HTML Page

Solution: Just added null default values to the HTML parameters. Seems to have solved it!
So I have an admin page (HTML) with two forms. First form is to add to an SQL database and has 4 input boxes, second form deletes from a SQL database and has 1 input box. If I use the first form, everything is OK. But if I leave the first form empty and just put a value for the 2nd form, I get an NumberFormatException for String = "" I can only assume because the first form is empty. I'm trying to have the user either fill the first form and leave the 2nd empty, or vice versa. Any advice on how to better approach this would be great.
This is my HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Admin</title>
<link rel="stylesheet" href="myStyle.css">
</head>
<body>
<h1>Welcome to the admin page.</h1>
<h2>Please enter the new product to be added:</h2>
<form action="eShop" method="Post">
<table class="tableBox">
<tr>
<td align="left"><b>Item Code:</b></td>
<td align="left"><input type="number" name="code"></td>
</tr>
<tr>
<td align="left"><b>Item Name:</b></td>
<td align="left"><input type="text" name="name"></td>
</tr>
<tr>
<td align="left"><b>Item Price:</b></td>
<td align="left"><input type="number" name="price"></td>
</tr>
<tr>
<td align="left"><b>Is Taxable:</b></td>
<td align="left"><input type="text" name="taxable"></td>
<tr>
<td align="center" colspan="2"><input type="submit" name="action" value="Update!"></td>
</tr>
</table>
</form>
<h2>Enter the code of the product you want to delete:</h2>
<form action="eShop" method="Post">
<table class="tableBox">
<tr>
<td align="left"><b>Item Code:</b></td>
<td align="left"><input type="number" name="code"></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" name="action" value="Delete!"></td>
</tr>
</table>
</form>
</body>
</html>
This is the section in my servlet that gets the parameters
else if(request.getParameter("action").equals("Delete!")) {
DataAccessImpl temp = new DataAccessImpl();
int code = Integer.parseInt(request.getParameter("code"));
temp.deleteItem(code);
}
This is the DataAccessImpl class used in the servlet, particularly the method that will delete the row.
public void deleteItem(int code) {
connect();
String deleteStm = ("DELETE FROM ProductCatalogue WHERE code = " + code);
PreparedStatement pstm = null;
System.out.println("Beginning to delete product from database...");
try {
pstm = conn.prepareStatement(deleteStm);
System.out.println("Delete complete!");
}
catch(SQLException e) {
e.printStackTrace();
}
}
in first form name your submit button like this:
<input type="submit" name="updateAction" value="Update!">
in second form name your submit button like this:
<input type="submit" name="deleteAction" value="Delete!">
Servlet Code should be like this:
else if(request.getParameter("deleteAction").equals("Delete!")) {
DataAccessImpl temp = new DataAccessImpl();
int code = Integer.parseInt(request.getParameter("code"));
temp.deleteItem(code);
}

Not able to find the elements under nobr tag

Not able to find the element with input tag. Need to find the element in the input tag. eclipse could catch the element till nobr and not further.
input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
//table[contains(#role,'presentation')][contains(#id,'pyActionArea')]//table[1]//table[contains(#role,'presentation')][contains(#section_index,'1')]//tbody//tr[2]//td[1]//following::nobr[1]//following::span[#id='$PHCClaimSearch$pServiceFromDateSpan']/input
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015")
<table id="" role="presentation" section_index="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td class="dataLabelWrite" style="height:24px;width:143px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<nobr>
<ins id="pega-calendar" style="display: none;" data-calendar="{"img":"webwb/pzspacercal_12860256145.gif!!.gif","locale":[["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"],0,"M/d/yyyy","M/d/yyyy h:mm a","Today",["January","February","March","April","May","June","July","August","September","October","November","December"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["AM","PM"],"Apply","Close"]}"/>
<script> var positionDatePickerIcn = function(control){ /* BUG-47098 - Following block filters out IE8(both quirks and standards modes) and IE9 (standards mode) */ var addMarginFlag = true; if(document.documentMode && navigator.userAgent.indexOf("Trident/4") > -1){ //IE8: skip for both standards and quirks mode addMarginFlag = false; } else if(document.documentMode && document.documentMode >= 9 && navigator.userAgent.indexOf("Trident/5") > -1){ //IE9: skip for standards mode addMarginFlag = false; } if (addMarginFlag) { var icnEle = control.lastChild; if(icnEle.tagName.toLowerCase() == 'img'){ icnEle.style.marginTop = '0px'; } } }; </script>
<span id="$PHCClaimSearch$pServiceFromDateSpan" role="group" aria-label="Service From Date : " data-calendar="{"d":[0,0],"l":0}" style="display:inline-block; width:inherit;" onmouseover="pega.c.DatePicker.dtTmHvr(event);">
<input id="ServiceFromDate" class="inactvDtTmTxt" name="$PHCClaimSearch$pServiceFromDate" data-ctl="["DatePicker"]" data-formatting="yes" value="05/02/2017" data-value="5/2/2017" style="padding-right:17px;width:11.719em;" validationtype="date" data-change="[["refresh", ["thisSection","", "", "&=", "", ",",":event","","HCClaimSearch"]]]" data-display-value="05/02/2017" type="text"/>
<img class="inactvIcon" src="webwb/pzspacer_11792674401.gif!!.gif" data-ctl="["DatePicker"]" style="cursor:pointer;"/>
</span>
</nobr>
</td>
<td class="dataLabelWrite" style="height:24px;width:125px;">
<td class="dataValueWrite" style="height:24px;width:190px;">
<td class="dataLabelWrite" style="height:24px;width:101px;">
</tr>
</tbody>
</table>
The problem is with the HTML, at least as you've pasted here.
there are a number of places inside that tag that have double-quoted text inside of double-quoted text. e.g. the input element has the following attribute:
data-ctl="["DatePicker"]"
Other attributes I found with this problem: data-calendar, data-change
Once I corrected all of the places that this is a problem with outer single quotes, I was able to find the input using your Xpath from the Chrome developer tools
data-ctl='["DatePicker"]'
As you mentioned, you could catch the element till <nobr> tag and not further that is because the <ins> tag is having style="display: none;", so will use JavascriptExecutor to change the attribute and then send the text as follows :
((JavascriptExecutor)driver).executeScript("document.getElementById('pega-calendar').style.display='block';");
driver.findElement(By.xpath("//input[#id='ServiceFromDate']")).sendKeys("04242015");

Datatables buttons pdfHtml5 exportOptions to remove nested tags

I'm trying to optimize the Datatables buttons pdfHtml5 export of a page. The table data contains nested html tags which are creating additional space above and below the cell data, which makes the PDF very long.
The text in my cell is wrapped in two nested <div> and a <p>. In the PDF export, I only need the contents of the <p>
<td>
<div class="flagimg" style="background-image: url(...)">
<div class="flagtext">
<p>name of country</p>
</div>
</div>
</td>
I'm trying to remove nested html tags using exportOptions, but I'm not sure how to write the syntax correctly. Can anyone help me with this?
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row) {
data = data.replace(/<div class="flagtext"\">/, '');
data = data.replace(/<.*?>/g, "");
return data;
}
}
}
};
var oTable = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} )
]
});
})
I finally discovered that the problem is not the nested div after all, but rather that the tags are indented in the code instead of being on one line. I've reported this to Datatables and I'm documenting the problem here, in case anyone else runs into it.
I've built on the fiddle #davidkonrad made to illustrate what's happening.
https://jsfiddle.net/lbriquet/7f08n0qa/
In the first row, the nested tags are indented in the code... this produces extra space above and below the country name data in the PDF export.
In the second row I've put all of the tags in the same line of code... and no extra spacing is produced in the PDF export.
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td>
<div class="flagimg" style="background-image: url(#">
<div class="flagtext">
<p>Country name</p>
</div>
</div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td><div class="flagimg" style="background-image: url(#)"><div class="flagtext"><p>Country name</p></div></div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
</tbody>
</table>

Disabling many drop down list all at once using javascript

<table align="center" border="0" id="typeTable" >
<%for(int i=1;i<=count;i++){%>
<tr id="a">
<td align="left" valign="top">
<p>Problem Type <%=i+1 %></p>
</td >
<td align="left" valign="middle">
<p>Number of question to generate: </p>
</td>
<td align="left" valign="middle" >
<select name="type<%=i %>" id="mySelect" >
<option>0</option>
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</td>
</tr>
<%}%>
<input type="hidden" name="totalNumOfType" value="<%=count%>"/>
</table>
Hi, I have the code above to do a for loop for the table row when I get a count from the database to show how many types of problems in math topic.
The drop down menu list name I have put the int I for the name to have each row an individual name so that I can pass the value of each drop down list selected to the next page which I can do successfully.
The issue now is I have problem disabling all the drop down menu list at onece using the javascript as it will not know how many count there will be.
I have used the following code to disable the drop down menu for example.
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true;
}
function enable()
{
document.getElementById("mySelect").disabled=false;
}
</script>
I have been thinking but no avail. any help would be much appreciated. Thank you!
did you tryed jquery prop function : $("#mySelect").prop("disabled",true) ?

How can I click on a pop-up Calendar wizard in Selenium 2?

I'm using selenium 2 for a project which allows for date selection using jsf calendar wizard from myfaces (jsf 1.1). Can some one help me the steps for date selection. Thank you in advance.
Date of Birht field screenshot
Calendar popup screenshot
Corresponding html being generated
<div class="content">
<input id="firstApplicant2:ApplicantContent-DateOfBirth" name="firstApplicant2:ApplicantContent-DateOfBirth" type="text" maxlength="10" class="dateStyle" onfocus="selectText('null', 'firstApplicant2:ApplicantContent-DateOfBirth')" onclick="selectText('null', 'firstApplicant2:ApplicantContent-DateOfBirth')"><span id="firstApplicant2:ApplicantContent-DateOfBirthSpan"></span>
<div id="firstApplicant2:ApplicantContent-DateOfBirthSpan_calendarDiv" class="jscalendar-DB-div-style" style="visibility: hidden;">
<span id="firstApplicant2:ApplicantContent-DateOfBirthSpan"></span>
<table style="width:250px;" class="jscalendar-DB-table-style">
<tbody>
<tr class="jscalendar-DB-title-background-style">
<td>
<table style="width:248px;">
<tbody>
<tr>
<td class="jscalendar-DB-title-style">
<span><span class="jscalendar-DB-title-control-normal-style"> <img src="/webapp/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/13080856/calendar.HtmlCalendarRenderer/DB/left1.gif" width="10px" height="11px" style="border:0px;">  </span><span class="jscalendar-DB-title-control-normal-style"> <img src="/webapp/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/13080856/calendar.HtmlCalendarRenderer/DB/right1.gif" width="10px" height="11px" style="border:0px;">  </span>  </span>
</td>
<td style="text-align:right;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="jscalendar-DB-body-style"></td>
</tr>
<tr class="jscalendar-DB-today-style">
<td class="jscalendar-DB-today-lbl-style">
<span>Today is <a class="jscalendar-DB-today-style" title="Go To Current Month" href="#">06/15/2011</a></span>
</td>
</tr>
</tbody>
</table>
</div>
<div id="firstApplicant2:ApplicantContent-DateOfBirthSpan_selectMonthDiv" class="jscalendar-DB-div-style" style="visibility: hidden;"></div>
<div id="firstApplicant2:ApplicantContent-DateOfBirthSpan_selectYearDiv" class="jscalendar-DB-div-style" style="visibility: hidden;"></div><script type="text/javascript">
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar=new org_apache_myfaces_PopupCalendar();
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.imgDir = "/webapp/faces/myFacesExtensionResource/org.apache.myfaces.renderkit.html.util.MyFacesResourceLoader/13080856/calendar.HtmlCalendarRenderer/DB/";
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.monthName = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.dayName = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.startAt = 0;
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.weekdays = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.shortWeekdays = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.shortMonths = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.eras = new Array("BC","AD");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.dateFormatSymbols.ampms = new Array("AM","PM");
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.todayDateFormat = "MM/dd/yyyy";
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.initData.popupLeft = false;
firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar.init(document.getElementById('firstApplicant2:ApplicantContent-DateOfBirthSpan'));
</script><img src="/webapp/Images/upgrade/icon_calendar.jpg" style="vertical-align:bottom;" onclick="firstApplicant2_3AApplicantContent_2DDateOfBirthCalendarVar._popUpCalendar(this,document.getElementById('firstApplicant2:ApplicantContent-DateOfBirth'),'MM/dd/yyyy')">
</div>
Would it be acceptable to just update the input text field with the properly formatted date? Unless you are specifically testing that MyFaces widget, I think this should suffice.