I've seen this here and there, but can't find any information regarding this "thing".
Can anyone please provide us some sort of info regarding the #_self propose ?
<a href="#_self"> will jump to an element with the id of _self in the current page.
For instance, further below the page, there's a <p> element that looks like this:
<p id="_self"> ... </p>
It's pretty weird to have an ID with that name though, so probably a decoy anchor link for a jQuery function.
Related
I'm learning about JavaScript from an udemy tutorial and I try to make API calls. There is a website about recipes and I make API calls. And I have a misunderstanding because until now I knew that an href is a link, not a number.
This is a piece of code from index.html and the href is an id:
<li>
<a class="results__link results__link--active" href="#23456">
<figure class="results__fig">
<img src="img/test-1.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pasta with Tomato ...</h4>
<p class="results__author">The Pioneer Woman</p>
</div>
</a>
</li>
And this is a recipe list that I receive if I make an API call and I need to put the recipe_id which is a number in the href. And I don't understand how can I put a number in the href
Yes. If the href is a # flowed by an element id it is what is called an anchor link. It will get you to the element with the given id in the same page. You can read more about it here.
You can use a number as a hyperlink, in this case anyway.
The # means it is referring to an element with that id on the page. To my knowledge it is only classes that you cannot use a number at the beginning without escaping it.
You are also able to leave the current page and go to an element on a different page. You can do this by tailing your #id on to the url string you are used to seeing.
If you give more background into the project we might be able to give less vague answers.
Can a href be an ID?
In short, Yes.
href doesn't necessarily always mean an external link, it could link to an element on the current html page, which from the example you have provided i think this is the case.
If you map your recipe_id as a id to an element in your page, and you then say reference the recipe_id as a href when you click your href the page should scroll / navigate to the element with that id.
I want to parse any given link and see if there are any CSS selectors whose attributes maybe partially or completely matching a specific keyword.
If my keyword is print, I want every CSS selector in the given link that has print anywhere in it, it maybe present at either the name, id or class or anywhere.
For example if the link I give gets me the following html:
<body>
<div>
<p class="testprintrandom">Lorem ipsum</p>
<p id="randomstackoverflowrandomtext">Lorem ipsum</p>
Good Bye
<input type="text" placeholder="Your Email address">
</div>
</body>
If my keyword is "print" then I should get the selector "p.testprintrandom" as a part of it's class name had print in it. similarly if my keyword is "stackoverflow" I should get the id "randomstackoverflowrandomtext" as a part of the id has stackoverflow inside it. similarly if my keyword is email then I should get the CSS selector for the input tag as the placholder had email in it.
First off I want to know if this is possible and if so how can I achieve this, is there any specific library or framework I can use?
I will later be using the obtained selectors with puppeteer if that should influence the answer in any way.
Just a example/sample:
According to your question that you want to find an element with respect to its css matching selector see this:
suppose that i have a button with css = class="lx-stream-show-more__button gel-long-primer-bold"and i want to get the element matching with gel-long-primer-boldas in the end of css so i would do this:
from selenium import webdriver
browser = webdriver.Chrome()
browser.get(url)
bt = browser.find_elements_by_css_selector('.gel-long-primer-bold')
here in bt i will get all elements that ends matching with gel-long-primer-bold css in it. Then will perform further actions.
Note: It is just a example to give you idea. You will get better answer if you provide your code or provide better explanation to your question.
Hope this will help you! :)
Hey guys I am trying to click on an element called practitioner access on my company's web site and I have tried looking up documentation on stack over flow and have not figured out how to do this exactly I need help. What I am trying to do is click on the practitioner access popup/drop down and I have not been able to find the code to do it. Please see epic at the bottom:
This is how far I have gotten so far but protractor cant find the element
var pracaccess = element(by.xpath("//contains(#onclick, 'Practitioner Access')"))
pracaccess.click();
browser.sleep(10000);
I have tried to use these site to try and help myself but I can't piece it together. Any help would be appreciated. I am new to xpath as well.
new info to possibly help:
Here is a more expanded view
Also this is what it looks like in vb-script but its basically the same any suggestions?
Browser("ADP_2").Page("ADP_3").Link("html tag:=A","innertext:=Practitioner Access").WaitProperty "visible",True,30000
Browser("ADP_2").Page("ADP_3").Link("html tag:=A","innertext:=Practitioner Access").Object.Click
This XPath expression would look for a tag with the contains tag name, which does not exist. Instead, you've actually meant:
//a[contains(#onclick, 'Practitioner Access')]
Or, there is a nicer way to locate an a element by the link text:
element(by.linkText("Practitioner Access"))
The answer by alecxe is correct but if you want it to be as xpath:
element(by.xpath('//a[text()="Practitioner Access"]'));
This may have been answered elsewhere but I couldn't find a question which fit my circumstances.
I have a site page which out puts in DIVs records from a database, this the same DIV looped. In this DIV I have a button which brings up a modal box. This modal DIV however is not coded within the looped DIV.
I need the modal box to be able to get the ID of the record for the data which the looped DIV is showing.
The button is:
<a href = "javascript:void(0)"onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade').style.display='block'">
<div class= "obutton feature2">Reserve Book</div>
</a>
I assume I'll need to use java script somehow, but I don't know how to use it in this manner.
Ideally using some sort of form $_POST would be easiest with the form button having the set value of the $row->ID, but I can't make a form button also a can I?
Sorry for the possibly silly question, as I've said I've found similar things asked, but always find it hard to understand the full workings on other peoples scenarios as opposed to my own.
All help appreciated -Tom
I think the key to your answer is understanding how JS (and jQuery) uses this. When a function is called, the caller is almost always passed as the this variable. For example:
<button data-id="1234" onclick="runThisFunction()" value="run" />
<script>
function runThisFunction() {
//Do Stuff
var data_id = this.data('id');
};
</script>
In the above code, this contains the button that was clicked on. You can get lots of information from the this variable. In jQuery, you can even get to siblings, parents, or children in the DOM.
Here is an example solution to your question:
http://jsfiddle.net/yr6ds/1/
Here is a more elegant solution:
http://jsfiddle.net/yr6ds/2/
Is there a way to make a null link besides these methods?
Example
Example
Example
I don't mind something that makes the page jump to the top but I don't want it to alter the URL in the address bar. The ideal link would be one as similar as possible to the ones featured on navigation boxes on Wikipedia but there is much more to that link than meets the eye as it has a pretty large script associated with it. I'm just looking for something to put into the a tag.
Thanks in advance.
You just want something you can shove in the <a> tag? OK:
Example
Combine it with any of the href= methods from your question.
Given that a link that doesn't go anywhere is fairly useless, can I assume you want to kick off some JavaScript function when the link is clicked? If so, do this:
Example
The # method is the simplest, and is always compatible. Using a href=# however, will jump to the top of the page. To prevent the jump, simply reference an unnamed anchor. Like this:
<a href=#nothing >This link has a null href!</a>
<a href=#doesnotexist >This link has a null href!</a>
<a href=#null >This link has a null href!</a>
<a href=#void >This link has a null href!</a>
<a href=#whatever >This link has a null href!</a>
No, all the potentially valid alternatives are not done IMO. I made the following experiments with Chrome and Firefox, managing to identify 2 extra alternatives to the ones already suggested in the question and the answers.
The ones that failed (NOT null links):
This one is not rendered as a link at all, and isn't clickable either.
<a>null-link-1</a>
The next alternative when clicked, moved to document start - not a null link.
null-link-2
The next alternative when clicked, navigates away from document - not a null link.
null-link-3
The next alternative when clicked, when clicked, moves to document start - not a null link.
null-link-4
Now, here are the ones that worked : True Null Links:
Both of the alternatives below, when clicked, do strictly nothing - null links? YES.
null-link-5
This other one is almost the same as the above, but is offered as a true alternative, mostly for its brevity.
null-link-6
NOTE: One of the key differences between my working solutions and those of nnnnnn, is my preference of a blank href, otherwise, they work on the very same principle.
Wikipedia uses the third option. To use that, you can use this HTML:
link
And then attach an event handler with JavaScript:
// I assume `link` is set the element shown above.
link.addEventListener('click', function(e) {
alert("You clicked me!");
e.preventDefault();
e.stopPropagation();
return false;
}, false);
addEventListener should work in most modern browsers, but to be more compatible and more concise, you may wish to use a JavaScript library like jQuery:
$("a").click(function() {
alert("You clicked me!");
return false;
});
Different methods to make a null link.
Example link
OR
Example link
I think you could do well by leaving the href empty altogether, this will show the link to current page :
<a href="" >Example</a>