linkbutton best practice
Posted: September 16th, 2022, 9:06 am
In EASYCommerce, on the work with accounts page, there is a link to open a widget. It doesnt always show, only if the account has users. As a design choice, these are links instead of buttons
Buttons have a property DisplayType: LinkButton, Button, ImageButton
If I have a button to open a model window, I thought we could change it to LinkButton to change style to look like a link. but actually it is changing it to be a hyperlink which has an href.
a tags (anchor tags) are designed to work through href, so when you set an onclick, it still is processing the href. so it is like you have 2 click events at the same time.
if it is text, it will try to forward you to that page as a relative page
if starts with a #, it will look for the id that matches the rest of the text afterwards
if its blank, that is equivalent to "this page" and will scroll to the top of the page.
There is no official way to disable this.
This is causing something unexpected to happen
Bug - Steps to recreate:
1. scroll to the bottom of the page, find a record with the "ViewAllUsers" link to click
2. The page will start to scroll up to the top of the page
3. The model window will open, which stops the page from scrolling up.
4. User is somewhere in the middle of the page with the widget open
So this highlights a few issues we should talk about:
Possible solutions:
could have a link wrapped in another element and that element could trigger the click event and tell it to prevent passing the click to the link
we could put a javascript call directly in the href
href="javascript:alert('Hello World!')"
Or change the href to this so it doesnt do anything
href="javascript:void;" onclick="alert('Hello World!');"
In 4.8 we used to do this:
href="#Undef" onclick="alert('Hello World!');"
In 4.8, this is where the #Undef came from that is at the end of urls, which caused issues and we were happy to see removed from 5.1. This shouldnt be added back as a solution, but I see why we did it.
Buttons have a property DisplayType: LinkButton, Button, ImageButton
If I have a button to open a model window, I thought we could change it to LinkButton to change style to look like a link. but actually it is changing it to be a hyperlink which has an href.
a tags (anchor tags) are designed to work through href, so when you set an onclick, it still is processing the href. so it is like you have 2 click events at the same time.
if it is text, it will try to forward you to that page as a relative page
if starts with a #, it will look for the id that matches the rest of the text afterwards
if its blank, that is equivalent to "this page" and will scroll to the top of the page.
There is no official way to disable this.
This is causing something unexpected to happen
Bug - Steps to recreate:
1. scroll to the bottom of the page, find a record with the "ViewAllUsers" link to click
2. The page will start to scroll up to the top of the page
3. The model window will open, which stops the page from scrolling up.
4. User is somewhere in the middle of the page with the widget open
So this highlights a few issues we should talk about:
- Right now there is no way to make a button look like a link and stay a button without changing the css. Should there be?
- There should be EASYProcess changes so the scrolling doesn't happen if we wanted to keep it like that
Possible solutions:
could have a link wrapped in another element and that element could trigger the click event and tell it to prevent passing the click to the link
we could put a javascript call directly in the href
href="javascript:alert('Hello World!')"
Or change the href to this so it doesnt do anything
href="javascript:void;" onclick="alert('Hello World!');"
In 4.8 we used to do this:
href="#Undef" onclick="alert('Hello World!');"
In 4.8, this is where the #Undef came from that is at the end of urls, which caused issues and we were happy to see removed from 5.1. This shouldnt be added back as a solution, but I see why we did it.