Automating a javascript button click - javascript

So I have a button with code like this:
<div style="text-indent: 0pt; visibility: inherit;" id="button5061">
<a title="Continue" href="javascript:if(%20button5061.hasOnUp%20)%20button5061.onUp()" name="button5061anc">
<img width="82" height="25" border="0" style="cursor: pointer;" alt="Continue" src="images/continueoff.gif" name="button5061Img">
</a>
</div>
And I need to click it with javascript. Right now I am using the firefox extension Chickenfoot which allows me to script the site with a javascript interpreter with some custom commands.
http://groups.csail.mit.edu/uid/chickenfoot/api.html
I have tried selecting it with xPath (//div/a[#title='Continue']/..) which finds it, but when I click() it nothing happens.
Here are some of the things I have tried:
click(find(new XPath("//img[#alt='Continue']/..")))
click(find(new XPath("//img[#alt='Continue']/../..")))
click("continue")
click("Continue")
click("images/continueoff.gif")
click("continueoff.gif")
click(find("Continue"))
click(find("Continue").element)
click(find("images/continueoff.gif"))
I know this is a rather specific quesiton but any ideas on what to try would be much appreciated.

html:
<div>
<a href="#" onclick="alert('ok')">
<img src="">
</a>
</div>
javascript:
var xPathRes = document.evaluate ('//div[1]/a[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
xPathRes.singleNodeValue.click();
jsfiddle:
https://jsfiddle.net/7fm89aqd/

If you're trying to simulate a user clicking on it:
You can simulate a click like this: document.getElementById('theSubmitButton').click();
Here's an example for ya: http://jsfiddle.net/gasWZ/1/
If that's not what you're trying to do, could you explain a bit more?

Wouldn't it be effective to pass the anchor object to your function and evaluate the name attribute?
set the href attribute to #
call the function and pass the obj
<div style="text-indent: 0pt; visibility: inherit;" id="button____"> <a title="Continue" href="#" name="button____anc"> <img width="82" height="25" border="0" style="cursor: pointer;" alt="Continue" src="images/continueoff.gif" name="button____Img"> </a> </div>

Related

Sharepoint trigger a javascript on anchor to remove attachment

I want to trigger the javascript "RemoveLocal("attachRow1","fileupload1")" on the anchor on code below,
<span class="ms-delAttachments">
<img src="/_layouts/15/images/rect.gif?rev=44">
<a href='javascript:RemoveLocal("attachRow1","fileupload1")'>Delete</a>
</span>
How can i do this?
You should use an onclick event to trigger the function call.
<span class="ms-delAttachments">
<img src="/_layouts/15/images/rect.gif?rev=44">
<button onclick="RemoveLocal('attachRow1','fileupload1')">Delete</button>
</span>
Problem solve.
$(".ms-delAttachments a")[0].click();

change text content on mouseover to img alt property

i have some img tag with class name box, and a p tag with class title, i need to change on mouseover and change text content of p tag to alt property of img that clicked, please help me.
<table style="width:100%;padding-top:200px;border-bottom:5px solid black;">
<tr style="text-align:right;width:100%;font-size:small;text-align:center;">
<td class="box" style="width:22%;">
<a href="http://xxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="link1" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%;">
<a href="http://xxxxxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-18.jpg" alt="link2" class="imgLogo" data-tree="oak" onmouseover="reply_click(this);"/>
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxxx.com/pwa">
<img src="Images/photo_2016-06-21_12-14-00.jpg" alt="link3" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxx.com">
<img src="Images/photo_2016-06-21_12-13-51.jpg" alt="link4" class="imgLogo" />
</a>
</td>
</tr>
</table>
and my p tag:
<p style="text-align: center" id="title-links" class="title-links">content here</p>
i want to write it with javascript, i dont want to use jQuery.
I coded solution for this question using by javascript.
Add onmouseover and onmouseout event properties into the img tag. As below:
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="سیستم مدیریت جلسات" class="imgLogo" onmouseover="changeText(this)" onmouseout="changeTextToDefault()"/>
After this, add the following js functions linked to above mouse events.
This changeText() function going to execute when mouse pointer come over the displayed img tag. After, it changes text content of p tag to the value of alt property on img tag.
function changeText(xTag){ document.getElementById("title-links").innerHTML =xTag.getAttribute("alt");}
Also, changeTextToDefault() function going to execute when mouse pointer leaves over the displayed img tag. And, it changes text content of p tag to the default text.
function changeTextToDefault(){ document.getElementById("title-links").innerHTML = "سیستم مدیریت جلسات";}
Here is demo
$(".imgLogo").on("mouseenter", function() {
$("#title-links").text($(this).attr("alt"));
});
Also, please note that the class names you gave in your are different to the ones your supplied in your code...
This code also doesn't require a onmouseover HTML attribute on the img
Put this script in you page.
function reply_click(e) {
$('.title').text(e.alt);
}
Use onmouseover and onmouseout
Script
function showalt(elem){ $('#title-links').text(elem.alt); }
function showdefault(elem){$('#title-links').text('سیستم مدیریت جلسات');}
Here is a demo
On removing mouse default <p> tag content will display

Make image link open in new window in php file

Hi I have a website that has a banner that i want to link to another website of mine, but I want it to open in a new window. I also want the cursor to be a hand in all browsers as well. I tried the target = "_blank" method but I don't believe that is right. How can I do this in PHP?
here is the code
I know there are some answers similar to this question but none have solved my problem
<div class="banner-part" onclick="location.href='www.blabla.org/' target="_blank";" style="cursor: pointer;" style="cursor: hand;"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
You're making a bit of a mess there. You're forcing a <div> to act like an <a>, when you could achieve the same thing with a sprinkle of CSS:
<a href="http://www.blabla.org" target="_blank" class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</a>
And make the <a> a block element through CSS, without needing to put a block element (<div>) inside an inline element (<a>), which is invalid html in doctypes apart from HTML5 (though the browsers won't complain much)
a.banner-part {
display:block;
}
<div class="banner-part"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
Use the div inside the a tag
target is not a valid property for div element. Try this:
<a href="YOUR_PATH_HERE" target="_blank">
<div class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</div>
</a>
Your HTML is broken:
<div [...snip...] /></a>
^^^------------------^
You open a div tag, then close an a

jQuery Div OnClick trigger sibling link

How would I make <div class="hover"></div> on click trigger <a href="http://example.com" target="_blank">? I've tried using the sibling selector and I can't seem to get the hang of it..
When somebody clicks on div.hover I need a new window to open using the href of the sibling anchor.
<ul id="photoUL">
<li>
<div class="hover"></div>
<a href="http://example.com" target="_blank">
<img width="150" height="150" style="border: 1px solid #000000;" title="2013 Dirty Duathlon" src="http://example.com/example.jpg">
</a>
EXAMPLE
</li>
$('div.hover').on('click',function(){
window.location.href = $(this).next('a').attr('href');
});
Demo ---> http://jsfiddle.net/NGwL9/
Demo: http://jsfiddle.net/kuJPC/
This will open http://example.com in a new tab when .hover is clicked which will have the same behavior as <a href="http://example.com" target="_blank">
$('.hover').click(function() {
window.open('http://example.com','_newtab');
});
If you don't want to use "window.open", you can put a click handler on the hover and use the next function to simulate the click of the next anchor tag.
$('.hover').click(function(){
$(this).next('a')[0].click();
});
Here is a working jsfiddle:
http://jsfiddle.net/4FNJM/1/

Selenium IDE select window without href or url

I am new in Selenium IDE. I try to select a PDF that opens during the test, but it doesn't work. I'am testing a Webapplication that is written on JSF and so includes some Java-Methodes/Classes.
I want to test if the PDF opens correctly or not. The problem is, there is no direct href in the HTML-Code. Only a Java(?)-Methode who opens the PDF. Is there any solution for this problem in Selenium IDE?
The Element you can click on is
<h:commandLink id="createDokument" style="background-image: none;" styleClass="Button Blue"
action="#{myBean.checkDocument()}" value="#{buttons['BTN_Document']}">
</h:commandLink>
Then a javaScript function should test if a pdf can be created
IF yes the hidden button is clicked:
<h:commandLink id="createDocumentPdf" style="background-image: none; display: none;"
styleClass="Button Blue"action="#{myBean.createDocument()}" value="something" target="_blank">
</h:commandLink>
What Firebug knows from this two buttons is:
<a id="mainForm:createDocumentPdf" class="Button Blue" onclick="if(typeof jsfcljs == 'function'){jsfcljs
(document.getElementById('mainForm'),{'mainForm:createDocumentPdf':'mainForm:createDocumentPdf'},'_blank');}return false"
style="background-image: none; display: none;" href="#">Something </a>
<a id="mainForm:createDocument" class="Button Blue" onclick="if(typeof jsfcljs =='function'){jsfcljs
(document.getElementById('mainForm') {'mainForm:createDocument':'mainForm:createDocument'},'');return false
"style="background-image:none;" href="#" tabindex="0">Document</a>
I tried a few things already but nothing works....
I tried: select window | titleOfThePDFWindow
but it does not work
so all I have now is:
clickAndWait | id=mainForm:createDocument

Categories