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.

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.

• javascript
• jquery
• html
• anchor

• 2 It's not very clear what you're trying to say? What exactly do you wanna do with the value? – user1248084 Commented Jan 5, 2015 at 11:28
• I think he need to change the url without redirect – Shijin TR Commented Jan 5, 2015 at 11:48
• I need to change the URL without redirect as Shijin said. – Michel Commented Jan 5, 2015 at 11:54

4 Answers 4

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

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./blog/html5-changing-the-browser-url-without-refreshing-page/

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.

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.