I have two links inside a button but the links don't seem to work on Firefox.
<button class="btn login">
<b>Log In</b>
|
<b>Sign Up</b>
</button>
I tried JavaScript onclick and redirecting - even that is not working.
This doesn't work because it is not allowed by HTML5:
Content model: Phrasing content, but there must be no interactive
content descendant.
Interactive content means any of the following elements:
a audio (if the controls attribute is present) button details embed
iframe img (if the usemap attribute is present) input (if the type
attribute is not in the hidden state) keygen label menu (if the type
attribute is in the toolbar state) object (if the usemap attribute is
present) select textarea video (if the controls attribute is present)
If it does work in some browsers it's just because they're trying to
play nice with malformed markup and provide some sort of meaningful result.
In other words: rewrite your HTML, it's a mess. If you want the links to look like they're in a button, put them in a div element and style that to look like one, instead of abusing semantically wrong elements for it.
<a> is not allowed inside <button>
Phrasing content, but there must be no interactive content descendant.
<a> is interactive content (regardless of whether it has an href apparently, but yours do). Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>s
I have two links inside a button but […]
“Yeah, but let me stop you right there …”
http://www.w3.org/TR/html5/forms.html#the-button-element:
4.10.8 The button element Content model: Phrasing content, but there must be no interactive content descendant.
--->
Interactive content is content that is specifically intended for user interaction.
⇒ a, audio […]
So, if you are writing invalid HTML, expect unexpected behavior ;-)
You can add this in the button element.
onclick="window.location.href='/link1'"
Example
<button onclick="window.location.href='/login'">Login</button>
That's invalid HTML,
Do something like this instead:
<ul>
<li>Log in</li>
<li>Sign up</li>
</ul>
Use javascript: window.location for the button.
<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>
Or, you can put the button inside the anchor, it won't have the exact same look since it'll be two different buttons, but it will be a button that acts as a link. It's still not technically correct but it does work in FireFox.
<a href="/login">
<button class="btn login">
<b>Log In</b>
</button>
</a>
<a href="/signup">
<button class="btn login">
<b>Sign Up</b>
</button>
</a>
Related
I am trying to implement a click event to get the details of every entry from this page: https://www.mrlodge.de/wohnungen/
The Html markup of the button which links to the Details looks like this:
<li class="action mrl-list__item details-bt">
<button>
<span class="icon icon-arrow-right">
::before
</span>
"Details"
</button>
</li>
I have some experience with LUA and Splash but have no idea how to attack this problem since there is no actual href link given in the html markup. I have read about the Splash method mouseclick(), which needs pixel directions. However I am looking for a more generic solution with Splash.
Please help
This page doesn't use javascript. Try disabling javascript and the page still works. The page works with forms instead.
>>> fetch('https://www.mrlodge.de/wohnungen/')
2019-07-10 14:56:41 [scrapy.core.engine] INFO: Spider opened
>>> response.xpath('//form/input[#name="name_url"]/#value').extract()
[u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-maxvorstadt-11609/', u'/wohnen-auf-zeit/4-zimmer-haus-muenchen-fuerstenried-10756/', u'/wohnen-auf-zeit/3-zimmer-wohnung-muenchen-lerchenau-11653/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-glockenbachviertel-4180/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-berg-am-laim-11625/']
I have this code.
<li class="active">
Weekly Payment
</li>
<li>
Advance Payment
</li>
<li>
Expenses
</li>
My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.
Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>
You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.
$("button").click(function(){
window.location.hash = $(this).data("href");
});
#first, #second, #third {
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
You can try to take a look at this
Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?
<button type="button">
hello
</button>
if it is for the style you can just apply a style to the a tag like this Go to Google
Goodluck!
Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:
click
In this case it will take you to the anotherpage.aspx page's element who's id is 'something'.
Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.
Here is a great link to show the difference between anchor and button tag. Check it.
Thanks.
Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't
You can use the styles over <a class="your-btn-style"> to show your anchor like a button.
If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :
Advance Payment
I also used this approach in my project :
I have a page at http://www.entrepreneuronfire.com/podcast/edwinhavens/
With an image at http://i.imgur.com/u59IAXB.png
I need to get the download link (i.e. hxxp://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3) of the MP3 file at class named spp-dloada(as web inspector detects) but all my 48 hours attempt ended in smoke.
That download link shows well in chrome (as
<a href="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" download="Edwin_Havens.mp3">
<span class="spp-dloada"></span>
</a>
) but not in FireFox 38 and IE11 but i need them in these two browser.
For FireFox and IE11 HTML Snippet is
<div class="spp-controls">
<span class="spp-speed"/>
<span class="spp-share">
<div class="spp-share-options" style="display: none;">
<a class="spp-share-icon spp-twitter-btn" href="">Share</a>
<a class="spp-share-icon spp-fb-btn" href="">Share</a>
<a class="spp-share-icon spp-gplus-btn" href="">Share</a>
<!--Share-->
</div>
</span>
<span class="spp-dload"/>
<span class="spp-play"/>
Oddest thing is when i click on the download button (as shown in the above image)
iframe changes into
<iframe class="spp-downloader" style="display:none" src="http://www.entrepreneuronfire.com?spp_download=http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3"/>
What have tried so far are-
Software:firebug, temper data,modifyheaders
Language:XPATH, CCS Selector, Jquery
EDIT ---- Sorry for belated adjunct
I need pure XPATH expression too SINCE DIFFERENT BROWSER BEHAVES DIFFERENTLY
N.B. HTML SNIPPET IS FOR CHROME ONLY
The span inside of the link has a class, so you can just grab the parents 'href' attribute using jQuery like so:
$('.spp-dloada').parent().attr('href');
Fiddle
(This is of course assuming you have access to modify the code on this website.)
RE: Edit
It doesn't look like IE supports XPath, according to the answers here: jquery select element by xpath
If you view the source of the page, you can see that the source is different from the generated source you see when you inspect the element.
The link you are trying to fetch is not in the actual page source, however, this is:
<div class="smart-track-player stp-color-ff6100" data-url="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" data-download="true"data-color="ff6100" data-title="Edwin Havens" data-artist="John Lee Dumas chats with" data-uid="IU5Uvc7G" ></div>
I'm guessing the page then has some Javascript functionality which generates a clickable link from this markup.
Try using this jQuery code to access the download url:
$('.smart-track-player').attr('data-url');
An XPath expression to fetch this node would be something like this:
//div[#class='smart-track-player stp-color-ff6100']
<div class="base-view app-loaded" data-ng-class="cssClass.appState">
<div class="ng-scope" data-ng-view="">
<div class="ng-scope" data-ng-include="'partial/navigation/navigation.tpl.html'">
<div class="feedback-ball feedback-ball-show feedback-ball-big" data-ng-class="feedback.cls" data-ng-click="outside($event)" data-feedback-ball="">
<span class="close-button"></span>
<h2 class="ng-binding">Welcome to Garbo</h2>
<div class="ng-scope ng-binding" data-ng-bind-html="feedback.html" data-ng-if="feedback.html">
<p>Here you can play in style in a safe and secure environment.</p>
<p>
<a class="btn" href="/account">My Account</a>
<a class="btn" href="/deposit">Deposit</a>
</p>
</div>
</div>
</div>
I want to find and click /account button inside data-ng-bind-html="feedback.html", I can find data-ng-bind-html="feedback.html" but I could not find account button inside it. when I try to find account button, it gives me error that page has multiple account button so be more specific.
I tried element.().element() but it didnt work, please help
The problem is that webDriver is finding more than one element that matches. You have element for finding just one, and element.all for taking an array of elements, then you can use .get() and the index of the element, or first() or last(). You can do,
element(by.css('[data-ng-bind-html="feedback.html"]')
.element(by.cssContainingText('.btn', 'My account'));
If it doesn't work then you might have more than one, if so, you can use,
element(by.css('[data-ng-bind-html="feedback.html"]')
.all(by.cssContainingText('.btn', 'My account')).first();
But there you will have more than one button in your HTML, webDriver will get only one,
another thing, is to use the count() that gives you the length of the array of elements, and you can know how much you have.
element calls can be chained to find elements inside other elements, so your element().element() solution should work.
Alternatively, you can construct an xpath expression to reach the link inside the appropriate div:
element(by.xpath('//div[#data-ng-bind-html = "feedback.html"]//a[#href = "/account"]'))
hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.