Javascript: Change Head Link Attribute (Alternate)

In continuation to the topic: Printing a page without showing it, I have encountered another problem.

With the previous post, printing the page without showing it actually works when you know the URL of the page before the page(the page shown, but not printed) was loaded.

Just to make it clear: It was a form that displays the data in DATA-ENTRY format. When the user clicks the print button, it will print a printer-friendly format of the data, which is coming from another page, without showing it.

It will work since as the DATA-ENTRY form was loaded, the alternate attribute was already assigned with the correct URL containing the reference number or the record ID. Therefore everything works great! As long as it is in IE.

However, I was given another form that has the same capability, but instead, the reference number or record IDs are not known in advance. The user must select from the list of records, click the print button, then print it.

Therefore, we must change the head link’s attribute before calling the print function. Here is the initial content of the head link:

<head>
<!-- head section here -->
<!-- some CSS here, CSS are also head links -->
<link href="/index.php/claim/print02/" media="print" rel="alternate" />
</head>

If we will call print this time, it will just print an empty report. The actual URL would look like this:

/index.php/claim/print02/workdiv/1/ref/123456,456123,987654,123321

As you can see, we have two (2) parameters, the [workdiv] and [ref]. workdiv is coming from a select element, and the ref is coming from a list of checkboxes. It is a list of comma-separated values containing the reference number of the records.

How can we change the href attribute then? Is it part of the DOM? It has no ID so we can’t use getElementById(). Or can we change that value?

I did a little Google Kung Fu, but once again it didn’t work, so I decided to have a trial and error.

I tried to modify its contents via jQuery, and here is the code:

$("link [rel=alternate]").attr("href", url);

Sigh…. It didn’t work. So I tried the classic javascript function getElementsByTagName and do a loop:


var alt = document.getElementsByTagName("link");
//get all head links

var len = alt.length;
for (var x=0; x<len; x++)
{
	//check if that link has an attribute rel which is equal to alternate
	//since we have only one alternate, then let's assume we are on the right alement
	if (alt&#91;x&#93;.rel == "alternate")
	{
		//change the href to the new href generated from the user selection of checkboxes
		alt&#91;x&#93;.href = url;
	}
}
&#91;/sourcecode&#93;

Wow, it works! The href attribute of the link was changed as I viewed it on FireBug. So now it works!

However, after I reviewed my jQuery code, I made a mistake on the selector: $("<strong>link [rel</strong>=alternate]").attr("href", url);

There was a space between the link the the bracket. It must have no space. So I changed it, and i don't need any looping this time!


$("link[rel=alternate]").attr("href", url);

That is the final code.

Leave a reply