Ajax And The Innerhtml Problem

HERE AT Road to the Middle Class we are nothing if not modern. That means that the site ought to be LAMP compliant, using Linux, Apache, MySql, and PHP, and so it does. But now, according to The Economist and Eric Schmidt, CEO of Google, it appears that a truly modern site should use AJAX as well. AJAX (Asynchronous JavaScript and Xml) is the technology that Google uses on GMail.

Well, how hard could it be?

The standard demonstration of AJAX on W3Schools.com shows how to use an AJAX setup to update text hints on the fly. You press a key to enter a character in a text box and every time you release the key your page requests a new text hint from the server with an HttpRequest.

When the response comes back from the server you update the text hint element like this:

document.getElementById("txtHint").innerHTML =xmlHttp.responseText

And everyone is happy.

But there’s a problem. The best use of AJAX here at Road to the Middle Class is to fold/unfold blog entries. We conserve real estate by showing only the first 50 words of a blog and allow you to click a link to get the whole article. But that means that the content coming back from the server is going to include HTML markup. What happens if the responseText isn’t just simple text but includes embedded HTML?

Good question. It turns out, using the W3Schools example, that embedded HTML works on Firefox but not on our friends at Internet Explorer: IE6 and IE7. The IE boys take one look at the embedded HTML and decide that it’s not a job for innerHTML. They return an "unknown runtime error".

Here’s how you update your page with AJAX when the responseText is complex and includes embedded HTML as it is here at Road to the Middle Class. I call it the Double Span Solution.

First of all, you surround your text with two elements, like this:

Text including a <a href="">link</a> and stuff.

The idea is that when you want to replace the text in the middle of the two elements you replace the entire inner element. You delete the old and add a new with the responseText and all of its HTML markup.

First of all you set up the new element, preserving the element id from the old element and adding in the responseText from the server.

var elem = document.getElementById("blog101s")
var newSpan = document.createElement(’span’)
newSpan.id = elem.id
newSpan.innerHTML = xmlHttp.responseText

Now remove the "blog101s" element and anything else floating around.

for (var i = 0; i < document.getElementById("blog101").childNodes.length; i++) {
var n = document.getElementById("blog101").childNodes[i]
n.parentNode.removeChild(n)
}

OK. Now append the new element right under "blog101".

document.getElementById(gBlogid).appendChild(newSpan)

And that should do it.

Technorati tags: AJAX, innerHTML, IE

Sphere: Related Content | | print

Christopher Chantrill blogs at www.roadtothemiddleclass.com. His Road to the Middle Class is forthcoming.

Comments:

Posted by: Robert Goretsky on 01/09/08 5:20pm

Thank you for this tip! I was trying to use innerHTML to add sub-elements of a list inside a span, and while it worked in Firefox, it did gave the error you mentioned in IE. Using this JS fixed it up!

TAGS

Chappies

“But I saw a man yesterday who knows a fellow who had it from a chappie that said that Urquhart had been dipping himself a bit recklessly off the deep end.” —Freddy Arbuthnot
Dorothy L. Sayers, Strong Poison

Hugo on Genius

“Tear down theory, poetic systems… No more rules, no more models… Genius conjures up rather than learns… ” —Victor Hugo
César Graña, Bohemian versus Bourgeois

Education

“We have met with families in which for weeks together, not an article of sustenance but potatoes had been used; yet for every child the hard-earned sum was provided to send them to school.”
E. G. West, Education and the State

Faith & Purpose

“When we began first to preach these things, the people appeared as awakened from the sleep of ages—they seemed to see for the first time that they were responsible beings...”
Finke, Stark, The Churching of America, 1776-1990

Conversion

“When we received Christ,” Phil added, “all of a sudden we now had a rule book to go by, and when we had problems the preacher was right there to give us the answers.”
James M. Ault, Jr., Spirit and Flesh

Postmodernism

A writer who says that there are no truths, or that all truth is ’merely relative’, is asking you not to believe him. So don’t.
Roger Scruton, Modern Philosophy

Faith and Politics

As far as the Catholic Church is concerned, the principal focus of her interventions in the public arena is the protection and promotion of the dignity of the person, and she is thereby consciously drawing particular attention to principles which are not negotiable... [1.] protection of life in all its stages, from the first moment of conception until natural death; [2.] recognition and promotion of the natural structure of the family... [3.] the protection of the right of parents to educate their children.
Pope Benedict XVI, Speech to European Peoples Party, 2006

China and Christianity

At first, we thought [the power of the West] was because you had more powerful guns than we had. Then we thought it was because you had the best political system. Next we focused on your economic system. But in the past twenty years, we have realized that the heart of your culture is your religion: Christianity.
David Aikman, Jesus in Beijing

Religion, Property, and Family

But the only religions that have survived are those which support property and the family. Thus the outlook for communism, which is both anti-property and anti-family, (and also anti-religion), is not promising.
F.A. Hayek, The Fatal Conceit

Conservatism

Conservatism is the philosophy of society. Its ethic is fraternity and its characteristic is authority — the non-coercive social persuasion which operates in a family or a community. It says ‘we should...’.
Danny Kruger, On Fraternity

US Life in 1842

Families helped each other putting up homes and barns. Together, they built churches, schools, and common civic buildings. They collaborated to build roads and bridges. They took pride in being free persons, independent, and self-reliant; but the texture of their lives was cooperative and fraternal.
Michael Novak, The Spirit of Democratic Capitalism

Society and State

For [the left] there is only the state and the individual, nothing in between. No family to rely on, no friend to depend on, no community to call on. No neighbourhood to grow in, no faith to share in, no charities to work in. No-one but the Minister, nowhere but Whitehall, no such thing as society - just them, and their laws, and their rules, and their arrogance.
David Cameron, Conference Speech 2008

mysql close 0