html hyperlink <a> with no refresh - javascript

the a tag is used in Jquery dropdown menus and generally in ajax . But the problem
it refeshes the page . How can I force it not to refresh ?
Thanks,

Use e.preventDefault() in the click handler and return false;.

Just add javascript:void(0) in href
Example: Home

You can add a handler for the click event on your anchors which after doing its work (executing and processing an Ajax request) returns False. This will prevent the event from propagating and calling the default handler (which is to GET the resource referred to by href).

I had a similar issue, and did this to resolve.
Remove the href attribute. Many people will set it to "#" because "it doesn't go anywhere". Not entirely true. It'll take you to the top of the page, which is a pain when you have a scrolling page.
Unfortunately, removing the href tag will remove the normal rules for your mouse pointer.
If you want the cursor to change when someone mouses over it, style your href-less a tags with :-
cursor : pointer
If you do those two things, your a tags won't go anywhere, won't scroll the screen and will look like regular links when a user mouses over them.

Related

What is the default action of 'a' tag?

When I see preventDefault, I found the defination is
The Event interface's preventDefault() method tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be.
The key word is :its default action should not be taken as it normally would be.
When it comes to a tag, I want to know the full set of default actions of an a element, not just click.
Go to Google
When I click this text Go to Google, I'll go to Google's homepage.
I had looked at HTML5 specification - the-a-element, did not found an answer.
The default action of a Hyperlink <a> lies within the href tag attribute. If the value of the href attribute is an external link (e.g. https://google.com) , the default action is; navigate to https://google.com link. If the specified href value is an internal link(i.e. ID of an element) then the default action is; move the scroll position to the top position of the element. One last thing, if the value is an internal link and the element ID doesn't exist, then, the default action is scroll to the top of the page.
Then, calling the preventDefault() method prevents the desired behavior.
Tag <a> has been created as hyperlink. You can wrap the majority of elements, like text and images, inside an <a> tag.
The simple message you wrote like
Go to Google
You can change it a little bit and you will have
YOUTUBE
And always you can add "target=_blank". It means that you will be redirected to new card in for example Chrome.
Example:
YOUTUBE

touch events not firing on anchor with no href

Consider the following:
<a class="addThing">link</a>
$(document).on('click','.addThing',function(){
alert('test');
});
On my iPhone I couldn't get a click event to fire on this anchor until I added href="javascript:" to the anchor. The anchor was added to the DOM after the page load. I'm able to recreate this by using JS to add an anchor to the DOM and confirmed it doesn't register the click, but if I added it on page load it does.
This suggests that the phone/browser/OS is somehow treating the elements differently if loaded to the DOM via javascript, but it's the same HTML.
I have a few questions:
Why does the href need to be there for the click event to fire.
Is there another method to get the event to register? (I was thinking something to do with tab index or something like that.)
Is this specific to OS/Device/Browser/Platform or is this something working as it should per W3C documentation?
Is javascript: the same as javascript:void(0). I came across the void(0) thing while researching this and I've always just done javascript:.
EDIT
Per http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
Answer to 1,2 & 3 apparently because the href in turn adds the CSS styling of cursor: pointer it makes it magically work. I don't have an android device to test.
Answer to #4 is apparently, it's 2016. Not sure what that means.
//use following css for a
a {cursor:pointer;}

Why are links in my Rails app doing this?

I have a link in my Rails app, it's supposed to be a toggle for jQuery, and looks like this:
<span id="listings-toggle"><a>sold listings</a></span>
The reason I haven't added an href="#" tag is because whenever I do that, upon clicking the link the toggle action will happen but then revert itself back to the default state. One div is shown by default, you click the toggle to switch to the other, but then within a second or two it switches back to the default state on its own. When I remove href, however, this doesn't happen and the toggle works fine.
I checked the requests that happen when I have href in the anchor tag and for some reason the GET route for the current page is always called upon clicking it. Why? Obviously removing the href line means that the mouse cursor doesn't indicate it to be clickable when hovered over. What might be going on? All I'm doing in my href tag is "#", so it shouldn't be calling the page again.
You need to prevent the default action on your click event using e.preventDefault() and that will stop the revert. Alternatively, you can add cursor: pointer to your style rules and not have to have a href attribute

Page Jumping - Can't stop it

I'm making mock ups for a flash app using HTML pages - I'm using HTML pages to demonstrate it inside a browser, plus it looks better pixel for pixel, and I'm using jQuery for rich animations on some pages.
I'm using normal <a> tags for my buttons which navigate through the HTML pages.
But if I have scrolled halfway down the page and click on a button at the bottom of the page - when it goes to the next HTML page it jumps back to the top of the page - this is obviously going to happen.
Is there any javascript or tricks that can prevent all <a> tags from jumping to the top of the page when navigating though my HTML pages. Or even better, if I could give my <a> tags a class so it doesn't interfere with my jQuery animations - because some use <a> tags.
My html pages are like so:
page-1.html
page-2.html
page-3.html
page-4.html
page-5.html
I'm not actually using jQuery or JavaScript to navigate through my pages, so when it jumps to page-2.html from page-1.html - it always jumps to top.
My <a> tags are using full href's <img ... />
I'm looking for something to include in the head of every HTML page to stop my page from moving when navigating using <a> tags.
I assume your a tag doesn't have a proper href attribute and you just put "#" in it (which is bad from a semantic and usability point of view).
Your browser is thinking you're clicking on an anchor, try to find it in the DOM, fail and then brings you back to the top of the page.
A way to avoid that is to bind a function on the click event of your a tags and call preventDefault()
$("a").click(function(event) {
event.preventDefault();
}
See the jQuery doc.
Edit due to huge edit on question
You need to use HTML anchor. On each of your html pages, give an id on the element you want your users screen to be aligned on.
<h1 id="the_place">The user screen will be aligned to this element</h1>
And on every link that leads to another page, add #the_place on the end of the href attribute
Go to page 2
That should do it =).
You could use
return false
at end of the function that handle your navigation or calling
e.preventDefault and e.stopPropagation
that stop the normal behaviour of the event (in your case a click event on an anchor).
Yes when you have a click event return false
$('a').click(function(){
return false;
}
This will break the standard a tag event
$("a").click(function(e) {
e.preventDefault();
}

Which is the best way to call a javascript function on a link

I want to add some links to some website of mine, but these links will call a javascript function and will not be underlined, also I want the cursor to be changed to a standard pointer. Which is the best way of doing it and why?
Right now I can think of two aproaches:
LINK
or
<span onClick="someFunction();" style="cursor: pointer;">LINK</span>
Which one do you think is better?
Since this isn't really going to be a link (functionally or visually) you should stick with a <span> (or <div> if you want a block level element).
"The HTML <span> tag is used for grouping and applying styles to inline elements. When the text is hooked in a span element you can add styles to the content, or manipulate the content with for example JavaScript." -W3
"The <a> tag defines a hyperlink, which is used to link from one page to another." -W3
If you're only calling a function I would use span.
I like v2, just because I would rather not have javascript functions in the url bar. What happens when they click the v1 link, and then bookmark?
I think a combination is better:
LINK
$(document).ready({
$('#myLink').click(function() { someFunction(); return false; });
});
If possible try putting a real URL in the href. By including a real href in the link you're allowing people to either experience the javascript version of your link (such as an ajax refresh) or right click and go to the real destination.
Of course this isn't always practical, your site might require that the action only be completed through a popup dialog. Ideally though the user should be open a link in another window/tab by following the href.

Categories

Resources