We Keep Coding

Page reloads when clicking anchor element

I'm working on a web application which is a traditional aspx (asp.net) web forms app but has had some angular 6 apps incorporated into it.
I've been tasked with fixing a bug that causes the browser to refresh when clicking on an anchor element with a href="#".
I'm not sure what's causing the whole page to reload.
Strangely when I open dev tools in Chrome, choose the network tab and select disable cache the page only refreshes the first time I click a link and any other subsequent clicks work fine. This might be to do with the fact that after the first time I click it the browser url now contains the # at the end of it.
I know this seems a bit random but I wondered whether anyone had any theories on what may cause the reload in the first place.

It's hard to tell what could be causing this without seeing any code. The most common solution I've used when I get this behavior is a prevent default. You can do something like
<a href="#" (click)="$event.preventDefault()">
Or if you already have a click event then pass in $event as a parameter to your function then preventDefault in the function you are calling. This would look like:
Html
<a href="#" (click)="someFunc($event)">
and in your ts:
someFunc(event) {
event.preventDefault();
// rest of your code here
}

This answer is related to the question and it's the first one that comes up in Google so I hope this is useful.
I have some external web components that use regular anchor tags with hrefs that point to routes in my angular app. Clicking the href causes a full page reload. This is because I'm not using routerLink - but, in my case, I can't.
So, my work around is:
#HostListener('window:click', ['$event'])
onClick(e: any) {
const path = e.composedPath() as Array<any>;
const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
const href = firstAnchor.getAttribute('href');
this.router.navigateByUrl(href);
e.preventDefault();
}
}
Depending on your application, you might need to make some other checks e.g. is the target _blank, is it an external url etc.

change your a tag code as below
A Tag
this will invoke yourClickEvent(); without page reload
check the stackblitz here stackblitz

If you don't want to reload the page use $event.preventDefault()
<a href="#" (click)="$event.preventDefault()">

Try using debug tools to select the element, then click Event Listeners and then the Click event to see what is listening. Perhaps you can track it down that way.
You could also simply paste this into the console to trigger a break, and then click any of the offending elements:
['unload', 'beforeunload'].forEach(function (evName) {
window.addEventListener(evName, function () {
debugger; // Chance to check everything right before the redirect occurs
});
});
source: Break when window.location changes?

As you are using angular routes, try to use this notation:
<a [routerLink]="['./']" fragment="Test">
As explain by this comment: https://stackoverflow.com/a/38159597/4916355

use href="javascript:void(0);"
The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.

Use [routerLink] instead of using href = "", and use click event to call your calling method in the typescript file.
ex:
// downloading the file based on file name
<a [routerLink]="'file://' + 'path'" (click)="downloadFile(templateDocument.fileName)">{{downloadDocuments.fileName}}</a>

Since you have mentioned the web app is asp.net webforms, can you please let us know
Whether the link is asp.net hyperlink control. If so,
AutoEventWireUp could cause the link to be automatically submitted:
Please have a look at this link
If you do have asp.net server controls on the page, then you could disable by setting
#Page AutoEventWireup="false"
For the entire project, this can be disabled by setting in web.config:

How to load javascript after click in to another url

How can i add this JS into a link:
Im in page1.php;
I need click in some link Link
And when i go to page2.php some code load this JS:
javascript:void(lz_chat_change_state(true,false));
Any help?
It seems to be simple but not for me......

Solved !
If page1 has ?chat i execute the javascript in page2;
Link in page1.php?chat
In page2.php
if (isset($_GET['chat'])) {
include_once("js-externo.php");
}else{
// Fallback behaviour goes here
}
In file js-externo.php i put:
window.onload = function() {
void(lz_chat_change_state(true,false));
}

Do you mean you want to call that function when you click on the link?
If yes
Make javascript file seperate.
Inside the link you put a "onclick" event and call the javascript function as:
<a href="page2.php" onclick = "lz_chat_change_state('true','false')">
If you want things to change after going to page2.php particularly then you need to use sessions. Pass a value from page1 to page2. But looking at your function (which I assume is being used as a toggle) it's not necessary.

javascript execute a tag on load

I have an html page with an a tag in it, and I want to know how can I make a Javascript code that executes it when the page loads (do the same action as if an user had made click on it)
Here's the code of my a tag
<div class="social-login">
<div class="btn btn-facebook">Facebook</div>
</div>
What I want is to automatically register, if possible without the user seeing the original html. (I want this because a user can get to this html from different ways, and in one of them I want to automate the registeration)

automatically register without the user seeing the original html, add code at the beginning of html
location.href="{% url socialauth_begin "facebook" %}"

Try triggering a click on the document.ready() function when using JQuery:
$(document).ready(function()
{
$(".social-login a").trigger("click");
});

Using Hashes in URL to Run Script onload

I was wanting to make a link similar to this
www.mysite.com/profile/#openTheme
When the link has the hash "#openTheme" i want it to run a function on the page when the page is loaded.
Is there a way to set an Anchor like this eg:
<a name="openTheme" onActivate="runScript()">
Or is there a better way of doing it? Eg, running a script onload to find any location hashes and using if/else?
Thanks.

You can pick this up using this:
self.document.location.hash
This will return #openTheme in this case. You can then do an if, so...
if(self.document.location.hash == '#openTheme')
{
//do something
}

You can register the window.onhashchange event, which will fire whenever the user types a new hash into the address bar, or a link is clicked that points to a hash on the current page, or JavaScript sets location.href to "#something-or-other".

Can we use 2 different url on same anchor tag for javascript disabled and enabled condition?

Can we use 2 different url on same for javascript disabled and enabled condition
If javascript is enabled then link should be <a href="link1">
and If javascript is disabled then link should be <a href="link2">

You could set the JS disabled URL in the markup, then on page load use JS to replace the url with the enabled URL.
HTML:
<a id="id" href="js_disabled_url" />Link</a>
jQuery example:
$(function() {
$('#id').attr('href','js_enabled_url');
});
This should degrade gracefully.

Yes, just write a JavaScript which finds the element you want to change the href of when the page has loaded.
Example using JQuery:
$(function () {
$('a.changeable').each(function () {
$(this).attr('href', 'http://google.com/lol');
});
});
(Untested, but you get the idea.)
So basically, if the user has disabled JavaScript, the default link is used, otherwise the new URL given by the script is used. So your HTML should contain the link that should be used when JavaScript is disabled.

If I understand you correctly, you can have one url on the html page, and if javascript is working, have the javascript change the url on the anchor.
That way you can ensure that the second url only works if javascript is enabled.
The problem is that if javascript was enabled when the page was loaded, and later disabled then you won't know.
But, if you just have an onclick on the anchor, then you can change the url when it is clicked on, then it will always work correctly, as, if they disable javascript after the page is loaded it will still go to the non-javascript url, and if the onclick works then it will go to the other url.