Not able to find the elements under nobr tag - selenium

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");

Related

How to set header value in kendo grid row template

I am using jquery kendo grid in my project where i used row template to show three column in one row. Below is the code:
<table id="grid" style="width:100%">
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<div>
<span class="name" style="font-size:medium">#: FirstValue #</span>
<span class="name" style="font-size:medium">#: SecondValue #</span>
</div>
<tr>
<td style="width:30%">
#: GetName #
<span class="name" style="font-size:14px; color:green">#: Designation #</span>
<span class="name" style="font-family:Arial; font-size:small">#: Company #</span>
</td>
</tr>
</script>
in the above code i am just passing my model data it's working fine but when i added one div which have value firstName and LastName so it is also repeating with this data but i want to to show separately.How do i show it separately so that it should not repeat with grid.
there is one problem in your html template.
Please replace '#' with 'Javascript:void(0)'.
Error:- #: GetName #
Fix:- #: GetName #
Hope that's work for you.
http://jsfiddle.net/parthiv89/t0w3ht6m/1/
if you like then don't forget to like.
I got solution by own, Firstly i changed code in my schema like this:
schema: {
parse: function (data) {
var items = [];
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>"+"Get results for this text: "+"</b>"+data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " +"</b>" + data.data[i].SearchValue;
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
Then in html i used two span to show this value which is there in for loop.
and it's working fine for me.
Thanks everyone.

dijit.Dialog.hide() exception in animation handler for: onEnd

I am creating a dijit Dialog and then hiding it with a OK/Cancel button. As the dialog hides, I always get the follow errors in the javascript console:
exception in animation handler for: onEnd
TypeError: Cannot read property 'remove' of undefined(…)
See here: https://www.youtube.com/watch?v=QcEUsllrRGs
The error doesn't seem to affect anything, but I'd sure love to resolve it so I don't confuse that error for a real functional issue while debugging.
I've read many suggestions regarding similar errors... using lang.hitch, disconnecting from events, but nothing seems to work/be applicable. Help?!
Here's a snippet of my Dialog code:
function showMessageDialog(title, message, width) {
var content,
focusOnOkButton = function () {
dojo.byId('messageDialogOk').focus();
};
if (!dijit.byId("messageDialog")) {
new dijit.Dialog({}, "messageDialog").startup();
new dijit.form.Button({
onClick: function() {
dijit.byId('messageDialog').hide();
}
}, "messageDialogOk").startup();
}
if (width) {
dojo.byId('messageDialogTable').style.width = width + "px";
} else {
dojo.byId('messageDialogTable').style.width = "450px";
}
dijit.byId('messageDialog').resize();
dijit.byId('messageDialog').set("title", title);
content = dojo.byId("messageDialogMessage");
dojo.empty(content);
content.innerHTML = message;
dijit.byId('messageDialog').show();
setTimeout(focusOnOkButton, 50);
}
....and the associated HTML:
<div id="messageDialog" style="display:none;">
<table id="messageDialogTable" style="width:450px;table-layout: fixed;">
<tr>
<td colspan="2" style="padding: 0 0px 0px 5px;">
<table style="width: 100%;">
<tr>
<td id="messageDialogMessage" style="font-size: 10pt;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: center;">
<div id="messageDialogOk">OK</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I tried to duplicate the problem with a simple JSFiddle example, but could not... so there's something going in in my app... but not sure what it could be.

Identify table data inside table present inside a class

<div class="row-fluid">
<table class="s-table table table-bordered table-striped table-hover">
<thead class="p-table-head">
<tbody class="p-table-body">
<tr>
<td>
<td>
<div id="div_2_1_2_1_2_r1" class="String CoachView CoachView_show" data-eventid="" data-viewid="Table_Column1" data-config="config_div_2_1_2_1_2_r1" data-bindingtype="String" data-binding="local.customerContacts[index].name" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.String" data-bindingrt="local.customerContacts[0].name">
</td>
<td>
<td>
<td>
<td>
<td>
</tr>
How to identify td data exist inside div element and click on that?
These td elements will generate dynamically, we need find that it consists of contact details like name & phone number..
You can also do this. In the below example you can use ./td. This example search for a td which contains a value all. If it finds it, then click on the anchor inside the td.Might be useful for you.
List<WebElement> elements = driver.findElements(By.xpath("//table/thead/tr"));
for (Iterator<WebElement> iterator = elements.iterator(); iterator.hasNext();) {
WebElement webElement = iterator.next();
List<WebElement> findElement = webElement.findElements(By.xpath("./td"));
if( findElement.size() > 0 ){
if( findElement.get(0).getText() != null && findElement.get(0).getText().indexOf("all") != -1 ) {
List<WebElement> aElement = webElement.findElements(By.xpath("./td/a"));
aElement.get(0).click();
break;
}
}
}
Use id.
<td id="findme"> </td>
Also, it's true for any other tags. And don't forget closing opened TDs.

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) ?

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

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.