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 |

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

Comments:

Posted by: Andy Guest on 03/31/12 5:31pm

I found a small problem with the JS using Firefox, in that FF treats whitespace as child nodes and the removeElement loop fails when children > 1.

Anyway, here is my code:

var innerElem = document.getElementById("span_month_inner");
var newSpan = document.createElement("span");
newSpan.id = innerElem.id;
newSpan.innerHTML = xmlHttp.responseText;

// Now remove the 2nd span outerElem and anything else floating around.
// Firefox treats whitespace as children too.
var outerElem = document.getElementById("span_month_outer");
while (outerElem.firstChild) {
outerElem.removeChild(outerElem.firstChild);
}

// Now append the new element right under "span_month_outer".
outerElem.appendChild(newSpan);

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

Action

The incentive that impels a man to act is always some uneasiness... But to make a man act [he must have] the expectation that purposeful behavior has the power to remove or at least to alleviate the felt uneasiness.
Ludwig von Mises, Human Action

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

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

Churches

[In the] higher Christian churches� they saunter through the liturgy like Mohawks along a string of scaffolding who have long since forgotten their danger. If God were to blast such a service to bits, the congregation would be, I believe, genuinely shocked. But in the low churches you expect it every minute.
Annie Dillard, Holy the Firm

Civil Society

“Civil Society”—a complex welter of intermediate institutions, including businesses, voluntary associations, educational institutions, clubs, unions, media, charities, and churches—builds, in turn, on the family, the primary instrument by which people are socialized into their culture and given the skills that allow them to live in broader society and through which the values and knowledge of that society are transmitted across the generations.
Francis Fukuyama, Trust

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”

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

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

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

Democratic Capitalism

I mean three systems in one: a predominantly market economy; a polity respectful of the rights of the individual to life, liberty, and the pursuit of happiness; and a system of cultural institutions moved by ideals of liberty and justice for all. In short, three dynamic and converging systems functioning as one: a democratic polity, an economy based on markets and incentives, and a moral-cultural system which is plural and, in the largest sense, liberal.
Michael Novak, The Spirit of Democratic Capitalism

Drang nach Osten

There was nothing new about the Frankish drive to the east... [let] us recall that the continuance of their rule depended upon regular, successful, predatory warfare.
Richard Fletcher, The Barbarian Conversion

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

mysql close 0