Why are links in my Rails app doing this? - javascript

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

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

Switch device. Tabbing onto button default behaviour

I'm having a hard time finding any resources that talk about best practice, default behaviours and so forth.
Basically, I have a button on a page. It doesn't do anything, I essentially have a canvas element and just needed a way for the user to be able to tab onto the page.
So using a switch device, I can navigate to the button, and on clicking on the button, it jumps me back up to the url address bar. The behaviour I'm after is on selecting the button it still stays on the same page.
I've tested other websites and it looks like the default behaviour is that once you select a button it jumps to the top of the page.
Could anyone point me in the direction of any resources or anything that confirms or talks about this?
I essentially only have this:
<button tabindex="1" class="action_button">Action trigger button</button>
and a
<canvas></canvas> element
Perhaps this relates to the default type of buttons being submit.
Does adding type="button" to the button change the behaviour you're seeing?
Yes, this will happen unless you add some script to the button. If you have no other action for the button you can use this:
function() {return false;}
But if the button doesn't do anything you should remove it - people who rely on keyboard navigation don't usually like having to work their way though unnecessary controls. If there is nothing interactive then don't make them tab into the page. (Also there is no need to add tabindex to a button, it takes focus natively.)

Prevent same function from firing twice

I'm using jquery's bPopup() to open a modal window. When the user clicks a button, jquery loads an ajax page and then shows the modal windows. Due to this small delay when loading the page, the button remains active, and if the user clicks twice, it will fire twice, making two ajax requests to the server and opening two windows.
Is there a simple way to prevent this from happening? Since it's relatively a common problem, I wonder if there's a "right" way the pros handle it.
I've tried assigining the popup to a window.object, so that it would be overwritten on the second call, but it's still opening two popups.
That depends on what UX you're after, but I'd suggest you disable the button.
That way your user will:
Know the click was "registered".
Not try to click again.
Not crash / confuse you code.
EDIT
According to the comment, the "button" is actually not a <button>, but an element with an onclick handler. So:
You can disable the click handler by reversing what you did to set it (removeEventHandler, onclick=null...), but you'd then have to set it back once the pop-up is done, and that might be quite annoying.
You'd have to somehow manipulate the UI to indicate the button was clicked and is disabled. Could probably be quite simple to do with a CSS class.
But really, you're probably better off having 2 "versions" of your button element (<div>...), with only 1 visible at a time, with the other hidden via display: none. The "clicked" version should not have a click event handler set at all. Then, when the button is clicked, you immediately switch between the 2 (can be done with a single CSS class), and once the pop-up is done, switch back.

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();
}

html hyperlink <a> with no refresh

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.

Categories

Resources