PDA

View Full Version : Exception on a grid with renderer



abcdef
23 Jun 2010, 12:47 AM
I am getting the following exception when I am trying to update a grid with custom renderer:

NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed.

The content that I am trying to update has html tags in it. Is there way to render these tags with a renderer? If not, is there way to catch the exception?

Also sometimes, it does give the same exception when there are no tags at all, maybe because of some weird character usage...is there way to deal with this?

It renders plain text correctly though..

Thanks in advance.

Condor
23 Jun 2010, 12:55 AM
Need more info. Can you post your renderer?

abcdef
23 Jun 2010, 1:41 AM
Thanks for a super quick response!

its very simple actually:

return String.format('<div class="content">{0}<div class="anothercontent">{1}</div></div>', item, record.get('anotheritem'));

and i have verified that its rendering correctly for all other items except one and its the 'description' item meaning that it has a lot of text in it. these are basically trying to display feed contents and its rendering correctly for most feeds but for some feeds, the description item is hitting the exception..

Thanks again..

Condor
23 Jun 2010, 2:34 AM
String.format uses String.replace to insert the data. It could be that String.replace can't handle big texts.

Could you try if a template works better?

renderer: (function(){
var tpl = new Ext.Template('<div class="content">{item}<div class="anothercontent">{anotheritem}</div></div>').compile();
return function(v, meta, r){
return tpl.apply(r.data);
}
})()

abcdef
23 Jun 2010, 3:30 PM
Thanks...

I tried that..doesn't work either..if i use htmlentities on the php side, it displays but now the tags are not rendered, only displayed as is..

basically, i am trying to read a feed and ext's example of feed viewer does the right thing...it takes the feed and displays its image tags...

i am trying this feed:

http://us.lrd.yahoo.com/_ylt=Atus28.3cV50xdplrmuOa.hA4gEA;_ylu=X3oDMTE3YzQ3bTV2BHBvcwM0BHNlYwN5bl9wcm9tb3NfZnJlZV9odG1sBHNsawNpbWFnZQ--/SIG=11grotmqv/**http%3A//rss.news.yahoo.com/rss/yahoonewsroom

Any ideas?

abcdef
24 Jun 2010, 10:58 AM
Any ideas...anyone?

i tried String.format, template and literally building a string and returning it to the renderer...in every case, i hit this error:

NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed.

i know i must be doing something wrong because those feeds work in ext's feed viewer...

can anyone help?

thanks..

Condor
24 Jun 2010, 10:54 PM
I did some googling and found out that you get this error when you are inserting invalid HTML. Does your inserted HTML contain unclosed tags or single ampersands in text?

ps. Somebody else mentions that this should only happen if your server is not setting the Content-type:text/html for your html page (which causes WebKit to force strict HTML validation).

abcdef
24 Jun 2010, 11:31 PM
Thanks again for the reply!

I don't think its doing invalid html because, the very same feed is working on ExtJS feed viewer example.

Also, I am returning a json feed and the values get read from a json store. So i don't think its the content type either.

I am even doing htmlentities on php side but it still gives me an exception.

This is frustrating but please do let me know if you think of something..

Condor
25 Jun 2010, 12:38 AM
Not the content-type of you JSON data, but the content-type of your HTML page!

Animal
25 Jun 2010, 12:56 AM
If the data contains some HTML tags, tell the template to HTML encode it:



renderer: (function(){
var tpl = new Ext.Template(
'<div class="content">','
'{item:htmlEncode}',
'<div class="anothercontent">',
'{anotheritem:htmlEncode}',
'</div>',
'</div>'
).compile();
return function(v, meta, r){
return tpl.apply(r.data);
}
})()

abcdef
25 Jun 2010, 10:51 PM
Thank you guys for replying...

Ok so the page is xhtml, so my content type was application/xhtml+xml. I tried changing it to text/html, and it still didn't work.

Animal, htmlEncode spit out raw html with the text around it. Is there a way to render it as was intended by the feed?

The images are being correctly rendered in ext's example of the feed viewer. That is the behavior I am looking for.

Please let me know if youd' like me to try something out..

Thanks again for all the help...

Animal
25 Jun 2010, 10:56 PM
No, htmlEncode changes < to &lt; etc so that will avoid inserting HTML into the cell.

abcdef
26 Jun 2010, 12:00 AM
But I am not seeing them encoded in my grid. I am seeing them as raw html, only not rendered. Am I doing something totally wrong?

Please help. Thanks.

Animal
26 Jun 2010, 2:20 AM
How are you debugging?

abcdef
27 Jun 2010, 8:45 AM
webkit inspector...when i inspect the element, i tried to copy the content and paste it into my editior, it got pasted with encoded characters, but when i see it rendered on the page and in the inspector itself, i see the html characters as is...

abcdef
8 Jul 2010, 11:23 AM
any ideas on this guys? any way to render html like in ext's feed viewer in examples page?

Animal
8 Jul 2010, 11:38 AM
show well formatted code in code tags

abcdef
15 Jul 2010, 3:07 PM
Sorry for the delay but here is the code:



{
xtype: 'grid',
autoHeight: true,
columnLines: false,
store: new Ext.data.JsonStore ({
proxy: new Ext.data.HttpProxy ({
url: 'index.php',
method: 'GET'
}),
root: 'Feed',
fields: [ 'title', 'link', 'date', 'description', 'author' ],
listeners: {
beforeload: function() {
this.baseParams = {
dummy: 'dummyvalue',
anotherdummy: 'anotherdummyvalue'
};
}
}
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{
xtype: 'gridcolumn',
sortable: true,
renderer: (function() {
var tpl = new Ext.Template(
'<div class="feed_item">',
'<div class="title">',
'<a target="_blank" href="{link}">',
'{title}',
'</a>',
'</div>',
'<div class="author">',
'{author}',
'</div>',
'<div class="date">',
'{date}',
'</div>',
'<div class="feed_content">',
'{description}',
'</div>',
'</div>'
).compile();
return function(v, meta, r) {
return tpl.apply(r.data);
};
})()
}
]
})
}


Also here is the exception:

NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed.

Animal
15 Jul 2010, 9:13 PM
Should work. Doesn't it tell you where the error is?

Condor
15 Jul 2010, 10:24 PM
1. sortable:true and no dataIndex. How is the grid going to sort that column?
2. Does your data contain text or html? If it's text then you might want to htmlEncode the data, e.g.

{description:htmlEncode}

abcdef
16 Jul 2010, 5:23 PM
thanks for the replies!

sortable: true was a remnant from the time i wasn't using template and using dataIndex. sorry about that...

in a perfect world, i would render the html as is..but i think that is not going to be possible...

i get an exception when there are certain entities like &mdash; in the text (which by the way, i am filtering out in the backend - so for now, i am avoiding exceptions and the grid works as expected)

In general though, is there a way to catch dom exceptions when using column renderer?

also, there is another problem that i noticed:

i have a timer that periodically reconfigures the grid. when there are dom exceptions though, the first time the timer activates, the store starts requesting for data infinitely..it doesn't matter what the time interval is, the first time it hits, things start getting out of control...

does any of this sound familiar?

i haven't been able to see exactly how the timer is the cause of infinite requests. i could see it if only i could listen to an exception while rendering and stopping the timer to see if the requests stop...

again, the grid works correctly as long as there are no exceptions, but it goes crazy with a combination of timer + dom exception...

any ideas?

thanks again!

Animal
16 Jul 2010, 10:03 PM
Can you repro this with a small, self-contained, one column grid with some hardcoded data in an Array that we can run in the examples directory?