Updating Meta Tags in layout/master page when rendering content via ajax

[Gumbo Robot]

I've googled this & seem to have been led round the houses - sure this is a really common scenario.

I'm using a layout page (MVC) that contains a navigation bar & the head element containing the meta tags. This gets rendered when the home page is accessed via the address bar.

All other urls are accessed via an ajax call and a container div is loaded with the returned html - in other words the layout page isn't reloaded & my meta description is still the description for the home page.

I can't believe there's not a standard approach to this -I've been pulling my hair out trying various heath robinson solutions only to give up when I realise what an awful bodge they all are.

Anyone know a good way to deal with this scenario?

a load of meta tags etc in the head element. This is in a layout page (MVC) so on

Edit: This could be a face palm moment: I'm only concerned about the meta tags for SEO & so long as they are all there when the page url is accessed normally (i.e. not through ajax) I guess it doesn't really matter.

That said, there's other stuff in the head that I want to change like loading a different CSS file so the question still kind of stands....

[TheLordDave]

It's fairly easy to load in css alongside an Ajax call but you can't unload the existing Css as that has already been sent to the browser.

Im not sure why you would update the meta tags though? The tags are related to the physical page. The Ajax call is rendering data into that page.

It's a pain in the ass but I have created top level physical pages that are tagged correctly then load the content of the page via Ajax in document ready.

[TheLordDave]

I'm going to be putting up a plan z site this week so I can show you what I mean.

[Gumbo Robot]

I'm going to be putting up a plan z site this week so I can show you what I mean.

Nice one.

As I said, I confused myself over the meta tag stuff. It's irrelavent with respect to the Ajax.

I'm just including the new CSS inline in my partial views - It seems to take precedent over the CSS loaded in the head which is what I want.

[NickFitz]

Have you tried something like:

// only do stuff for reasonably up-to-date browsers
if (document.querySelectorAll) {
    // get all <link> elements of type text/css
    var links = document.querySelectorAll("link[type='text/css']");
    // remove all CSS
    [].forEach.call(links, function(link) {
        link.parentNode.removeChild(link);
    });
}

Removing all styles is probably a bit drastic for what you want though, so if you just want one then do something like:

var linkToMessWith = document.querySelector("link[type='text/css'][href='http://example.com/styles/get-rid-of-this.css']");
linkToMessWith.parentNode.removeChild(linkToMessWith);

or, better still, set an id attribute (for just one) or a class (for several), and use the appropriate argument to querySelector (for one) or querySelectorAll (for several), or of course getElementById and getElementsByClassName. Note that querySelectorAll returns a node set, not an array, so you can't call methods like forEach directly on it - you have to do the [].forEach.call dance instead. Or, if you don't like array comprehensions, you can just do a good old-fashioned for loop to iterate over the node set, as it does have a length property.

IIRC you can also do something like

document.getElementById("someCss").href = "/styles/new-styles.css";

and the new styles will be loaded, replacing the old. How reliable that is in crap like IE<10, I don't know. (I used to, but I've forgotten.)

As always, test in the various browsers you expect to support before rolling it out to production; though the feature check for querySelectorAll should insulate you from ones that won't understand any of it

Oh, and IIRC, getElementsByClassName will return a live node set (i.e. it reflects changes in the document) so you'll need to iterate over it backwards if you're removing any, as they'll disappear from the node set at the same time as they disappear from the document

[Gumbo Robot]

Have you tried something like:

// only do stuff for reasonably up-to-date browsers
if (document.querySelectorAll) {
    // get all <link> elements of type text/css
    var links = document.querySelectorAll("link[type='text/css']");
    // remove all CSS
    [].forEach.call(links, function(link) {
        link.parentNode.removeChild(link);
    });
}

Removing all styles is probably a bit drastic for what you want though, so if you just want one then do something like:

var linkToMessWith = document.querySelector("link[type='text/css'][href='http://example.com/styles/get-rid-of-this.css']");
linkToMessWith.parentNode.removeChild(linkToMessWith);

or, better still, set an id attribute (for just one) or a class (for several), and use the appropriate argument to querySelector (for one) or querySelectorAll (for several), or of course getElementById and getElementsByClassName. Note that querySelectorAll returns a node set, not an array, so you can't call methods like forEach directly on it - you have to do the [].forEach.call dance instead. Or, if you don't like array comprehensions, you can just do a good old-fashioned for loop to iterate over the node set, as it does have a length property.

IIRC you can also do something like

document.getElementById("someCss").href = "/styles/new-styles.css";

and the new styles will be loaded, replacing the old. How reliable that is in crap like IE<10, I don't know. (I used to, but I've forgotten.)

As always, test in the various browsers you expect to support before rolling it out to production; though the feature check for querySelectorAll should insulate you from ones that won't understand any of it

Oh, and IIRC, getElementsByClassName will return a live node set (i.e. it reflects changes in the document) so you'll need to iterate over it backwards if you're removing any, as they'll disappear from the node set at the same time as they disappear from the document

Fantastic stuff. Thanks.