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.
Related
I am using chromedriver and I have the following webpage source:
<form id="stepLinksForm" name="stepLinksForm" method="POST" target="mainFrame">
<ul>
<li> Action One </li>
<li> Action Two </li>
<li> Action Three </li>
</ul>
</form>
After clicking anyone of the href, the browser goes to a new page but the url stays the same.
What I want to achieve is clicking the first href, i.e.
<li> Action One </li>
I have tried find_element_by_xpath, link_text and some other methods suggested on the Internet but none of them works.
I really appreciate if someone could help.
Instead of click you can call the javascript code directly:
browser.execute_script("submitLink('action_one.htm')")
which equivalent to javascript:submitLink('action_one.htm')
Or you can find the a by its text:
browser.find_elements_by_xpath("//a[contains(text(), 'Action One')]")
To click on the first href with text as Action One you can use either of the following options (Python Language Binding Art) :
linkText :
driver.find_element_by_link_text("Action One").click()
cssSelector :
driver.find_element_by_css_selector("a[href*='action_one.htm']").click()
xpath :
driver.find_element_by_xpath("//a[contains(#href,'action_one.htm') and contains(.,'Action One')]").click()
Update
As you are unable to locate the element through LINK_TEXT, CSS, XPATH and even after time.sleep() it is pretty much confirmed that the element is within an frame which is denoted by the <frame> tag.
Now as you are able to see them by "Inspect", locate the element within the HTML DOM and traverse up the HTML. At some point you will find a <frame> tag. Grab the attributes of the <frame> tag and switch to the intended frame first and then try to use the Locator Strategies provided in my answer. Here you can find a detailed discussion on How can I select a html element no matter what frame it is in in selenium?
I have a piece of code like below
<div>
<ul>
<li>Test1</li>
-------
-------
-------
<li>Test46</li>
</div>
It displays the html page with 46 links. The issue is when i scroll down and select the 46th or the ones just above this the page is going back to the top again. why is it happening so and is there any way to prevent it ?
href is blank thats why its going at top. You can use this instead of keeping blank:
Test46
href="" contains the URL "" which is a relative URL that resolves to "the URL of the current page".
When you click on the link, the browser follows it and goes to the current page.
As is normal (absent of any specific directive otherwise), when it goes to a page, it starts at the top.
If you don't want to link to the page: Why are you using a link in the first place?
If you just want something to dangle JavaScript from, use a button instead.
<button type="button">Test46</button>
You can style it to remove the default background colour and border, and set the colour scheme to match that of a link if you want it to look like a link.
An empty string in the href attribute <a href=""> means in modern browsers to go to the current page. This will basically just reload the current page, and as such it will go to the top.
One way to prevent from going to the top is to use href="javascript:void(0)", as mentioned by #Manwal or you can simply remove the href attribute completely (note in that case it will not show up as a clickable hyper-link).
I am using class names on my <a> elements so that I categorize them for our analytics(e.g. "form", "favorite", "carousel link", etc). The class name used does not have any css styling associated with it; the purpose is strictly to aid the analytics in categorizing the link. This is done by having some js that runs when the page loads and attaches an onclick function to all links. This function gets the text of the link and the link's class. An ajax http get is sent to our internal Analtyics application with the text of the link clicked and the name of the link class (as the category).
My questions regarding this are:
1) Since a given <a> (or any html element for that matter) can have one or more classes, is there a way to know where one class name ends and another begins? In my experience, I've seen the class names separated by only spaces so is parsing this even possible if one of the classes is a multi-word value separated by spaces?
2) I have a feeling this could be handled in a better manner. Any thoughts on this?
I'd go with a custom data tag for this:
data-analytics="form"
etc
That way you can be sure it is not going to conflict with any of your css / js hooks as you have effectively created a unique name space for your analytics references.
To expand on the answer by #SimonMason, who pointed out that using a data-* attribute gives you much clearer control over what to do with your analytics links. I notice you tagged this jQuery, which makes this easier still
See the snippet below
$(document).on('click','[data-analytics]',function(){
var analytics = $(this).data('analytics');
alert('You clicked a link tagged: ' + analytics);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-analytics="form" href="#">A form link</a> <br>
<a data-analytics="form" href="#">Another form link</a> <br>
<a data-analytics="carousel" href="#">A carousel link</a> <br>
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.
I have a href which pointed to #
<a href="#" id="bla" >Bla<a>
I have onclick function which displaying popup on click on that a href.
function doingClick()
{
//display popup
return false;
}
But after click symbol # every time added to the url in browser.
So for example if url was like that before I click on my link http://mywebsite.com
But after click on a href the url looking like that: http://mywebsite.com#
Is there any way to avoid such behavior?
To avoid this try adding return false;
Link
You could also use void(0)
Link
There's a popular question related to this (small religious war!) at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
Link
Do not forget to return the return of your function. Otherwise you will just call it without suspending the subsequent events.
While there are other valid solutions, I personally prefer this shorter solution.
Link
Another benefit is that this solution does not scroll to the top of the window.
So i think the better way of doing this is to remove href from a element
<a id="bla" class="href" >Bla</a>
and than to make it looks like a href just add simple css class
.href
{
color: #2289b8; //color of the link
cursor: pointer;
}
This idea comes to me when i looked in to source of SO add comment button
Instead of adding a href, you could add a style="cursor:pointer;"
this has the same effect of displaying it like a hyperlink, without the in-page anchor effect.
<a id="bla" onclick="return doingClick()" style="cursor:pointer;">Link</a>
The url is not pointed to nowhere. The URL is a relative URL to # in other words the URL resolves to <current_url># which in this case is http://mywebsite.com#.
To avoid this behaviour, you have to change the URL.
If you have a onclick-handler that returns false, then that should prevent the link being active :
link
You can also use javascript:void(0) as the link href.
In either case, be mindful of the decreased accessibility of your site when you use javascript to access some parts of it. Those users that have javascript disabled, doesn't have javascript enabled browsers or use a screenreader or other accessibilty tools may not be able to use the site.
If you don't get better answer, you could make nasty ugly workaround by placing script tag very early on page (on the beginning of body or in head) with following javascript:
if(document.location.href[document.location.href.length-1]=='#'){
document.location.href = document.location.href.substring(0, document.location.href.length-2)
}
I DO NOT RECOMMEND you to do this as will cause double requests to server when # is in url, but it is here if you have to.
The # is used for linking the element ID's, and will always be added to your URL when used in "empty" hrefs. What you could do, if it REALLY annoys you, is to remove it from location.href in your doingClick function
A simple workaround would be set the href empty:
<a href="" id="bla" onClick="alert('Hi');">Bla<a>
Which still works.
If you want to keep the "events" that happens in href="#"
You can simply leave it empty: href=""