What I am trying to do is when you hover over a name, show a tooltip popup with details of that name.
I did the following but for some reason, it doesn't seem to work. No tooltip shows up. When you hover over a name it calls a function and does an AJAX request and we get back details as string. I have verified that the function works fine and returns string.
I just can't seem to be able to get that returned string into the tooltip popup. I am testing this on IE8
Javascript Function:
function showDetails(name){
var xmlHttpRequest;
if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}else{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP>");
}
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById("details").innerHTML = xmlHttpRequest.responseText;
}
}
xmlHttpRequest.open("GET", "showStopsInfoPopup.do?name="+name, true);
xmlHttpRequest.send();
}
CSS
#tooltip { position: relative; }
#tooltip a{text-decoration: none;}
#tooltip a span { display: none; color: #FFFFFF; }
#tooltip a:HOVER span { display: block; position: absolute;
width: 200px; background-color: #aaa;
height: 50px; color: #FFFFFF; padding: 5px; }
JSP page:
<tr id="tooltip">
<td onmouseover="showDetails('${name}')">
<c:out value="${name}"><span id="details"></span></c:out>
</td>
</tr>
Only the relevant part of my view source page(generated html): "span" tag inside the "a" tag is missing!!
<tr id="tooltip">
<td onmouseover ="showDetails('NRT')">NRT </td>
</tr>
.
.
.
...
<span id="details">*****************</span>
I am assuming you are generating your data that's being displayed dynamically and that you have more than one row.
If so, then all the span tag in your table will have the same id("details"). You have to be able to distinguish between two rows.
What you can do is add a number to the id and increment the number as you go to the next row, so that each span tag has unique id.
<c:out value="${name}"><span id="details${index}"></span></c:out>
be sure to pass the index as an argument to your javascript function and make the following change.
function showDetails(name, index){
..
...
document.getElementById("stopsInfo"+index).innerHTML = xmlHttpRequest.responseText;
.
...
}
Can you view the source and show us the HTML generated. I tried this and it seems to work okay when just doing a quick test.
Related
I'm using anki and I'm trying to insert "hints" and explantions.
I took a code from this guy on youtube who created just that - the possibility of clicking on a hint symbol that will only then display the content of the hint.
That's the link to the video - https://www.youtube.com/watch?v=Hv0IxQSYZiM
That is the code he wrote that I insert to Anki -
http://pastebin.com/raw/tqWNkeHV
The problem I have is that I've got hint's that have mulitple lines / images in them, and this method won't allow me to show them in a good way. The code will only receive the first line in the "hint" category, and won't hide the rest of the content. It looks like this -
Example
Here is the current code -
{{Question}}
{{#Hint}}
<div id="hint" class="hidden">
<p class="trigger">[ click to show hint ]</p>
<p class="payload">{{Hint}}</p>
</div>
<script>
var hint = document.getElementById('hint');
hint.addEventListener('click', function() {
this.setAttribute('class', 'shown'); });
</script>
{{/Hint}}
And HERE IS THE STYLING -
.card { font: 1.5em/1.5 sans-serif; text-align: center; }
#hint { background: #f2fbe7; border: 1px solid #dff5c4; border-radius: 6px;
color: #7a876b; }
#hint.hidden:hover { background: #dff5c4; color: #000; cursor: pointer; }
#hint.hidden .payload { display: none; }
#hint.shown { background: #fff; color: #000; }
#hint.shown .trigger { display: none; }
#hint.shown .payload { display: block; }
Can anyone help me modify the JAVA / HTML code so I can insert all lines into the hints section?
Thank you very much.
In the third line of {{#Hint}} section, you must change from:
'<p class="payload">{{Hint}}</p>'
to:
'<pre class="payload">{{Hint}}</pre>'
I'm trying to click/sendKeys to a button labelled Browse on a webpage, and no matter what I try, Selenium fails to find it.
Using Selenium's IDE, I can gather the following information:
id=uploadField
name=uploadField
css=#uploadField
dom:name = document.uploadForm.uploadField
xpath:attributes = //input[#id='uploadField']
xpath:idRelative = //div[#id='browseBtnContainer']/form/input[4]
dom:index = document.uploadForm.elements[3]
xpath:position = //input[4]
And I've tried all of the following By. sequences, all of which throw a NoSuchElementException. There is only one iframe and I tried to switch to iframe but it didn't work.
WebElement browse = driver.findElement(By.id("uploadField"));
WebElement browse1 = driver.findElement(By.name("uploadField"));
WebElement browse2 = driver.findElement(By.cssSelector("#uploadField"));
WebElement browse3 = driver.findElement(By.cssSelector("uploadField")); // just in case
WebElement browse4 = driver.findElement(By.xpath("uploadField")); // attributes
WebElement browse5 = driver.findElement(By.xpath("//div[#id='browseBtnContainer']/form/input[4]")); // idrelative
WebElement browse6 = driver.findElement(By.xpath("//input[4]")); // position
The container portion of the code confuses me. I don't know how to access the elements in a container, and anything I find on google just tells me to use the xpath, of which I can't seem to find.
Am I using the By.xpath incorrectly? How can I generate a list of every single element on the webpage?
Here is the relevant HTML source code:
<div id="ext-comp-1022" class=" x-panel x-border-panel" style="left: 0px; top: 0px; width: 1077px;">
<div id="ext-gen27" class="x-panel-bwrap">
<div id="ext-gen28" class="x-panel-body x-panel-body-noheader" style="overflow: auto; width: 1075px; height: 502px;">
<div id="ext-comp-1023" class=" x-panel x-panel-noborder">
<div id="stepOnePanel"/>
<div id="stepTwoPanel"/>
<div id="stepThreePanel"/>
<div id="stepOnePanel" class="step-container" style="margin:20px 20px 20px 30px;">
<div class="step-title" style="background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url(/assets/icons/medium/icon-1.png );padding:12px 0px 0px 50px;height:30px;font-weight:bold;">Start by selecting the ZIP file which contains your images (20MB max)</div>
<div id="ext-gen71" style="padding-left:70px;overflow:auto;">
<div id="ext-comp-1024" class=" x-panel x-panel-noborder">
<div id="ext-gen74" class="x-panel-bwrap">
<div id="ext-gen75" class="x-panel-body x-panel-body-noheader x-panel-body-noborder">
<div style="padding-top:2px">
<div id="browseBtnContainer" style="float:left;width:85px;margin-top:-2px">
<table id="browseBtn" class="x-btn stepBtn x-btn-noicon x-btn-over" cellspacing="0" style="width: 79px;">
<form enctype="multipart/form-data" target="hiddenUploadFrame" method="post" action="/uploader/upload?actingAsUserId=pleach¤tAccountId=bmwofreading&uploadAccountId=bmwofreading&ccmode=multiwindow" name="uploadForm">
<input id="doNotResize" type="checkbox" style="display:none" value="true" name="doNotResize"/>
<input id="pdfConvert" type="checkbox" style="display:none" value="true" name="pdfConvert"/>
<input type="hidden" value="false" name="previewNeeded"/>
<input id="uploadField" type="file" size="1" style="position: absolute; top: 0px; left: -19px; opacity: 0; cursor: pointer; height: 22px;" name="uploadField"/>
You need to switch to the frame in order to interact with the elements in it
driver.switchTo.frame("id"); //using the frame id attribute
// or
driver.switchTo.frame("name"); //using the frame name attribute
// or
WebElement frame = driver.findElement(...);
driver.switchTo.frame(frame); //using the frame as WebElement
And to switch back
driver.switchTo().defaultContent();
Try following method.
driver.findElement(By.xpath("//input[#id='uploadField']")).click();
As per provided HTML, we can try directly by using id or name. If you are looking for xpath only, then try below relative xpath
//input[#id='uploadField']
If directly click does not works then try with Actions. First move to element then try to click. i hope this way helps and works good for me on most of cases
Actions move=new Actions(driver);
move.moveToElement(driver.findElement(By.xpath("//input[#id='uploadField']"))).click().build().perform();
finally you can try by using javascript executor
WebElement element = driver.findElement(By.id("uploadField"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);
Thank You,
Murali
I have element <div id="contact"> and having CSS
#contact {
background: url(../images/icon/contact.png) left top no-repeat;
display: inline-block;
width: 29px;
height: 30px;
}
I want to add css class to id contact dynamically through JSP.
Here is the css class that I want to add for id=contact dynamically through JSP.
#contact.active {
background: url(../images/icon/active_contact.png) left top no-repeat !important;
}
If the css is already defined, you just need to add the class to your <div id="contact"> to apply CSS style.
JQuery using addClass():
$( "#contact" ).addClass( "active" );
Plain Javascript:
var el = document.getElementById('contact');
if(el) {
// safe check if div has another class active
el.className += el.className ? ' active' : 'active';
}
I am not able to get the text from the web table. Please see the screen shot below for the text I am looking for. How to get the text Quick App from the below screen shot.
In the screen shot, if I find the Quick App then I have to click on Edit link for that User.
Code for xpath count for the table below:
//table[#id='ctl00_MasterPlaceHolder_GvUsers']/tbody/tr
I have tried to capture the text by using below code:
text = driver.findElement(By.xpath("//table[#id='ctl00_MasterPlaceHolder_GvUsers']
/tbody/tr["+k+"]/td[3]")).getText();
System.out.println(text);
I am getting Null value after executing the above code.
Please help me in this issue by providing code for it. Help will be appreciated.
<table id="ctl00_MasterPlaceHolder_GvUsers" class="btext" cellspacing="0" cellpadding="2" border="0" style="color:#333333;width:100%;border-collapse:collapse;"> <tbody> <tr align="left" style="color:White;background-color:#507CD1;font-weight:bold;"> <tr class="text" style="color: rgb(28, 28, 28); background-color: rgb(249, 182, 115); font-weight: normal; height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$0')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: White; height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$1')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);"> <tr style="background-color: rgb(239, 243, 251); height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$2')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);">
<tr style="background-color: White; height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$3')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);"> <tr style="background-color: rgb(226, 222, 208); height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$4')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);"
<tr style="background-color: White; height: 10px; text-decoration: none;" onclick="javascript:__doPostBack('ctl00$MasterPlaceHolder$GvUsers','Select$5')" onmouseout="javascript:setMouseOutColor(this);" onmouseover="javascript:setMouseOverColor(this);"> <td>7CUser44</td> <td>Swamy m Kumara</td> <td>Quick App</td> <td>QuickApp User</td> <td>Active</td> <td>halcyon2</td> <td>COTTAGE GROVE </td> <td>WI</td> <td> </tr>
int xpathcount= driver.findElements(By.xpath((OR.getProperty("xpathcount_Users_ID")))).size();
System.out.println("Number of rows displayed in Site History table: " +xpathcount);
int k;
for (k=1;k<=xpathcount;k++)
{
Select table = new Select(driver.findElement(By.xpath("//table[#id='ctl00_MasterPlaceHolder_GvUsers']/tbody/tr["+k+"]/td[3]")));
text1 = table.getFirstSelectedOption().getText();
System.out.println("Selected User Level is: "+text1);
Thread.sleep(2000);
text = driver.findElement(By.xpath("//table[#id='ctl00_MasterPlaceHolder_GvUsers']/tbody/tr["+k+"]/td[3]")).getText();
System.out.println(text);
}
Please find the code I have used.
Here, i have modified my code as below and worked. Thanks for all the members who tried helping me.
int xpathcount=
driver.findElements(By.xpath((OR.getProperty("xpathcount_Users_ID")))).size();
System.out.println("Number of rows displayed in Site History table: " +xpathcount);
int k;
for (k=2;k<=xpathcount;k++)
{
text = driver.findElement(By.xpath("//table[#id='ctl00_MasterPlaceHolder_GvUsers']
/tbody/tr["+k+"]/td[3]")).getText();
System.out.println(text);
}
Here i can give on simple example using python webdriver. but i don't know how to get text using java. see below example
word=driver_find_element_by_xpath("xpath value which text you need from web table")
print word.text
Answer will be show which you have selected in web table.
Hard to give a proper answer with no HTML but here goes something that might help.
public void getEditTable(final WebDriver driver, final By table, final String query) {
List<WebElement> lines = table.findElements(By.tagName("tr"));
for (WebElement line : lines) {
List<WebElement> cols = line.findElements(By.tagName("td"));
if (cols.get(2).getText().equals(query)) {
List<WebElement> actions = cols.get(8).findElement(By.tagName("a"));
actions.get(0).click();
}
}
}
Now i have to point out that this would most likely need a lot of work on your side, but maybe you can get the main idea. I do something similar to the web tables for my company CRUD sites.
For the life of me I can't figure out how to select the img src using jsoup the link ending in "51u1FaI-FHL._SL500_AA300_.jpg".
I've tried multiple things but none have worked. Any help?
doc1 = Jsoup.connect("http://www.amazon.com/gp/product/B0051HDDO2?ie=UTF8&ref=mas_faad").timeout(20000).get();
Element table = doc1.select("table[class=productImageGrid]").first()
Iterator<Element> ite = table.select("td[height=300]").iterator();
Thanks,
Cody
<table style="text-align: center;" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td id="prodImageCell" height="300" width="300" style="padding-bottom: 10px;"><img onclick="if(0 ){ async_openImmersiveView(event);} else {openImmersiveView(event);}" class="prod_image_selector" style="cursor:pointer;" onload="if (typeof uet == 'function') { uet('af'); }" **src="http://ecx.images-amazon.com/images/I/51u1FaI-FHL._SL500_AA300_.jpg"** id="prodImage"/><div id="prodImageCellInner" style="position: relative; height:0px; "><!--Comment for IE as it is empty div--></div></td>
<td id="prodVideoClick" style="display:none"></td>
<img id="loadingImage" src=http://g-ecx.images-amazon.com/images/G/01/ui/loadIndicators/loading-large_boxed._V192195297_.gif style="position: absolute; z-index: 200; display:none">
</tr>
<tr>
<td class="tiny" style="padding-bottom: 5px;"> <span id="prodImageCaption" style="color: #666666; font-size: 10px;">Click for larger image and other views</span> </td>
</tr>
</table>
#user793728: try this:-
document = Jsoup.connect("http://www.amazon.com/gp/product/B0051HDDO2?ie=UTF8&ref=mas_faad").timeout(20000).get();
Elements elements =document.select(".prod_image_selector");
for (Element element : elements){
Attributes imageAttributes=element.attributes();
for (Attribute attribute: imageAttributes){
if(attribute.getKey().equals("src")){
String imageURL=attribute.getValue();
}
}
}
The issue here seems to be that Amazon is returning different HTML to jsoup than it is to your browser, based on the request UserAgent.
I set the UserAgent to a known browser, and selected the element using the #prodImage ID, and got the result OK.
E.g.
Document doc = Jsoup.connect("http://www.amazon.com/gp/product/B0051HDDO2?ie=UTF8&ref=mas_faad")
.timeout(20000)
.userAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.91 Safari/534.30")
.get();
Element img = doc.select("#prodImage").first();
System.out.println(img.attr("src"));
Returns http://ecx.images-amazon.com/images/I/51u1FaI-FHL._SL500_AA300_.jpg
To troubleshoot issues like this, I suggesst outputting doc.html() and looking at the retrieved, parsed HTML, as it can be different from the view-source HTML of your browser (as servers can return different HTML, and view-source shows before the HTML has been tidied and built into a DOM).
Hope this helps!