home  |  book  |  blogs  |   RSS  |  contact  |
  Take the Test!
Friday July 25, 2008 
by Christopher Chantrill

TOP NAV

Home

Blogs

Opeds

Articles

Bio

Contact

BOOK

Manifesto

Sample

Faith

Education

Mutual aid

Law

Books

BLOGS 08

Jul 2008

Jun 2008

May 2008

Apr 2008

Mar 2008

Feb 2008

Jan 2008

BLOGS 07

Dec 2007

Nov 2007

Oct 2007

Sep 2007

Aug 2007

Jul 2007

Jun 2007

May 2007

Apr 2007

Mar 2007

Feb 2007

Jan 2007

BLOGS 06

Dec 2006

Nov 2006

Oct 2006

Sep 2006

Aug 2006

Jul 2006

Jun 2006

May 2006

Apr 2006

Mar 2006

Feb 2006

Jan 2006

BLOGS 05

Dec 2005

Nov 2005

Oct 2005

Sep 2005

Aug 2005

Jul 2005

Jun 2005

May 2005

Apr 2005

Mar 2005

Feb 2005

Jan 2005

BLOGS 04

Dec 2004

 

print view

AJAX and The innerHTML Problem

by Christopher Chantrill
January 10, 2007 at 3:21 am

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 <span> elements, like this:

<p><span id=blog101><span id=blog101s>
<p>Text including a <a href="">link</a> and stuff.</p>
</span></span>
</p>

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

First of all you set up the new <span> element, preserving the element id from the old <span> 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 <span> element right under "blog101".

document.getElementById(gBlogid).appendChild(newSpan)

And that should do it.

Technorati tags: , ,

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:

(missing name)

(missing email address)

1000 characters left

 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

 

©2007 Christopher Chantrill