Problem trying to node.set('innerHTML', stuff)

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 9 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

nickweavers

Joined: Fri Jan 29, 2010 2:05 am
Posts: 62

Tags:

Problem trying to node.set('innerHTML', stuff)

Posted: Mon Jul 04, 2011 10:12 am

+0-

Hi,

I am trying to insert a bunch of rows into a tables tbody using node.set('innerHTML', stuff). It works fine in FF4 and Chrome, but IE7 through IE9 all complain that the target is invalid. IE10 preview doesn't like it either.

You can see it happen here http://www.lexius.co.uk/cms/index.php?o ... howCourses. The script is called yui_training.js

In IE the loading spinner never gets replaced with data that was retrieved from the server.

I have tried debugging in Microsofts browser developer tool, but I can't get breakpoints to work. It's does break on the error though.

Has anyone else encountered anything similar?

TIA,
Nick

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 620
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Tags:

node

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Mon Jul 04, 2011 1:33 pm

+0-

Have you tried node.setContent()?

nickweavers

Joined: Fri Jan 29, 2010 2:05 am
Posts: 62

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Mon Jul 04, 2011 10:01 pm

+0-

Hi Juan,

Thanks for the suggestion. I just changed my node.set("innerHTML", stuff) to node.setContent(stuff) but it still gives the same results. It works in all browsers except IE (any version including IE10 preview).

Nick

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1066
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Tags:

node

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Tue Jul 05, 2011 12:16 am

+0-

Hello Nick.

It seems the following line in loadPage() throws the error:
Y.one('#training_form #courses').set("innerHTML", loadingMsg);

Using Juan's suggestion it seems it works nice:
Y.one('#training_form #courses').setContent(loadingMsg);

Hope that helps,
Alberto

P.S.: Generally speaking, you can switch to raw or debug YUI code and inspect the call stack with a debugger to investigate the issue.

nickweavers

Joined: Fri Jan 29, 2010 2:05 am
Posts: 62

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Tue Jul 05, 2011 12:39 am

+0-

Alberto,

I reduced the problem to just one line of js embeded in html and you can see it here: http://jsfiddle.net/nickweavers/gGEh3/

If you show this page in IE9 or IE8 and click run it will not execute. If you do the same in Chrome, FF or Opera it will.

This example uses pure JS so I think this is just a bug in the MS javascript processor.

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 620
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Tags:

node

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Tue Jul 05, 2011 5:05 am

+0-

Yeah, it doesn't work with pure JS either because of IE. IE usually throws an error when you try to insert malformed HTML via innerHTML. It does the same when you try insert a node into a parent that doesn't accept it (for example, a <tr> inside a <table>, not a <tbody>) either with innerHTML or appendChild.

In my IE9 browser setContent() worked fine. I guessed it did because it was creating a node and attaching it instead of just using innerHTML. Does this work for you? http://jsfiddle.net/juandopazo/9vY8Z/2/

nickweavers

Joined: Fri Jan 29, 2010 2:05 am
Posts: 62

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Tue Jul 05, 2011 10:01 am

+0-

Thanks Juan and Alberto,

I have to fes up - I had forgotten to turn the Y.one('#training_form #courses').set("innerHTML", loadingMessage) that comes before the fetching and loading of rows into a Y.one('#training_form #courses').setContent(loadingMessage). Alberto had pointed this out, but it didn't register as I was fixated on the insertion of rows.

Juan Ignacio Dopazo

YUI Contributor

Username: jdopazo
Joined: Fri Oct 02, 2009 5:39 am
Posts: 620
Location: Buenos Aires, Argentina
Twitter: juandopazo
GitHub: juandopazo
Gists: juandopazo

Tags:

node

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Wed Jul 06, 2011 4:04 pm

+0-

LOL Take a look at today's post in the IEBlog:

Quote:

Interoperable innerHTML

These improvements apply to innerHTML too. Code patterns like these now work as you’d expect in IE10:

Code:

var select = document.createElement("select");
select.innerHTML = "<option>one</option><option>two</option>";
var table = document.createElement("table");
table.innerHTML = "<tr><td>one</td><td>two</td></tr>";

nickweavers

Joined: Fri Jan 29, 2010 2:05 am
Posts: 62

Re: Problem trying to node.set('innerHTML', stuff)

Posted: Wed Jul 06, 2011 8:54 pm

+0-

Yey! how uncanny is the timing of that

Page 1 of 1

[ 9 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Forums

nickweavers

Problem trying to node.set('innerHTML', stuff)

Juan Ignacio Dopazo

YUI Contributor

Re: Problem trying to node.set('innerHTML', stuff)

nickweavers

Re: Problem trying to node.set('innerHTML', stuff)

Alberto Santini

YUI Contributor

Re: Problem trying to node.set('innerHTML', stuff)

nickweavers

Re: Problem trying to node.set('innerHTML', stuff)

Juan Ignacio Dopazo

YUI Contributor

Re: Problem trying to node.set('innerHTML', stuff)

nickweavers

Re: Problem trying to node.set('innerHTML', stuff)

Juan Ignacio Dopazo

YUI Contributor

Re: Problem trying to node.set('innerHTML', stuff)

nickweavers

Re: Problem trying to node.set('innerHTML', stuff)

Recent YUI Blog Posts

Online Users