Prevent the default action on all anchor links in HTML using JavaScript code

Question

Prevent the default action on all anchor links in HTML using JavaScript code

I'm exploring the possibility of updating URLs using JavaScript alone, by refreshing content through AJAX.

This approach aims to avoid the unwanted side effects of traditional page refreshes, such as interrupting music playback or clearing input fields like chat messages.

Stopping the current music playback
Losing unsaved work, such as typed messages

I've recently started experimenting with this concept and here's what I have so far:


var links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(event){
        event.preventDefault();
    });
}
return false;

However, there are a couple of issues with this code:

The URL doesn't get updated
AJAX content is not loaded

My question is: how can I prevent the page from refreshing but still allow the URL to be changed?

javascript ajax preventdefault

Answer 1

Answer №1

Consider trying the following approach:

let links = document.getElementsByTagName('a');
let xhr;

for (let i=0; i<links.length; ++i) {
   links[i].addEventListener('click', handleLinkClick, false);
}

function handleLinkClick(event){
    event.preventDefault();
    if(xhr) xhr.abort();
    
    xhr = new XMLHttpRequest();
    xhr.onload = updatePageContent;
    xhr.open("get", this.href, true);
    xhr.send();
}

function updatePageContent() {
    // Implement logic to update page content using `this.responseText`
}

Answer 2

Consider trying the following approach:

let links = document.getElementsByTagName('a');
let xhr;

for (let i=0; i<links.length; ++i) {
   links[i].addEventListener('click', handleLinkClick, false);
}

function handleLinkClick(event){
    event.preventDefault();
    if(xhr) xhr.abort();
    
    xhr = new XMLHttpRequest();
    xhr.onload = updatePageContent;
    xhr.open("get", this.href, true);
    xhr.send();
}

function updatePageContent() {
    // Implement logic to update page content using `this.responseText`
}

Answer 3

Answer №2

If you're looking for a different way to structure your URLs, consider using a hash-based URL scheme:

someurl/#param1

someurl/#param2

...

Answer 4

If you're looking for a different way to structure your URLs, consider using a hash-based URL scheme:

someurl/#param1

someurl/#param2

...

Answer 5

Answer №3

const links = document.querySelectorAll('a');

for(let i=0; i < links.length; i++) {
    addClickEvent(links[i], 'click', disableDefault);
}

function disableDefault(event) {
    event = event || window.event;
   (event.preventDefault)? 
       event.preventDefault() : e.returnValue = false;
}

function addClickEvent(element, eventType, callback){ 
   if (element.addEventListener){ 
       element.addEventListener(eventType, callback, false); 
       return true; 
   } 
   else if (element.attachEvent){ 
       var result = element.attachEvent("on"+eventType, callback); 
       return result; 
 } else { 
       return false; 
 } 
}

Check out this solution I found on how to prevent default for all links inside a div using jquery

Answer 6

const links = document.querySelectorAll('a');

for(let i=0; i < links.length; i++) {
    addClickEvent(links[i], 'click', disableDefault);
}

function disableDefault(event) {
    event = event || window.event;
   (event.preventDefault)? 
       event.preventDefault() : e.returnValue = false;
}

function addClickEvent(element, eventType, callback){ 
   if (element.addEventListener){ 
       element.addEventListener(eventType, callback, false); 
       return true; 
   } 
   else if (element.attachEvent){ 
       var result = element.attachEvent("on"+eventType, callback); 
       return result; 
 } else { 
       return false; 
 } 
}

Check out this solution I found on how to prevent default for all links inside a div using jquery

Answer 7

Answer №4

Experiment with this technique, using jquery .load()

html

<div class="1">content 1</div><div class="2">content 2</div>
<a class="1" href="#">update 1</a>
<a class="2" href="#">update 2</a>

js

$(function() {
var url = "http://sample.org";
    $("a").each(function(i, el) {
        $(this).on("click", function(e) {
          e.preventDefault();
            if (i === 0) {
              $("div.1")
              .load(url + " #" + $(el).attr("class"));
             };
            if (i === 1) {
              $("div.2")
              .load(url + " #" + $(el).attr("class"));
            };
        })
    });
});

Check out the jsfiddle demo http://jsfiddle.net/guest271314/dL4b4/

Answer 8

Experiment with this technique, using jquery .load()

html

<div class="1">content 1</div><div class="2">content 2</div>
<a class="1" href="#">update 1</a>
<a class="2" href="#">update 2</a>

js

$(function() {
var url = "http://sample.org";
    $("a").each(function(i, el) {
        $(this).on("click", function(e) {
          e.preventDefault();
            if (i === 0) {
              $("div.1")
              .load(url + " #" + $(el).attr("class"));
             };
            if (i === 1) {
              $("div.2")
              .load(url + " #" + $(el).attr("class"));
            };
        })
    });
});

Check out the jsfiddle demo http://jsfiddle.net/guest271314/dL4b4/

Answer 9

Answer №5

Give it a shot

 $("a[href=#]").on("click", function (event) {
    event.preventDefault();
 })

Answer 10

Give it a shot

 $("a[href=#]").on("click", function (event) {
    event.preventDefault();
 })

Prevent the default action on all anchor links in HTML using JavaScript code

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Mastering MongoDB update functions in JavaScript

Display a React Native modal within another modal

Receiving binary information through enyo.Ajax

Why does the jQuery hide function fail to work on a div with the same class after an ajax

Guide on removing the parent JSON array while retaining the child JSON array

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

When a POST request fails, which AJAX event is triggered?

Best practices for managing JWT tokens on the front-end with fetch requests and secure storage methods

Extract the element from one array that is not present in another array

Strategies for enabling form resubmission in AngularJS when encountering a Sequelize validation error

Guide on how to modify the color of a single row within a table with just a click

The .angular-cli.json file is causing issues with loading scripts

Retrieving a partial view using an XMLHttpRequest

Align component within material-ui grid

extract elements from dataset

When toggling visibility with JS, the Bootstrap Grid Row may not center-align as expected

What makes it possible for Vue v3 to handle variables that are undefined?

Combining various Google calendar feeds into a single JSON object using JavaScript

When initializing React Native, the Android, iOS, and app folders seem to be missing

Can files be saved using AngularJS JavaScript with Windows-1250 encoding?