How to prevent page refresh when tag clicked?

Question

I need to pass a parameter into the URL and at the same time prevent page from reloading when I click any <a> tag with a blank href attribute (<a href="">)

Is there a way to do this with JS/jQuery?

I have this jQuery already

$('.list-group-item a').click(function (event) {
  event.preventDefault();
});

But when I click <a href="inbox/1">Message</a> (any anchor with an href) preventDefault stops that value from being passed into the url.

Can anyone help?

Thanks in advance.

Answer 1

window.location.hash="inbox/1" can update the hash value in the url. This can be done with the event preventDefault code.

Answer 2

You can use Attribute equal selector to prevent click event in case of blank href like,

$('.list-group-item a[href=""]').click(function (event) { // where href are blank
   event.preventDefault();
});

And I would like to suggest don't make empty the href's, you can place # if no links are there.

Answer 3

Try the following code

  $('.list-group-item a').click(function (event) {
   event.preventDefault();
   var url = $(this).attr('href');
   window.history.replaceState("object or string", "Title",url); // this will change your url
 });

For More details http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Answer 4

Use jQuery's fancy selectors, especially the attribute equals one.

Using it, you can select only <a> tags which have a blank href attribute:

$('.list-group-item a[href=""]').click(function(event) {
  event.preventDefault();
});

The $('.list-group-item a[href=""]') selector narrows the collected elements to only those anchor tags with a class of list-group-item and a blank href.

That means all other anchor tags will work fine.