Javascript not working with IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Javascript not working with IE

Post by johnperkins21 »

I have this javascript that changes the text within a DIV that works perfectly in Mozilla, but it does not work with IE. All IE does is put that little error icon down at the bottom left when I click on "forgot pass". Does anyone have any idea why this would be?

Here is the relevant code:

Code: Select all

<?php
<script type='text/javascript'>
function forgotpassword() {
document.getElementById("login").innerHTML = "<font face=arial,helvetica style='font-size: 8pt;'><form method=post action='/login.php'>email:  <input type=text class='textforms' name='email' size=25>  <input type=submit class='buttonforms' value='submit'> </form></font>  ";
}
</script>

<?
if ($logged_in == '1') {
   $user_name_handle = mysql_query("SELECT UserName FROM Users WHERE PlayerID = "$userid"");
   $user_name = mysql_fetch_row($user_name_handle);   
   ?>
   <a href="/useradmin.php"><font face=arial,helvetica style="font-size: 8pt;">Welcome <? echo $user_name[0]; ?> - </font></a>
   <a href="/logout.php"><font face=arial,helvetica style="font-size: 8pt;">logout?</font></a>
     
   <?
} else {
?>

   <div id="login">
   
   <font face=arial,helvetica style="font-size: 8pt;">login: </font>
   <input type=text class="textforms" name="loginid" size=12 maxlength=20>
     
   <font face=arial,helvetica style="font-size: 8pt;">pass: </font>
   <input type=password class="textforms" name="pass" size=12 maxlength=10>  
   <input type=submit class="buttonforms" value="go">  
   <input type=button class="buttonforms" value="forgot pass" onclick="forgotpassword()">  
   
   </div>
<? } ?>


?>
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Would be useful to know what the error details were but...

Different browsers handle javascript in different ways. You need to adapt the code dependant on what the browser capabilities are.

HINT:

Code: Select all

if document.implementation.hasFeature('Range','2.0'))
you can use a range methodology to add. Then check for

Code: Select all

if(document.getElementById)
. If so you can use

Code: Select all

.innerHTML=content
method. If these don't work you could try if (document.layers) and use open, write, close calls.

If you get really stuck I can give you a function
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post by johnperkins21 »

Goblin,
Thanks for your input. However, I know almost nothing about javascript. I know enough to recognize what my script is doing, but I just modified it from a script I found on a tutorial-type site. I'm not exactly sure what you're getting at.

I don't understand ('Range','2.0'), and what that is for. Is there any way you can elaborate.

What I'm looking to do is change the contents of the DIV so that instead of login and pass fields, I have an email field. It works in Mozilla, but in IE the only error I get is that little triangle with an exclamation point that says Error next to it.

If it can't be done in IE, that's ok, but I figured that the code is right, and that IE supported .innerHTML, but again, I know almost nothing about Jscript.

Thanks for your help.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

OK you are right IE should be able to use .innerHTML. What version of IE are you using ?

1. Click on IE javascript error triangle to get more details on the error.
2. Is javascript enabled within IE ?

In Mozzila you can also use the Tools => Javascript console to look out for errors. You sometimes get warnings rather than errors which you should try to eliminate.

-----------------------------------------------------

The function I use is:

Code: Select all

function changeElemContent(elementId,content) &#123;
  if(document.implementation &&
    document.implementation.hasFeature &&
    document.implementation.hasFeature('Range','2.0')) &#123;

    // Can use ranges (Netscape 6+)
    node = document.getElementById(elementId);
    var newRange = document.createRange();
    newRange.selectNodeContents(node);
    newRange.deleteContents();
    var newHTML = newRange.createContextualFragment(content);
    node.appendChild(newHTML);

  &#125; else &#123;
    if(document.getElementById) &#123;
      // Process using inner HTML (Explorer 5&6)
      document.getElementById(elementId).innerHTML=content;
    &#125; else &#123;
      // Other generic tries to match other browsers. ( Need to test if it work on Netscape 4)
      if (document.all) &#123;
        document.all&#1111;elementId].innerHTML=content;
      &#125; else &#123;
        if(document.layers) &#123;
          with(document.layers&#1111;elementId].document) &#123;
            open();
            write(content);
            close();
          &#125;
        &#125;
      &#125;
    &#125;
  &#125;
&#125;
the <div> element chould have <div id="changediv">.

To update you would call the function changeElemContent('changediv','changehtml') where
changehtml is any valid HTML eg

Code: Select all

<form name=xyz method=post>
<input type=text name=myinputbox value="default">
</form>
. This HTML could be as large as you want and contain any valid HTML.

I know this function works for me although I do not have to cater for Netscape 4 and haven't really testing or tried to get it working on that.

If anyone has better code please let me know.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post by johnperkins21 »

I used your code, and it works in mozilla but still does not work in IE. I'm using IE 6 and javascript is enabled as other jscript functions on my page work. When click on the error triangle, all I get is line 63, char 7, unknown runtime error.

Here is the code as I have put it in my page:


Code: Select all

function changeElemContent(elementId,content) &#123;
	content = "<font face=arial,helvetica style='font-size: 8pt;'><form method=post action='/login.php'>email:  <input type=text class='textforms' name='email' size=25>  <input type=submit class='buttonforms' value='submit'> </form></font>  ";
	
  if(document.implementation &&
    document.implementation.hasFeature &&
    document.implementation.hasFeature('Range','2.0')) &#123;  //i think this line 63

    // Can use ranges (Netscape 6+)
    node = document.getElementById(elementId);
    var newRange = document.createRange();
    newRange.selectNodeContents(node);
    newRange.deleteContents();
    var newHTML = newRange.createContextualFragment(content);
    node.appendChild(newHTML);

  &#125; else &#123;
    if(document.getElementById) &#123;
      // Process using inner HTML (Explorer 5&6)
      document.getElementById(elementId).innerHTML=content;
    &#125; else &#123;
      // Other generic tries to match other browsers. ( Need to test if it work on Netscape 4)
      if (document.all) &#123;
        document.all&#1111;elementId].innerHTML=content;
      &#125; else &#123;
        if(document.layers) &#123;
          with(document.layers&#1111;elementId].document) &#123;
            open();
            write(content);
            close();
          &#125;
        &#125;
      &#125;
    &#125;
  &#125;
&#125;

here is the call:

Code: Select all

<input type=button class="buttonforms" value="forgot pass" onclick="changeElemContent('login')">
I appreciate your help, but I may need to just forego this entire idea. Stupid IE.

BTW, I get no errors in the javascript console on your code or my original script.
TheBentinel.com
Forum Contributor
Posts: 282
Joined: Wed Mar 10, 2004 1:52 pm
Location: Columbus, Ohio

Post by TheBentinel.com »

Hey John,

How about alert'ing the return value of those implementation calls? Maybe IE is reporting "true" when it really doesn't support it. I read that it isn't completely reliable on the subject: http://www.webreference.com/programming ... p17/4.html

If it's lying to you, maybe you're better off testing for which browser you're in and basing which code you run on that.

Or drop the whole deal, as you suggested. (That'd get my vote, but javascript and I don't get along in any browser!)
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Any idea which line is 63, char 7 ?

May help me track it down.

Regards
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

there's an ie debugger somewhere. search for posts by volka to me.
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post by johnperkins21 »

I believe this is line 63:

document.implementation.hasFeature('Range','2.0'))

doesn't make much sense though cuz char 7 is n in document.


I'll look for the debugger, but I may just scrap the idea. It would help my page look cleaner if I could just use the same area for logins and lost passwords, but I can come up with something else.

Thanks for all the help guys.


I just worked on it a little more, and it seems that there is actually a problem with the form somehow in the innerhtml. When I get rid of everything and just put text in like so:

Code: Select all

function forgotpassword() &#123;

  document.getElementById('login').innerHTML = "this is text";
&#125;
It works fine. I'm still messing with it, but it's not actually a javascript problem.
Post Reply