Table not displaying in IE7
4 views
Skip to first unread message
blatyo
Aug 12, 2008, 12:10:54 PM8/12/08
to Prototype & script.aculo.us
I have written the following class:
/**
* This class handles displaying notifications on the page.
*/
var NotificationManager = Class.create({
/**
* This method initializes the NotificationManager class.
*
* @return {NotificationManager} A class to handle displaying
notifications
* on page.
* @constructor
*/
initialize: function(){
//Find the page container.
var container = $$('.container_contents')[0];
// Create a div for showing notifications.
var notifications = new Element('div', {
'id': 'notifications'
});
//Create tables for the three levels of errors.
this.addNotificationTable('user_error', notifications);
this.addNotificationTable('system_error', notifications);
this.addNotificationTable('information', notifications);
//Add the notifications div to the top of the page. These will be
used
//whenever any new notifications are sent back from the server.
container.insert({
'top': notifications
});
}, //End initialize
/**
* This method creates a notification table.
*
* @param {String} type
* The type of table to create. (ie. User Error, System
Error, and
* Information)
* @param {div} notifications
* The div to add this table to.
*/
addNotificationTable: function(type, notifications){
//Create elements
var table = new Element('table', {
'class': type + '_message',//gives the table its styling
'border': '0',
'cellpadding': '0',
'cellspacing': '0'
});
var row = new Element('tr');
var imageTD = new Element('td', {
'valign': 'top',
'class': 'field_cell',
'height': '22'
});
var image = new Element('img', {
'src': '/images/newUI/' + type + '.gif',//grabs the
appropriate image
'align': 'bottom',
'border': '0'
});
var messageTD = new Element('td', {
'valign': 'top',
'class': 'field_cell',
'height': '22',
'id': type //gives the td a name we can use later to
update it
});
//Build DOM
imageTD.insert(image);
row.insert(imageTD);
row.insert({
bottom: messageTD
});
table.insert(row);
table.hide();
notifications.insert({
'bottom': table
});
}, //End addNotificationTable
/**
* This method updates the three notification types.
*
* @param {String} userError
* Errors the user can rectify.
* @param {String} systemError
* Errors in the system.
* @param {String} info
* Information the user should know.
*/
update: function(userError, systemError, info){
//If there are user errors, show them.
if (userError) {
$('user_error').update(userError);
$('user_error').up(1).show();
}
else { //Otherwise, hide the table from view.
$('user_error').up(1).hide();
}
//If there are system errors, show them.
if (systemError) {
$('system_error').update(systemError);
$('system_error').up(1).show();
}
else { //Otherwise, hide the table from view.
$('system_error').up(1).hide();
}
//If there is information, show it.
if (info) {
$('information').update(info);
$('information').up(1).show();
}
else { //Otherwise, hide the table from view.
$('information').up(1).hide();
}
//If there were any notifications.
if (userError || systemError || info) {
//Scroll there, so the user will see them.
$('notifications').scrollTo();
}
}//End update
}); //End NotificationManager
This class works perfectly in firefox, but does not work in IE7. I
have verified with firebug lite that everything is being added to the
page correctly. I have verified that calling $('name').up(1).show();
is correctly changing the display property. It seems as if IE7 is just
not refreshing the elements once they have changed.
/**
* This class handles displaying notifications on the page.
*/
var NotificationManager = Class.create({
/**
* This method initializes the NotificationManager class.
*
* @return {NotificationManager} A class to handle displaying
notifications
* on page.
* @constructor
*/
initialize: function(){
//Find the page container.
var container = $$('.container_contents')[0];
// Create a div for showing notifications.
var notifications = new Element('div', {
'id': 'notifications'
});
//Create tables for the three levels of errors.
this.addNotificationTable('user_error', notifications);
this.addNotificationTable('system_error', notifications);
this.addNotificationTable('information', notifications);
//Add the notifications div to the top of the page. These will be
used
//whenever any new notifications are sent back from the server.
container.insert({
'top': notifications
});
}, //End initialize
/**
* This method creates a notification table.
*
* @param {String} type
* The type of table to create. (ie. User Error, System
Error, and
* Information)
* @param {div} notifications
* The div to add this table to.
*/
addNotificationTable: function(type, notifications){
//Create elements
var table = new Element('table', {
'class': type + '_message',//gives the table its styling
'border': '0',
'cellpadding': '0',
'cellspacing': '0'
});
var row = new Element('tr');
var imageTD = new Element('td', {
'valign': 'top',
'class': 'field_cell',
'height': '22'
});
var image = new Element('img', {
'src': '/images/newUI/' + type + '.gif',//grabs the
appropriate image
'align': 'bottom',
'border': '0'
});
var messageTD = new Element('td', {
'valign': 'top',
'class': 'field_cell',
'height': '22',
'id': type //gives the td a name we can use later to
update it
});
//Build DOM
imageTD.insert(image);
row.insert(imageTD);
row.insert({
bottom: messageTD
});
table.insert(row);
table.hide();
notifications.insert({
'bottom': table
});
}, //End addNotificationTable
/**
* This method updates the three notification types.
*
* @param {String} userError
* Errors the user can rectify.
* @param {String} systemError
* Errors in the system.
* @param {String} info
* Information the user should know.
*/
update: function(userError, systemError, info){
//If there are user errors, show them.
if (userError) {
$('user_error').update(userError);
$('user_error').up(1).show();
}
else { //Otherwise, hide the table from view.
$('user_error').up(1).hide();
}
//If there are system errors, show them.
if (systemError) {
$('system_error').update(systemError);
$('system_error').up(1).show();
}
else { //Otherwise, hide the table from view.
$('system_error').up(1).hide();
}
//If there is information, show it.
if (info) {
$('information').update(info);
$('information').up(1).show();
}
else { //Otherwise, hide the table from view.
$('information').up(1).hide();
}
//If there were any notifications.
if (userError || systemError || info) {
//Scroll there, so the user will see them.
$('notifications').scrollTo();
}
}//End update
}); //End NotificationManager
This class works perfectly in firefox, but does not work in IE7. I
have verified with firebug lite that everything is being added to the
page correctly. I have verified that calling $('name').up(1).show();
is correctly changing the display property. It seems as if IE7 is just
not refreshing the elements once they have changed.
Diodeus
Aug 12, 2008, 1:21:47 PM8/12/08
to Prototype & script.aculo.us
One tip - use 'className' instead of 'class' in the new element
constructor. I'm not sure what your CSS says, but that may be the
issue.
constructor. I'm not sure what your CSS says, but that may be the
issue.
blatyo
Aug 12, 2008, 1:59:04 PM8/12/08
to Prototype & script.aculo.us
Thanks for the tip, I'll give that a shot.
blatyo
Aug 12, 2008, 2:18:52 PM8/12/08
to Prototype & script.aculo.us
It appears that this is purely an issue with inserting tables into a
page with IE. The only solution I know of is to use divs.
page with IE. The only solution I know of is to use divs.
Justin Perkins
Aug 12, 2008, 2:29:31 PM8/12/08
to prototype-s...@googlegroups.com
Actually using class like that is perfectly fine, as long as it's in quotes.
var elem = new Element('p', {'class':'testing'}).update('Hello World');
// same as:
var elem = new Element('p').addClassName('testing').update('Hello World');
blatyo
Aug 12, 2008, 2:33:54 PM8/12/08
to Prototype & script.aculo.us
Here is an example.
HTML:
<html>
<body>
<div id='container_contents'>
</div>
</body>
</html>
Javascript:
var container = $('container_contents');
var table = new Element('table');
var tr = new Element('tr');
var td = new Element('td');
td.insert('hi me!');
tr.insert(td);
table.insert(tr);
container.insert({'top':table});
HTML:
<html>
<body>
<div id='container_contents'>
</div>
</body>
</html>
Javascript:
var container = $('container_contents');
var table = new Element('table');
var tr = new Element('tr');
var td = new Element('td');
td.insert('hi me!');
tr.insert(td);
table.insert(tr);
container.insert({'top':table});
Justin Perkins
Aug 12, 2008, 3:21:20 PM8/12/08
to prototype-s...@googlegroups.com
You might want to try building the table with a string and inserting
it with Element#update instead. Table creation/alteration in IE via
DOM-manipulation is notoriously slow and buggy.
it with Element#update instead. Table creation/alteration in IE via
DOM-manipulation is notoriously slow and buggy.
-justin
Fabio
Aug 12, 2008, 3:49:35 PM8/12/08
to Prototype & script.aculo.us
Hi there.
IE will show dynamically built tables only when you also include a
TBODY as a child.
In your example:
HTML:
<html>
<body>
<div id='container_contents'>
</div>
</body>
</html>
Javascript:
var container = $('container_contents');
var table = new Element('table');
var tbody = new Element('tbody');
table.insert(tbody);
container.insert({'top':table});
IE will show dynamically built tables only when you also include a
TBODY as a child.
In your example:
HTML:
<html>
<body>
<div id='container_contents'>
</div>
</body>
</html>
Javascript:
var container = $('container_contents');
var table = new Element('table');
var tr = new Element('tr');
var td = new Element('td');
td.insert('hi me!');
tr.insert(td);
tbody.insert(tr);
var td = new Element('td');
td.insert('hi me!');
tr.insert(td);
table.insert(tbody);
container.insert({'top':table});
blatyo
Aug 14, 2008, 9:27:52 AM8/14/08
to Prototype & script.aculo.us
Thanks for the reply. I finally figured that out after an entire day
of playing with it.
of playing with it.
Reply all
Reply to author
Forward
0 new messages