How can I load JavaScript page refresh after click on link class?

Question

How I load JavaScript main page refresh only after user clicks on specific link class? I need it when the user clicks on the link, some JavaScript (or PHP, or whatever) detects that he has clicked on this class link and only then refreshes the origin page.

Example:

When user clicks on:

<a class="link_id" target="blank" href="http://externallink.com">external link</a>

JavaScript below auto load:

window.location.reload();

PS: I can not use the onclick="location.reload()", button or similar method for many reasons (my project particularities, for example). Moreover, my HTML will be extensive and dirty. Moreover, it is not safe for the project to let users know that the refresh is through the onclick direct on link. So I'm looking for another way to do this.

`PS: I do not want to use "onclick" method.` --- why not? That's literally what it was made for. — vityavv, Mar 03 '18 at 02:53
I need load javascript code based in link id. Onclick method does not fit my context and purpose. Thanks. — ukraniu, Mar 03 '18 at 02:58
`Onclick method does not fit my context and purpose` --- not true. Literally exactly your context and purpose — vityavv, Mar 03 '18 at 02:59
"How I load javascript page refresh only after user click in specific link" - After the user clicks. That's what onclick is for. — Gorgamite, Mar 03 '18 at 03:00
Possible duplicate of [Button that refresh page on click](https://stackoverflow.com/questions/29884654/button-that-refresh-page-on-click) — Heretic Monkey, Mar 04 '18 at 14:46

vityavv · Accepted Answer · 2018-03-04T14:36:50.517

0

onclick does exactly what you said. However, if you really don't want to use it, you can always do this:

<a id="link_id" href="javascript:location.reload()">link</a>

As exemplified by this snippet:

let i = 0;setInterval(() => {document.getElementById("span").innerHTML = i;i++}, 50);

<a href="javascript:location.reload()">link</a><br>
<span id="span"></span>

EDIT: Since you actually told me what you wanted in the comments, I present you with code!

Since you only have one element with the ID link_id you can do any of the following:

<a id="link_id" href="http://link.com" onclick="location.reload()">link</a>

OR

document.getElementById("link_id").onclick = location.reload;

OR

document.getElementById("link_id").addEventListener("click", location.reload);

If you have multiple elements under one ID, you seriously need to reconsider your HTML knowledge

YET ANOTHER EDIT: as the air of mystery and vagueness unfolds, I see that you have multiple elements with one ID, or seem to. In that case, use class, and then do this:

Array.from(document.getElementsByClassName("<classname>")).forEach(el => {
    el.addEventListener("click", () => {location.reload();});
});

I REALLY HOPE THIS IS THE FINAL EDIT - Replace <classname> with the name of your class, of course

Array.from(document.getElementsByClassName("<classname>")).forEach(el => {
  el.addEventListener("click", () => {
    if (!sessionStorage.getItem("reloaded")) {
      sessionStorage.setItem("reloaded", true);
      location.reload();
    }
  });
});

Check out this jsfiddle - it works: https://jsfiddle.net/gbdu3vpm/1/

edited Mar 04 '18 at 14:36

answered Mar 03 '18 at 02:58

vityavv

1,482
12
23

then you can't do it without onclick – vityavv Mar 03 '18 at 03:08
Does not exist a javascript code that allows the "window.location.reload" function only if user clicks on the "link_id" id? – ukraniu Mar 03 '18 at 03:13
See the edit, please. However, I did use `onclick`, since **that is your only choice** – vityavv Mar 03 '18 at 03:17
Hi Zevee. `document.getElementById("link_id").onclick = location.reload;` loads without clicking the link id. `document.getElementById("link_id").addEventListener("click", location.reload);` does not work. – ukraniu Mar 03 '18 at 03:42
How about the first one? Also, I do not understand what you mean by `clicking the link id`. If you gave some more context, like if you had any event listeners on the element, maybe I could help out more – vityavv Mar 03 '18 at 05:16
Zevee, it's simple: I need it when the user clicks on the link, some javascript (or php, or whatever) detects that he has clicked on this id link and only then refreshes the page. – ukraniu Mar 03 '18 at 14:25
Okay. Tell me why `link` didn't work. Also, please tell me if you have any event listeners on the id. You're being extremely vague about context here – vityavv Mar 03 '18 at 14:27
It works. But I will have to insert this in all the links. My html will be extensive and dirty. Moreover, it is not safe for the project to let users know that the refresh is through the "onclick" direct. So I'm looking for another way to do this. – ukraniu Mar 03 '18 at 14:54
Please see the edit. And **PLEASE** stop being so vague – vityavv Mar 03 '18 at 14:58
Yes Zevee, I have multiple elements with one ID :/ Why can not I do this? Yes, I can use class too. – ukraniu Mar 03 '18 at 16:31
Because it's literally not what ID is for. From MDN: "The id global attribute defines a unique identifier (ID) which **must be unique** in the whole document." Therefore, your HTML is invalid. Use a class – vityavv Mar 03 '18 at 16:37
Thanks Zevee :) I updated my question. Can you update your answer based on my question update? You can also help me insert a new functionality in this code? I need that `location.reload` happen only once per user browser session. – ukraniu Mar 03 '18 at 19:03
Edited. Hopefully for the last time – vityavv Mar 04 '18 at 14:37
Yeah, I know, but they're not really acting that way. Just being extremely vague and confusing and contradicting. – vityavv Mar 04 '18 at 15:30
Thanks @zevee. I just wanted to do a refresh page differently from the traditional way. Sorry if I was vague. I'm sure your answer will help other users who want to make differently. Zuckerberg made different, Bill Gates made different, Steve Jobs made different, now Zevee is helping to make different ;) Thank you! – ukraniu Mar 04 '18 at 16:11

How can I load JavaScript page refresh after click on link class?

1 Answers1