here is my issue:
when i say getelementbyid("table1") it says"Uncaught TypeError: Cannot set property 'innerHTML' of null"
i am rendering a dynamic table via java script asshown below:
function mainProcessing()
{
<% ProductController pc=new ProductController();%>
var val = <%=pc.doTask()%>
var jobj=JSON.stringify(val);
document.write(jobj);
alert(jobj);
var obj=JSON.parse(jobj);
alert("jobj");
alert(obj.toString());
var object = eval("(" + jobj+ ")");
alert("this part is done");
return object;
}
function drawtable()
{
var JSONObj=mainProcessing();
var tablecontents = "";
for (var i = 0; i < 5; i ++)
{
tablecontents += "<tr>";
tablecontents += "<td>" + i + "</td>";
tablecontents += "<td>" + i * 100 + "</td>";
tablecontents += "<td>" + i * 1000 + "</td>";
tablecontents += "</tr>";
}
document.write(JSONObj.toString());
alert("just outside nested loop");
document.getElementById("table1").innerHTML = tablecontents;
}
for testing i have inserted randome values in the table.
and that html part goes like this:
<title>Indian Divine !!!</title>
</head>
<body onload="drawtable()">
<center>
<h1>my name is jobj</h1>
<table id="table1">
</table>
</center>
</body>
</html>
the browser user is Chrome.
IDE Eclips Juno
You can not use document.write after the page load. It replaces the content. If you are trying to see what is in it, use console.log(jobj);
Second, if you plan on using this code with IE, you can't set the tables innerHTML.
Third, do not use eval() to convert JSON. Use JSON.parse()
document.write(mayur) replaces the whole document (including the table) with the value of mayur, because you are calling it after the document was loaded. At the moment you are trying to access the element with ID table1, it does not exist anymore.
Solution: Don't use document.write.
More info: MDN - document.wite
Related
I need to get text value as indicated below:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<b>Some Text I can find using xPath</b>
<hr>
**TEXT I WOULD LIKE TO FIND THAT IS BEING ADDED DYNAMICALLY - it will be different number every time page loads**
<hr>
**some other text dynamically added**
</body>
</html>
I tried by using
driver.findElement(By.xpath("/html/body/text()[1]"));
with no luck.
It's not straight forward due to the WebDriver not handling anything but element nodes. I opened a while ago two issues: one against the WebDriver and another one against the W3C WebDriver specification. (vote for them if, it helps showing a need of the user base).
Meanwhile, as a (painful) workaround, you will need to rely on JavascriptExecutor capabilities of your WebDriver. An example (in another context, thus will have to be adapted to your specifics), in one of my older answers.
Adapted to your case, with the note it may contain bugs cause by typos (I haven't checked it):
WebElement contextNode=driver.findElement(By.xpath("/html/body"));
if(driver instanceof JavascriptExecutor) {
String jswalker=
"var tw = document.createTreeWalker("
+ "arguments[0],"
+ "NodeFilter.SHOW_TEXT,"
+ "{ acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT;} },"
+ "false"
+ ");"
+ "var ret=null;"
// skip over the number of text nodes indicated by the arguments[1]
+ "var skip;"
+ "for(skip=0; tw.nextNode() && skip<arguments[1]; skip++);"
+ "if(skip==arguments[1]) { " // found before tw.nextNode() ran out
+ "ret=tw.currentNode.wholeText.trim();"
+ "}"
+ "return ret;"
;
int textNodeIndex=3; // there will be empty text nodes before after <b>
Object val=((JavascriptExecutor) driver).executeScript(
jswalker, contextNode, textNodeIndex
);
String textThatINeed=(null!=val ? val.toString() : null);
}
Please let me know if/how it works.
My Companys website is compatible only with IE. So i cannot use IDE for recording webdriver scripts.
There are HTML pages which has about 100 or 200(not exact count) of textboxes and Dropdowns.
Writing java code to automate this is very much tedious.
Can someone provide me with tool or utility to read the HTML file itself and generate the corresponding code ?
Or guide me how to develop a utility to meet my need ?
For example :
Consider an html file like this
<html>
<body>
<input name = "employee_name" />
<select id = "designation">
<option value = "MD">MD</option>
<option value = "programmer"> Programmer </option>
<option value = "CEO"> CEO </option>
</option>
<body>
</html>
If i give this file as input to utility it will generate me a java file like this
WebDriver driver = new InternetExplorerDriver();
WebElement employee_name = driver.findElement(By.name("employee_name"));
employee_name.sendKeys("...");
Select designation = new Select(driver.findElement(By.id("designation")));
designation.selectByVisibleText("...");
Thanks in Advance !
You should be using "Selenium Builder" rather than "Selenium IDE", BUT, in theory, you could get all similar elements from a page in a group like so:
List<WebElement> bodyinputs = driver
.findElements( By.xpath("//div[#class='body']/input") );
List<WebElement> footeranchors = driver
.findElements( By.xpath("//div[#class='footer']/a") );
Then, for each of these groups, you can loop through the lists and use a JavaScriptExecutor to evaluate and figure out the XPath for each element and store the XPath in a hashtable with each Element:
protected String getXPath() {
String jscript = "function getPathTo(node) {" +
" var stack = [];" +
" while(node.parentNode !== null) {" +
" stack.unshift(node.tagName);" +
" node = node.parentNode;" +
" }" +
" return stack.join('/');" +
"}" +
"return getPathTo(arguments[0]);";
return (String) driver.executeScript(jscript, webElement);
}
Then, the final step, you can auto-generate "By locators" using the HashTable as input.
But even if you do that you still need to write code to intelligently figure out which By locators get which inputs and which ones don't.
When I run this code I get a blank screen and nothing gets displayed.What changes I have to make in order to get this right and where am I going wrong?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$.getJSON("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc",
function(data, textStatus){
alert(data);
$.each(data.results,function(i, name) {;
$("#placenames").append(i+':'+name.vicinity+'<br/>');
});
});
});
</script>
</head>
<body>
<div id="placenames"></div>
</body>
</html>
Have you tried using Google Maps Javascript API? It does all the JSONP stuff for you.
Here is a demo with your coordinates: http://jsfiddle.net/ThinkingStiff/CjfcX/
Script:
var places = new google.maps.places.PlacesService( document.createElement( 'div' ) ),
searchRequest = {
name: 'harbour',
location: new google.maps.LatLng( -33.8670522, 151.1957362 ),
radius: 500,
types: ['food']
};
places.search( searchRequest, function ( results, status ) {
var html = '';
for ( var index = 0; index < results.length; index++ ) {
html +=
'<li '
+ 'data-location-id="' + results[index].id + '" '
+ 'data-address="' + results[index].vicinity + '" '
+ 'data-latitude="' + results[index].geometry.location.lat() + '" '
+ 'data-longitude="' + results[index].geometry.location.lng() + '" '
+ 'data-name="' + results[index].name + '">'
+ '<div>' + results[index].name + '</div>'
+ '<div>' + results[index].vicinity + '</div>'
+ '</li>';
};
document.getElementById( 'results' ).innerHTML = html;
} );
HTML:
<script src="http://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=true"></script>
<ul id="results"></ul>
Output:
Google API does not support the callback/JSONP from a jQuery get/getJSON at this time
To load async, you need to do something like this:
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
http://code.google.com/apis/maps/documentation/javascript/basics.html#Async
You have to add this querystring so that it is parsed as jsonp:
&callback=?
See this blog post for more information:
http://www.mattcashatt.com/post/index/Obtaining-and-Parsing-Open-Social-Graph-Data-with-JSONP-and-jQuery
I have two text fields (pageField1) and pageField2) in Spring MVC where an user can input in page numbers. The javascript code retrieves the values in these textfields and sends as POST data to the controller. The code for retreiving the values and sending as POST data in javascript is exactly the same for both fields.
In the Controller, I use request.getParameter("value") to retrieve the POST data.
On Firefox and Chrome, values for both pageField1 and pageField2 are retrieved fine.
On IE8, request.getParameter("value") returns null for pageField1 but the correct value for pageField2.
This is really baffling, and I am stumped. I put an alert just before Spring MVC sends the POST data to the controller. The values are exactly the same for FireFox and IE, but when retrieved on the controller, its null on IE.
Any input would be great! I can post snippet of the code if needed.
Thanks!
Will try using HTTPtea. I already downloaded it, just have to configure it now.
Thanks!! Here is my JavaScript code:
Here is the JavaScript code:
functionPageField1(event){
if (event == null || event.keyCode == 13) {
var domain = document.getElementById('domainTextField').value;
var nameToFindExcl = document.getElementById('searchObjectsExclTextField').value;
var pageNumberExcl = document.getElementById('pageNumberExclTextField').value;
var pageCountExcl = document.getElementById('pageCountExclTextField').value;
var nameToFindIncl = document.getElementById('searchObjectsInclTextField').value;
var pageNumberIncl = document.getElementById('pageNumberInclTextField').value;
if (!isValidInput(pageNumberExcl,pageNumberIncl)){
return;
}
alert("/sysmgr/domains/viewDomainObjects.spr?domain=" + domain + "&nameToFindExcl=" + nameToFindExcl +
"&pageNumberExcl=" + pageNumberExcl + "&nameToFindIncl=" + nameToFindIncl + "&pageNumberIncl=" + pageNumberIncl);
/* Its the pageNumberExcl that is null in the controller, where as all other
values are fine.
In the above alert, I see the correct value for pageNumberExcl, but its null when I retreive it in the controller.
*/
window.location="/sysmgr/domains/viewDomainObjects.spr?domain=" + domain + "&nameToFindExcl=" + nameToFindExcl +
"&pageNumberExcl=" + pageNumberExcl + "&nameToFindIncl=" + nameToFindIncl + "&pageNumberIncl=" + pageNumberIncl;
}
}
//This is the snippet of the html code that defines the pageNumberExcl Field
<td>
<p align="right">
<fmt:message key="form.any.page"/> <input type="text" id="pageNumberExclTextField"
value="${pageNumberExcl}" size="3" onKeyPress="numberPageExcl(event)">
<fmt:message key="form.any.of"/> <input disabled type="text" style="border-style:none; background-color:white; color:black"
id="pageCountExclTextField" value="${pageCountExcl}" size="3">
</p>
</td>`
I have been trying to figure out how to highlight the selected row in a table. In my jsp I have jsp scriplet that can get access to the id of the row the displaytag library is creating. I want to compare it to the the id of the current row selected by the user ${currentNoteId}. Right now if the row id = 849 (hardcoded) the class "currentClass" is added to just that row of the table. I need to change the 849 for the {$currentNoteId} and I don't know how to do it. I am using java, Spring MVC. The jsp:
...
<%
request.setAttribute("dyndecorator", new org.displaytag.decorator.TableDecorator()
{
public String addRowClass()
{
edu.ilstu.ais.advisorApps.business.Note row =
(edu.ilstu.ais.advisorApps.business.Note)getCurrentRowObject();
String rowId = row.getId();
if ( rowId.equals("849") ) {
return "currentClass";
}
return null;
}
});
%>
<c:set var="currentNoteId" value="${studentNotes.currentNote.id}"/>
...
<display:table id="noteTable" name="${ studentNotes.studentList }" pagesize="20"
requestURI="notesView.form.html" decorator="dyndecorator">
<display:column title="Select" class="yui-button-match" href="/notesView.form.html"
paramId="note.id" paramProperty="id">
<input type="button" class="yui-button-match2" name="select" value="Select"/>
</display:column>
<display:column property="userName" title="Created By" sortable="true"/>
<display:column property="createDate" title="Created On" sortable="true"
format="{0,date,MM/dd/yy hh:mm:ss a}"/>
<display:column property="detail" title="Detail" sortable="true"/>
</display:table>
...
This could also get done using javascript and that might be best, but the documentation suggested this so I thought I would try it. I cannot find an example anywhere using the addRowClass() unless the comparison is to a field already in the row (a dollar amount is used in the documentation example) or hardcoded in like the "849" id.
Thanks for any help you can provide.
I went ahead and did it in javascript instead. When I used the currentNoteId in the scriptlet like this:
String rowId = row.getId();
String noteId = (String) pageContext.getAttribute("currentNoteId");
if ( rowId.equals( noteId ) ) {
return "currentClass";
}
return null;
I received the error: got error Cannot refer to a non-final variable pageContext inside an inner class defined in a different method.
So instead I wrote:
function highlightCurrentTableRow(tableId, currentRowId ) {
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
console.log( "rowId", "'" + currentRowId + "'" );
for (i = 1; i < rows.length; i++) {
rowId = rows[i].getElementsByTagName("td")[0].innerHTML;
console.log( " rowId", "'" + rowId + "'" );
if ( rowId == currentRowId ) {
console.log( "got here" );
var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass" );
};
}
}
Actually this may not work in IE because of "class" is a key word so I used Yahoo YUI addClass(element, class) instead so I replaced
var rowClass = rows[i].getAttribute("class");
rows[i].setAttribute("class", rowClass + " currentClass" );
with
YAHOO.util.Dom.addClass(rows[i],'currentClass');