Javascript does not behave right in IE9

**tuffy** · 09-12-2011, 09:15 AM

Hi, I have Javascript code that behaves as it is supposed to in Firefox, Chrome and Opera. But in IE9, it does not behave correctly. When I change the Document Mode from "Quirks" to "IE9 standards" manually, it works very well. I need some code that will do this automatically when the page loads. I tried <!DOCTYPE html> before <html> tag, but I was successless. The page should work good in IE9, Firefox, Chrome and Opera. I will appreciate your help. The code is below:

Code:

<?php
// Check if session is not registered , redirect back to main page.
// Put this code in first line of web page. 
// Kullanıcı giriş yapmadan direkt bu web sayfasının adresini yazarsa, bu web sayfası açılmaz giriş sayfasına yönlendirilir.
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>
<html>
<link href="tez_ana.css" rel="stylesheet" type="text/css">
<!-- <table width="768" border="0">
  <tr>
    <td> -->
<title> Akış Kontrol Deyimleri </title>
<body>
<SCRIPT LANGUAGE="JavaScript">
function msjYazdir(gelen_deger) {
	if ( gelen_deger == 'if (60 < $not) {' ) {
		document.kosul.mesaj_kutusu.value = "Yanlış cevabı seçtiniz. Karşılaştırma operatörü seçimini hatalı yaptınız.";
		// aşağıdaki 3 satır, 3. satıra seçilen şıktaki ifadeyi atar ve tüm kodu tekrar textArea'ya yazdırır.
		var satirlar = document.kosul.kod_yazim_alani.value.split("\n");
		satirlar [2] = "   if (60 < $not) {";
		document.kosul.kod_yazim_alani.value = satirlar.join("\n"); // "\n" karakterini birleştirme karakteri olarak kullanarak array'i string'e atar.
		document.kosul.yanlis_secim_sayisi.value = document.kosul.yanlis_secim_sayisi.value + 1; // yanlis_secim_sayisi gizli textbox'unun value'sına her yanlış seçiminde string olarak 1 karakteri ekleniyor. En sonunda doğruyu seçtiğinde .length fonksiyonu ile kaç tane 1 karakteri var bu sayılıyor ve böylece doğruyu seçmeden önce kaç kere yanlış seçim yaptığı saptanıyor. Bu sayıya da 1 sayısı eklendiğinde kaçıncıda doğru şıkkı bildiği ortaya çıkıyor.
	}
	else if ( gelen_deger == 'if ($not < 60) {' ) {
		document.kosul.mesaj_kutusu.value = "Doğru cevabı seçtiniz.\n\"Tüm Kodu Dene\" düğmesine tıklayarak sonucu görebilirsiniz.";
		var satirlar = document.kosul.kod_yazim_alani.value.split("\n");
		satirlar [2] = "   if ($not < 60) {";
		document.kosul.kod_yazim_alani.value = satirlar.join("\n"); // "\n" karakterini birleştirme karakteri olarak kullanarak array'i string'e atar.
		document.kosul.mesaj_kutusu.style.backgroundColor = "#F66";
		setTimeout ("bir_sure_kirmizi_yap()", 1000);
		if (document.kosul.bir_defa_dogru_cavabi_buldu.value == "") {
			var yapilan_ornek = "if deyimi örnek 3";
			var kacincida_dogru_cevabi_buldu = document.kosul.yanlis_secim_sayisi.value.length + 1;
			var xmlhttp;
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest;
			}
			else {
				xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
			}
			var url = "http://localhost/tez/ornek_tamamlama_bilgisini_vt_gonder.php?hangi_ornek=" + yapilan_ornek +"&kacinci_secimde_dogru_cevabi_buldu="+kacincida_dogru_cevabi_buldu;
			xmlhttp.open("GET", url, false);
			xmlhttp.send(null);	
		}
		document.kosul.bir_defa_dogru_cavabi_buldu.value = 1;
	}
	else if ( gelen_deger == 'if {$not < 60} {' ) {
		document.kosul.mesaj_kutusu.value = "Yanlış cevabı seçtiniz. Koşul kısmında parantez yerine küme parantezi kullandınız.";
		// aşağıdaki 3 satır, 3. satıra seçilen şıktaki ifadeyi atar ve tüm kodu tekrar textArea'ya yazdırır.
		var satirlar = document.kosul.kod_yazim_alani.value.split("\n");
		satirlar [2] = "   if {$not < 60} {";
		document.kosul.kod_yazim_alani.value = satirlar.join("\n");
		document.kosul.yanlis_secim_sayisi.value = document.kosul.yanlis_secim_sayisi.value + 1;  
	}
	else  if (gelen_deger == 'if {$not =< 60} {') {
		document.kosul.mesaj_kutusu.value = "Yanlış cevabı seçtiniz. Koşul kısmında parantez yerine küme parantezi kullandınız ve karşılaştırma operatörü seçimini hatalı yaptınız.";
		var satirlar = document.kosul.kod_yazim_alani.value.split("\n");
		satirlar [2] = "   if {$not =< 60} {";
		document.kosul.kod_yazim_alani.value = satirlar.join("\n");
		document.kosul.yanlis_secim_sayisi.value = document.kosul.yanlis_secim_sayisi.value + 1;  
	}
}

function bir_sure_kirmizi_yap () {
	document.kosul.mesaj_kutusu.style.backgroundColor = "#FFC";
}

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g,"");
}

// örnekte kullanılan ifadenin yapısını içeren bir yardım
function ipucu_goster () {
	document.kosul.mesaj_kutusu.value = "KOMUT YAPISI\n-------------\n if (koşul) {\n   komut;\n }";
}
</SCRIPT>
<form name = "kosul" action = "" method ="POST">
<input type="hidden" name="yanlis_secim_sayisi" id="yanlis_secim_sayisi" value="<?php echo $_POST['yanlis_secim_sayisi'];?>" > 
<input type="hidden" name="bir_defa_dogru_cavabi_buldu" id="bir_defa_dogru_cavabi_buldu" value="<?php echo $_POST['bir_defa_dogru_cavabi_buldu'];?>" > 
<script type="text/javascript">
var startTime = new Date();
window.onbeforeunload = function () {
	var endTime = new Date ();
	var timeSpent = (endTime - startTime)/1000;
	var zaman_olculen_sayfa = getFileName ();
	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest;
	}
	else {
		xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
	}
	var url = "http://localhost/tez/time.php?time=" + timeSpent  +"&sayfa="+zaman_olculen_sayfa +"&baslama_zamani="+startTime +"&bitirme_zamani="+endTime;
	xmlhttp.open("GET", url, false);
	xmlhttp.send(null);
}
function getFileName () {
	var url = document.location.href; // this gets the full url
	url = url.substring(0,(url.indexOf("#")==-1) ? url.length : url.indexOf("#"));
	url = url.substring(0,(url.indexOf("?")==-1) ? url.length : url.indexOf("?"));
	url = url.substring(url.lastIndexOf("/")+1, url.length);
	return url; 
}
</script>

<h3> IF DEYİMİ </h3>

<p>
<b>ÖRNEK 3:
</p>

<table width="100%" border="0">
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><textarea name="kod_yazim_alani" id="kod_yazim_alani" value="<?php echo $kod_yazim_alani?>" class="formtextarea" cols="95%" rows="10"><?php if(isset($_POST['kod_yazim_alani']))echo trim($_POST['kod_yazim_alani'])?></textarea></td>
  </tr>
</table>
<script type="text/javascript">createTextAreaWithLines('kod_yazim_alani');</script>
<script type="text/javascript">
	if (!document.kosul.kod_yazim_alani.value.match (/\S/)) {  // Değer olarak boşluk olmayan bir karakter yok ise
		document.kosul.kod_yazim_alani.value = "<?php\n   $not = 55;\n   \n      echo \"Kaldı.\";\n   }\n?>";
	}
</script>
<table width="100%" border="0">
  <tr>
    <td width="4%" align="left">&nbsp;</td>
    <td width="96%" align="left"><input name="kod_calistir" type="submit" value="Tüm Kodu Dene" align="center" ></td>
  </tr>
</table>
<p>
</p>
<p>
<fieldset><legend>Seçenekler</legend>
  <table width="100%" border="0" align="left">
    <tr>
      <td width="442">
      <p>
        <input type = "radio" name = "cevap" id="c_1" value = "if (60 < $not) {" onchange = "msjYazdir(this.value);" <?php if ( $_POST['cevap'] == "if (60 < \$not) {" ) echo "checked" ?> > if (60 < $not) {
	  </p>
      <p>
          <input type = "radio" name = "cevap" id="c_2" value = "if ($not < 60) {" onchange = "msjYazdir(this.value);" <?php if ( $_POST['cevap'] == "if (\$not < 60) {" ) echo "checked" ?> > if ($not < 60) {        
      </p>
   
      <p>
          <input type = "radio" name = "cevap" id="c_3" value = "if {$not < 60} {" onchange = "msjYazdir(this.value);" <?php if ( $_POST['cevap'] == "if {\$not < 60} {" ) echo "checked" ?> > if {$not < 60} {       
      </p>

      <p>
          <input type = "radio" name = "cevap" id="c_4" value = "if {$not =< 60} {" onchange = "msjYazdir(this.value);" <?php if ( $_POST['cevap'] == "if {\$not =< 60} {" ) echo "checked" ?> > if {$not =< 60} {
      </p>
      
      </td>
      <td width="865" align="left" ><textarea name="mesaj_kutusu" value="<?php echo $mesaj_kutusu?>" cols="30" rows="6" readonly="readonly" id="mesaj kutusu"><?php if (isset($_POST['mesaj_kutusu'])) echo trim ($_POST['mesaj_kutusu'])?></textarea></td>
   </tr>
</table>
  </fieldset>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" align= "right" name="ipucu" value="İpucu Göster" onClick="ipucu_goster ();">
<p>
  <a href="5_kosullu_ifadeler_if_c_2_b.php"><img src="ileri.gif"alt="Sonraki Sayfa" width="80" height="40" border="0" align="right"></a>
  <a href="5_kosullu_ifadeler_if_c.php"><img src="geri.gif" alt="Önceki Sayfa" width="80" height="40" border="0" align="right"></a>
</p>
</form>
<!-- </td>
  </tr>
</table> -->
</body>
</html>

**mburt** · 09-12-2011, 10:08 AM

I reviewed the code and I can't find any holes but maybe it would be easier for me to see the issue if you posted a link to your site.

In the meantime, I did notice one thing that you need to change. Change:

Code:

<SCRIPT LANGUAGE="JavaScript">
...
</script>

To:

Code:

<script type="text/javascript">
...
</script>

I'm not sure if this will help, but it's more correct.

**tuffy** · 09-12-2011, 10:53 AM

Hello, Thank you for the reply. I corrected your suggestion. But that did not solve the problem.
I attached the file. The extension should be changed from .txt to .php
MySql connection errors can be ignored when the page is run.
The problem specifically is:
When you run the file, the second choice at the bottom of the page is the right answer to a question where all the other 3 choices are wrong. When you select the second choice you have red color in the textarea next to it as an indication of it is being the right choice.
In Firefox, Opera and Chrome; every time you select the right choice, it outputs the right message in the textarea. And it is the same for these browsers also for the wrong answers. They behave correctly.
But in IE9 in "Quirks" Document Mode which is loaded automatically, the feedbacks for right and wrong answers are garbled.
However, if you change Document mode to "IE9 Standards" manually from the menu of IE9 explorer, the feedback messages start behaving correctly as they do in other browsers.
So, I think if I can change the Document Mode to IE9 standards automatically when the page is loaded, the problem than will be solved. Of course this change should not hurt the correct behaviour from other browsers.
Thank you.

**Minos** · 09-12-2011, 04:43 PM

You had <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">?

If you do not declare a doctype IE defaults to quirks.

**traq** · 09-12-2011, 05:37 PM

simply using <!doctype html> should trigger standards mode in IE9. I've never had any problem with it. are you certain that the doctype was the first line in the html output (no  or extraneous characters, maybe even whitespace)?

**jscheuer1** · 09-12-2011, 06:44 PM

Once you view the page in IE 9 with its developer tools and switch Quirks and Standards, until you close the browser it no longer pays attention to the DOCTYPE on any page. Rather it renders it in whatever was the last mode set in developer tools.

Originally Posted by traq

simply using <!doctype html> should trigger standards mode in IE9. I've never had any problem with it. are you certain that the doctype was the first line in the html output (no  or extraneous characters, maybe even whitespace)?

Yes and you may have to close the browser, reopen it and clear its cache, and refresh the page to see changes take effect. In your previous post, it goes here:

Code:

<?php
// Check if session is not registered , redirect back to main page.
// Put this code in first line of web page. 
// Kullanıcı giriş yapmadan direkt bu web sayfasının adresini yazarsa, bu web sayfası açılmaz giriş sayfasına yönlendirilir.
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>
<!DOCTYPE html>
<html>
<link href="tez_ana.css" rel="stylesheet" type="text/css">
<!-- <table width="768" border="0">
  <tr>
    <td> -->
<title> Akış Kontrol Deyimleri </title>
<body>
<SCRIPT LANGUAGE="JavaS . . .

One last check, look at the source code in the browser. It should be the very first thing. And there should be no other DOCTYPE or <html> tags on the page.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**tuffy** · 09-14-2011, 06:09 PM

The page is not on-line. But it will be. I have at the very beginning of the page the code that is checking if session is registered or not. if it is not, it redirects the user back to main page. This piece of PHP code (presented in the following code area) wants it to be put in first line of web page.

Code:

<?php
// Check if session is not registered , redirect back to main page.
// Put this code in first line of web page. 
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>

If you put it elsewhere other than the first line, the page gives this error message

Code:

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at C:\xampp\htdocs\tez\5_kosullu_ifadeler_if_b.php:2) in C:\xampp\htdocs\tez\5_kosullu_ifadeler_if_b.php on line 7

But also <!doctype html> wants to be in the first line of the php file, otherwise I can not switch automatically from Quirks mode to IE9 Standards mode. I do not know what to do.

I am new to forum sites, I do not fully understand the statement "Please post a link to a page on your site that contains the problematic code so we can check it out." I think you want the web page to be on the Internet so that you can have access to the code. Is that right?

Thank you very much.

**traq** · 09-14-2011, 07:52 PM

Originally Posted by tuffy

This piece of PHP code (presented in the following code area) wants it to be put in first line of web page.[ ... ]
But also <!doctype html> wants to be in the first line of the php file, otherwise I can not switch automatically from Quirks mode to IE9 Standards mode. I do not know what to do.

no.

session_start() needs to be on the first line of the php script; the doctype needs to be the first line of output - the first line that the browser sees (see John's post above for where to put it).

by "post your code" yes, we mean link to the live page. If it's not online yet, you can use a service like jsbin for testing.

**jscheuer1** · 09-14-2011, 09:33 PM

In other words it goes here (highlighted and red):

Code:

<?php
// Check if session is not registered , redirect back to main page.
// Put this code in first line of web page. 
// Kullanıcı giriş yapmadan direkt bu web sayfasının adresini yazarsa, bu web sayfası açılmaz giriş sayfasına yönlendirilir.
session_start();
if(!session_is_registered(myusername)){
header("location:main_login.php");
}
?>
<!DOCTYPE html>
<html>
<link href="tez_ana.css" rel="stylesheet" type="text/css">
<!-- <table width="768" border="0">
  <tr>
    <td> -->
<title> Akış Kontrol Deyimleri </title>
<body>
<SCRIPT LANGUAGE="JavaS . . .

Thread: Javascript does not behave right in IE9

Thread Tools

Search Thread

Javascript does not behave right in IE9

The Following User Says Thank You to traq For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions