Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > IE only show the first line after set innerHTML.

Reply
Thread Tools

IE only show the first line after set innerHTML.

 
 
huzheng001@gmail.com
Guest
Posts: n/a
 
      10-03-2006
I have develop a on-line dictionary website, http://www.stardict.org
I meet a problem:
Here is two lines of js codes:
document.getElementById("wordlist").innerHTML = "";
document.getElementById("definition").innerHTML = "line1<br>line2";
The corresponding html codes are:
<table width="100%">
<tr>
<td width="25%" valign="top"><div id="wordlist" width="100%" style='
overflow-y:auto; height:352px;'></div></td>
<td width="8" bgcolor="#888888"></td>
<td width="75%" valign="top"><div id="definition" width="100%" style='
overflow-y:auto; height:352px;'></div></td>
</tr>
</table>
But I will find only the first line1 is showed, you can't see line2. By
alert(document.getElementById("definition").innerH TML) you can find the
content is right. If comment the first line which set wordlist's
innerHTML, the result will be shown correctly.
This problem only happen in IE. It is correct in firefox.
Any one can help me to fix the problem? Thanks!

 
Reply With Quote
 
 
 
 
Luke Matuszewski
Guest
Posts: n/a
 
      10-04-2006

http://www.velocityreviews.com/forums/(E-Mail Removed) napisal(a):
> I have develop a on-line dictionary website, http://www.stardict.org
> I meet a problem:
> Here is two lines of js codes:
> document.getElementById("wordlist").innerHTML = "";
> document.getElementById("definition").innerHTML = "line1<br>line2";
> The corresponding html codes are:
> <table width="100%">
> <tr>
> <td width="25%" valign="top"><div id="wordlist" width="100%" style='
> overflow-y:auto; height:352px;'></div></td>
> <td width="8" bgcolor="#888888"></td>
> <td width="75%" valign="top"><div id="definition" width="100%" style='
> overflow-y:auto; height:352px;'></div></td>
> </tr>
> </table>
> But I will find only the first line1 is showed, you can't see line2. By
> alert(document.getElementById("definition").innerH TML) you can find the
> content is right. If comment the first line which set wordlist's
> innerHTML, the result will be shown correctly.
> This problem only happen in IE. It is correct in firefox.
> Any one can help me to fix the problem? Thanks!


I have testes followin example on FF/IE 6 and it works, maybe it will
help :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
// a counter used to create unique IDs
var Utils = new Object();
Utils.addEvent_guid = 1;

/**
* Rejestruje funkcje obslugi wybranego zdarzenia dla wskazanego
elementu DOM.
* TODO: zrobic anonynomous function execution...w której bedzie
wybór metody,
* np. wpierw preferowac DOM'a czyli [elem].addEventListener();
*
* @param element referencja do elementu DOM (tworzona/uzywana
* jest wlasciwosc events tego elementu(typu Object), która
zawiera
* strukture
"nazwa_zdarzenia"->[lista_funkcji_obslugi_zdarzenia(Object)]
*
* @param type nazwa zdarzenia np. click
* @param handler referencja do funkcji obslugi zdarzenia
(przypisywana jest mu
* wlasciwosc $$guid, która jest unikalnym numerem
(wzgledem wszystkich
* funckji obslugi zdarzen))
*/
Utils.addEvent = function(element, type, handler)
{
// assign each event handler a unique ID
// , but what about concurency, (thread races etc. ?), we assume here
// that script is running always in ONE thead...(so it is fine below).
// This is sury true for IE, where event object is a property of
global
// object window (window.event), so for this to work the events must
be
// fired in sequence...
if (!handler.$$guid) handler.$$guid = Utils.addEvent_guid++;
// create a hash table of event types for the element
if (!element.events) element.events = new Object();
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = new Object();
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = Utils.handleEvent;
};

/**
* Usuwa zarejestrowana funkcje obslugi zdarzenia.
*/
Utils.removeEvent = function(element, type, handler)
{
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};

/**
*
*/
Utils.fixEvent_preventDefault = function()
{
this.returnValue = false;
};

/**
*
*/
Utils.fixEvent_stopPropagation = function()
{
this.cancelBubble = true;
};

/**
* "Poprawia" obiekt event w przegladarkach IE (window.event)
*/
Utils.fixEvent = function(event)
{
// add W3C standard event methods for browsers that do not supports
them(IE)
event.preventDefault = Utils.fixEvent_preventDefault;
event.stopPropagation = Utils.fixEvent_stopPropagation;
return event;
};

/**
* Jest wolana, gdy nalezy obsluzyc zdarzenie danego typu (jej
funkcja to
* wolanie wlasciwej funckji obslugi zdarzenia zarejestrowanej
poprzez
* Utils.addEvent()).
*/
Utils.handleEvent = function(event)
{
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || Utils.fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};

/**
* @return szerokosc elementu wraz z padding i border (IE)
*/
Utils.getElementWithId = function() {
var getElementWithId = function() {};

if(document.getElementById) {
getElementWithId = function(id) {
return document.getElementById(id);
};
} else if(document.all) {
getElementWithId = function(id) {
return document.all[id];
};
} else if(document.layers) {
getElementWithId = function(id) {
return document[id];
}
}
return getElementWithId;
}();


Utils.addEvent(window, 'load', function() {
alert('ok');
Utils.getElementWithId("wordlist").innerHTML = "";
Utils.getElementWithId("definition").innerHTML = "line1<br>line2";
});

</script>

<table>
<tr>
<td><div id="wordlist" width="100%"></div></td>
<td bgcolor="#888888"></td>
<td valign="top"><div id="definition"></div></td>
</tr>
</table>
</body>
</html>

Greets
Luke Matuszewski

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: When running Ant on command line, how to not-show its WARNING messages and only show ERROR message? Roedy Green Java 5 12-13-2011 05:49 PM
Re: When running Ant on command line, how to not-show its WARNINGmessages and only show ERROR message? Lew Java 0 12-10-2011 01:46 AM
Re: When running Ant on command line, how to not-show its WARNING messages and only show ERROR message? John B. Matthews Java 0 12-09-2011 05:19 PM
Open file, get first line, delete first line close file Richard Schneeman Ruby 16 08-26-2008 11:54 PM
Datalist selects Item after first click, but does apply the SelectedItemTemplate after the second click only Dirk Meusel ASP .Net 1 08-19-2003 09:56 AM



Advertisments