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!

Post a comment:

Amazon.com Widgets

TAGS

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

Never Trust Experts

No lesson seems to be so deeply inculcated by the experience of life as that you should never trust experts. If you believe doctors, nothing is wholesome: if you believe the theologians, nothing is innocent: if you believe the soldiers, nothing is safe. They all require their strong wine diluted by a very large admixture of insipid common sense.
Lord Salisbury, “Letter to Lord Lytton”

Conservatism's Holy Grail

What distinguishes true Conservatism from the rest, and from the Blair project, is the belief in more personal freedom and more market freedom, along with less state intervention... The true Third Way is the Holy Grail of Tory politics today - compassion and community without compulsion.
Minette Marrin, The Daily Telegraph

Class War

In England there were always two sharply opposed middle classes, the academic middle class and the commercial middle class. In the nineteenth century, the academic middle class won the battle for power and status... Then came the triumph of Margaret Thatcher... The academics lost their power and prestige and... have been gloomy ever since.
Freeman Dyson, “The Scientist as Rebel”

Government Expenditure

The Union publishes an exact return of the amount of its taxes; I can get copies of the budgets of the four and twenty component states; but who can tell me what the citizens spend in the administration of county and township?
Alexis de Tocqueville, Democracy in America

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

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

Racial Discrimination

[T]he way “to achieve a system of determining admission to the public schools on a nonracial basis,” Brown II, 349 U. S., at 300–301, is to stop assigning students on a racial basis. The way to stop discrimination on the basis of race is to stop discriminating on the basis of race.
Roberts, C.J., Parents Involved in Community Schools vs. Seattle School District

Physics, Religion, and Psychology

Paul Dirac: “When I was talking with Lemaître about [the expanding universe] and feeling stimulated by the grandeur of the picture that he has given us, I told him that I thought cosmology was the branch of science that lies closest to religion. However [Georges] Lemaître [Catholic priest, physicist, and inventor of the Big Bang Theory] did not agree with me. After thinking it over he suggested psychology as lying closest to religion.”
John Farrell, “The Creation Myth”

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

Pentecostalism

Within Pentecostalism the injurious hierarchies of the wider world are abrogated and replaced by a single hierarchy of faith, grace, and the empowerments of the spirit... where groups gather on rafts to take them through the turbulence of the great journey from extensive rural networks to the mega-city and the nuclear family...
David Martin, On Secularization

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

mysql close 0