views:

406

answers:

3

I have an onclick function that I want to add an anchor to the href value. I do not want to change the URL's, because I need the site to still function for people without javascript / for SEO purposes. so here is what I have tried using (amoung other things):

jQuery('a[rel=ajax]').click(function () {
    jQuery(this).attr('href', '/#' + jQuery('a'));
});

An orginal link looks like this:

http://www.mysite.com/PopularTags/

URL re-write should look like this, so that AJAX will work:

http://www.mysite.com/#PopularTags

I was able to get some URL's to work by setting a links name value to the same as the href, but it did not work for links with sub-sections:

http://www.mysite.com/Artist/BandName/

So not really sure. Thanks for the help.

A: 

I believe something like

jQuery(function(){
  jQuery('a').each(function(){
    jQuery(this).attr('href','/#'+jQuery(this).attr('href'));
  });
});

will do the job. Read as: At page load, loop through all your links, and replace their href attributes with #{old href}.

Billiam
You can set `this.href` instead of `$(this).attr('href')`. Native JavaScript ftw! (You’ll still need `$(this).attr('href')` to _get_ the actual `href` attribute, though.)
Mathias Bynens
This added the "#" symbol, but the orginal link still appeared after. The end result was like this: "http://www.mysite.com/#/PopularTags/"
brandon14_99
+3  A: 

It depends how you code your links in the HTML. If you’re linking to http://www.mysite.com/PopularTags/ using this:

<a href="/PopularTags/">Popular Tags</a>

You can simply use this:

$(function() {
 $('a[rel=ajax]').each(function() {
  var actualHref = $(this).attr('href');
  this.href = '/#' + actualHref.substring(1, actualHref.length - 1); // cuts off the first and last characters (‘/’)
 });
});

This will result in the following HTML:

<a href="/#PopularTags">Popular Tags</a>

Note that we can set this.href instead of $(this).attr('href'), but we still need the latter to get the actual href attribute. this.href always holds a full URI, including protocol, domain name, etc — which we don’t want in this example.

Mathias Bynens
This was a little glitchy if the href didn't not have slashes in front and back of the url, otherwise would have been a good solution.
brandon14_99
@brandon14_99 In your question you say: “An original link looks like this: `http://www.mysite.com/PopularTags/`” So I assumed you’d be consistent across the entire site and code all links like that. If you want flexibility with slashes, use a regular expression instead.
Mathias Bynens
+4  A: 

I'd suggest to use regular expressions, like

$('a[rel=ajax]').click(function(){
  $(this).attr('href', function(){
    this.href = this.href.replace(/\/$/, "");
    return(this.href.replace(/(.*\/)/, "$1#"));
  });
});

Kind Regards

--Andy

jAndy
This is the perfect solution. It allowed me to keep all the original url's and only the relevant ajax url's changed on click. The end result was like this: "http://www.mysite.com/#PopularTags". Just what I needed. Hope it will work for all my other links. How will this handle a url like this: "http://www.mysite.com/Section1/Section2/"?
brandon14_99
I just realized that if you click a link that is already active, it keeps adding anchors.. So how would I prevent it from adding anchors if one already exist?
brandon14_99
@brandon14_99 Don’t change the `href` attributes every time the link is clicked, only do it once when loading the document. Replace `.click()` with `.each()` and it should work.
Mathias Bynens
Mathias is correct, replace .click with .each and put it into $(document).ready().
jAndy
very helpful, thanks a lot.
brandon14_99