Question

We’ve tried to dynamically update our rss-links (using JavaScript) in the head section of the HTML-document to reflect changes on the page due to filtering with AJAX. It seems that these do not consistently update across browsers though (go figure…).

(edit: By not updating correctly I mean the link in the address bar, not the DOM itself.)

• Is anyone aware of a method that makes this possible (without a page load)?
• Can you post an example of how it’s done?

Thanks a lot.

edit: I don’t have any code samples, but we tried the following:

1. Changed the href-attribute using PrototypeJS writeAttribute
2. Remove the old tag and insert a new link-element into the head section

edit2: Here are the code samples that didn’t work (serverResponse is an object passed to the function that contains this code. rssLink is a property of that object and is always defined):

// Update <link> 
var headLink = $('rssHead1'); 
// if we don't have a link in the header, create that element 
if(!headLink) { 
   var head = $$('head').first(),
       tag = '<link id="rssHead1" type=\"application/rss+xml\" rel="alternate">'
   head.insert(tag); 
   headLink = $('rssHead1'); 
} 
headLink.writeAttribute('href', serverResponse.rssLink); 
headLink.writeAttribute('title', 'Monitor this search'); 

Second attempt:

// Update <link> 
var headLink = $('rssHead1'); 
if(headLink) { headLink.remove(); }

headLink = new Element('link', {'id' = 'rssHead1',
                                'type' = 'application/rss+xml',
                                'rel' = 'alternate',
                                'href' = serverResponse.rssLink,
                                'title' = 'Monitor this search'});
$$('head').first().insert({bottom: headLink});

Answer 1

Your first example works actually, the DOM is properly modified. But when considering Firefox, for example, the rss signet in the adress bar is not updated 🙁

edit : your second attempt should be :

// Update <link> 
var headLink = $('rssHead1'); 
if(headLink) { headLink.remove(); }
headLink = new Element('link', {
  'id': 'rssHead1',
  'type': 'application/rss+xml',
  'rel': 'alternate',
  'href': serverResponse.rssLink,
  'title': 'Monitor this search'
});
$$('head').first().insert({bottom: headLink});

It also correctly alters the head element, but the rss link in the address bar is not updated.