FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Something crazy about IE javascript wew...

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Philip
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
function cekmenu()
{
document.getElementById('isidel').innerHTML=' Delete Topic &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="delmenu" class="textbox">';
alert(document.getElementById('isidel').innerHTML);
}
</script>
<body onLoad="cekmenu();" >
<div id="isidel">
</div>
</form>
</body>
</html>



paste above script, and save as html, and open it with Internet Explorer
look at the alert box, where </select> come from ?
it took me 3 days for find this kind of error --"
but it;s work on Opera, but this IE glek..
yjwong
What does IE output? And what is the error message that is found?

I think innerHTML is not supported by Internet Explorer in certain contexts. It works in some tags.
Philip
didn;t u test it first, before u post your comment here.... --"
it work dont correct, i didn't put </select> but why on messagebox there is a </select> tag ??
Kaneda
Philip wrote:
paste above script, and save as html, and open it with Internet Explorer
look at the alert box, where </select> come from ?
it took me 3 days for find this kind of error --"
but it;s work on Opera, but this IE glek..


This is because innerHTML will return the browser's internal representation of the HTML converted back into text, not the original text itself. The whole reason is a rather lengthy (and complex) topic in and of itself, but basically, errors in your HTML (missing closing tags etc.) are fixed, and the "tag"/element types ("DIV"), attributes ("id: "isidel") etc. are stored into a tree of objects, to make rendering and manipulation of the HTML faster and more structured. After that, your original text document is forgotten.

When you ask for the innerHTML, the browser will render these objects back into text, but since any unneeded information has been thrown out, it can't be guaranteed to be exactly the same as what you wrote. IE, for example, will return the tag name in uppercase, even if you wrote "<div>". Tags that should be closed will be returned as closed, whether you remembered to do it or not. And attribute values (like class="textbox") will be returned in the arbitrary order that the browser stores them in. As far as I recall, if you do innerHTML on a table, you'll even get added elements - like <tbody> - even if you didn't write them yourself.

In your example, a <select> element has to be closed (with </select>). Hence, if it isn't, IE will guess where you intended to close it, and do it for you in its internal representation. So, when that's converted back into text, the </select> will "magically" appear. Firefox does the same in this case.

In general, you can't make assumptions about what innerHTML will return. It depends on how the browser stores the document internally.

Another example is attribute values. Even if you don't put doublequotes around them, Firefox will add quotes around all attribute values in the internal representation, while IE will remove them where they aren't required pre-XHTML. So,

Code:
<div id=top lang="en" class="newsitem olditem"></div>


... would become:

In Firefox:
Code:
<div id="top" lang="en" class="newsitem olditem"></div>

(Note the added quotes around "top")

In IE:
Code:
<DIV class="newsitem olditem" lang=en id=top></DIV>

(Note the change in element name case to uppercase, the reordering of attributes (Firefox will do that too, we just got lucky), and the removal of the quotes around "en")

I know, this is rather complicated. Smile The bottom line is: What you get back from innerHTML is rarely what you put in.
Philip
oh, isee thanks for your long explanation now i get it Smile

anyway i found anothers bug ?

please check this my script again, i try to refresh whole my page, but itseem esepecially at that javascript, it seem doesn't reloaded/refreshed.

Code:
<div id="Info">
<html>
<head>
</head>
<?
$random=rand();
 echo '
      <script language="javascript">
      function prin'.$random.'()
      {
         alert(\''.$random.'\');
      }
      </script>
 ';
?>
<script language="javascript">
function refresh(){
   xmlHttp=GetXmlHttpObject();
   if (xmlHttp==null)
   {
         return true;
   }
   var url="test2.php";
   url=url+"?sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);
   return false;
}

function stateChanged()
{
   if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")   
   {
      document.getElementById("Info").innerHTML=xmlHttp.responseText;
   }
}

function GetXmlHttpObject()
{
   var objXMLHttp=null;
   if (window.XMLHttpRequest)
   {
      objXMLHttp=new XMLHttpRequest();
   }
   else if (window.ActiveXObject)
   {
      objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return objXMLHttp;;
}

</script>
<body>
<? echo $random; ?>
<br>
<A onClick="<? echo 'prin'.$random.'()'; ?>" href="#">
test print
</A>
<br>
<A onClick="refresh();" href="#">
Refresh
</A>
</body>
</html>
</div>
Kaneda
Not sure what you're trying to do. What the script would do is this:

1. Output a random number
2. Add a link calling your rand<whatever>() function.
3. Add another link calling a function which does this:
a. Call test2.php?sid=<random number> "behind the scenes".
b. Retrieve the output of that test2.php page.
c. Write that output into the element with an id of "Info".

However, there's no element in the document with the id "Info" (the document is the content between <html> and </html> - your <div> is outside (which makes the HTML entirely invalid), so nothing visible would happen when you click the Refresh link.

So, what do you want it to do? If you want the entire page refreshed, there's an easier way to do that - simply make the link point directly to "test2.php". Wink Only use XMLHttpRequest if you want to update only part of the page, without the entire page refreshing.
Philip
well, although the div is outside the html, but it sure refreshed Smile,
just function number of onclick called, that is still the first time, i need to refresh my function with ajax also Smile

but if u already tested my that script, u should see that after u click a refresh, and tried to call the function, the function still the first time loaded function. i need after refresh that can called the new function.

i need the function after refreshed is a new function, not old function.
Kaneda
Well, I tested your script - in IE and Firefox - (assuming the code you posted is in test2.php, and it's calling itself) and neither works. The first time, it works fine. After a "refresh", both IE and Firefox give a javascript error, since your page is completely messed up by the invalid HTML.

Internally, this is what Firefox has, after it's tried to clean up the mess:

Code:

<html>
  <head>
    <script language="javascript">
      function prin1620()
      {
         alert('1620');
      }
    </script>
    <script language="javascript">
      // the XHR script goes here.
    </script>
</head>
<body>
<div id="Info">
  <div id="Info">
    <script language="javascript">
      function prin31229()
      {
         alert('31229');
      }
    </script>
    <script language="javascript">
      // Yet another XHR script here.
    </script>

    31229
    <br>
    <a onclick="prin31229()" href="#">test print</a>
    <br>
    <a onclick="refresh();" href="#">Refresh</a>
  </div>
</div>
</body>
</html>


I urge you to do this in a different way, because it will be totally unpredictable how each browser will behave, when the HTML is as messed up as it is in the original document. Can't help you on how to do it, though, since I have no idea what you're trying to do - again, what you're doing now doesn't need Ajax at all - and is heavy abuse of XHR too. Smile
Philip
I need to refresh a list box that contain submenu,
the contain of submenu refreshed when the menu*listbox also* change,
so i do it one time i created a javascript and that every times menu change, the submenu changed also *and its work ^_^*,

but, when i deleted or append a submenu, it's need to refreshed the AJAX Page, but it seem the script that menu *that listbox* called still the first one javascript, not refreshed javascript -_-"

thanks,
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.