Probleem Ajax contactformulier in MSIE
De website van (url) kan niet worden geopend.
De bewerking is afgebroken.
Onder alle andere browser werkt het correct.
Wanneer treed het probleem op?
In de fase toen alles met alerts werkte was er geen probleem.
Toen had ik besloten om de zaak te verfraaien en verborgen <div>'s zichtbaar te latem maken in plaats van de standaard alert vensters ( alert() ).
===== code ======
<code>
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert(xmlHttp.responseText); // De uitvoer van contactsendmail.php zou hier moeten verschijnen.
if (xmlHttp.responseText == "Your message is succesfully send.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactsenderror').style.display = 'none'
document.getElementById('contactconfirm').style.display = 'block'
document.getElementById('blackground').style.display = 'block'
//document.getElementById('contactform').reset();
}
if (xmlHttp.responseText == "Something went wrong.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactconfirm').style.display = 'none'
document.getElementById('contactsenderror').style.display = 'block'
document.getElementById('blackground').style.display = 'block'
}
}
}
} // End of function handleStateChange()
</code>
======================================
Zodra in IE (ook 8!) de <div> gaat verschijnen d.m.v. javascript en style wordt blocked, verschijnt de foutmelding:
De website van (url) kan niet worden geopend.
De bewerking is afgebroken.
Uiteraard (hoe kan het ook anders) geven de overige browsers geen problemen.
Iemand ?????
Gewijzigd op 02/11/2010 14:02:18 door Rene Wennekes
En heb je misschien een live voorbeeld van wat er fout gaat, is met een ajax probleem wel zo makkelijk.
-edit-
Kijk ook is naar het ajax deel van jquery, scheelt echt ongelofelijk veel tijd
Gewijzigd op 02/11/2010 14:08:37 door jasper hoi
For example, this problem may occur if a DIV element is a child container in a BODY element, and a SCRIPT block in the DIV element tries to modify the BODY element that is a parent container for the DIV element. This is a bug in the Internet Explorer parser.
En dit zou best kunnen (damn Microschoft).
Gaat om deze
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id='blackground' style='position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer; background: #000; opacity: 0.80; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);'>
</div>
<div id="contactconfirm" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactconfirm').style.display = 'none'; document.forms[0].reset();">
<p>
<img src="ok.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span class="redmarker">The form is correctly sended.</span><br />
<br />
With kind regards.<br />
</p>
</div>
<div id="contactsenderror" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactsenderror').style.display = 'none';">
<p>
<img src="error.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span class="redmarker">An error occured while sending the form!!!</span><br />
</p>
</div>
<div id="sendformcheck" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('sendformcheck').style.display = 'none';">
<p>
<img src="warning.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span id="sendformcheckmessage" class="redmarker"></span><br />
</p>
</div>
</div>
<div id="contactconfirm" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactconfirm').style.display = 'none'; document.forms[0].reset();">
<p>
<img src="ok.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span class="redmarker">The form is correctly sended.</span><br />
<br />
With kind regards.<br />
</p>
</div>
<div id="contactsenderror" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactsenderror').style.display = 'none';">
<p>
<img src="error.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span class="redmarker">An error occured while sending the form!!!</span><br />
</p>
</div>
<div id="sendformcheck" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('sendformcheck').style.display = 'none';">
<p>
<img src="warning.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<span id="sendformcheckmessage" class="redmarker"></span><br />
</p>
</div>
ik heb ze al op hetzelfde niveau gezet als het formulier maar werkt ook niet.
oh ja, hier ff mijn testpagina
http://www.wennekes.info/renewennekes/contact.php
Gewijzigd op 02/11/2010 14:26:13 door Rene Wennekes
Let op ';' (ook bij javascript, vooral IE kan daar nog al eens op zeuren)
verder waar wordt xmlHttp vandaan gehaald? scope?
Volgens mij ligt het niet aan de CODE of de xmlHttp, die werkt correct.
Het schijnt iets lulligs van ie te zijn over de plaats van het te style object t.o.v. de plaats van het script (child/parent).
Helaas werkte het plaatsen van de <div>'s naast het script onder de <body> tag ook niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
<!-- Begin
var xmlHttp;
function createXMLHttpRequest () {
if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}
} // End of function createXMLHttpRequest ()
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert(xmlHttp.responseText); // De uitvoer van contactsendmail.php zou hier moeten verschijnen.
if (xmlHttp.responseText == "Your message is succesfully send.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactsenderror').style.display = 'none'
document.getElementById('blackground').style.display = 'block'
document.getElementById('contactconfirm').style.display = 'block'
//document.getElementById('contactform').reset();
}
if (xmlHttp.responseText == "Something went wrong.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactconfirm').style.display = 'none'
document.getElementById('blackground').style.display = 'block'
document.getElementById('contactsenderror').style.display = 'block'
}
}
}
} // End of function handleStateChange()
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript">
<!-- Begin
var xmlHttp;
function createXMLHttpRequest () {
if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}
} // End of function createXMLHttpRequest ()
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//alert(xmlHttp.responseText); // De uitvoer van contactsendmail.php zou hier moeten verschijnen.
if (xmlHttp.responseText == "Your message is succesfully send.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactsenderror').style.display = 'none'
document.getElementById('blackground').style.display = 'block'
document.getElementById('contactconfirm').style.display = 'block'
//document.getElementById('contactform').reset();
}
if (xmlHttp.responseText == "Something went wrong.") {
//document.getElementById('contactform').style.display = 'none'
document.getElementById('contactconfirm').style.display = 'none'
document.getElementById('blackground').style.display = 'block'
document.getElementById('contactsenderror').style.display = 'block'
}
}
}
} // End of function handleStateChange()
Zat te denken of dit van toepassing was
http://forum.dutchjoomla.org/archive/index.php/t-53180.html
Maar het probleem is dat het ook met IE8 is.
Of het is een probleem met e.o.a. plugin i.c.m. flash of zo.
Ga nu eens ff testen met de flash eruit gecommenteerd.
===update === nee, ligt ook niet aan de flash.
Gewijzigd op 02/11/2010 14:45:23 door Rene Wennekes
heb ook al regel 17 en 24 gecommenteerd, werkt ook niet.
==== Update =====
heb de <div>'s van de hidden meldvensters aangepast.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id='blackground' style='position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer; background: #000; opacity: 0.80; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);'>
</div>
<div id="contactconfirm" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactconfirm').style.display = 'none'; document.forms[0].reset();">
<img src="ok.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div style="width: 160px; float: right;">The form is correctly sended.</div>
</div>
<div id="contactsenderror" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactsenderror').style.display = 'none';">
<img src="error.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div style="width: 160px; float: right;">An error occured while sending the form!!!</div>
</div>
<div id="sendformcheck" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('sendformcheck').style.display = 'none';">
<img src="warning.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div id="sendformcheckmessage" style="width: 160px; float: right;"></div>
</div>
</div>
<div id="contactconfirm" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactconfirm').style.display = 'none'; document.forms[0].reset();">
<img src="ok.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div style="width: 160px; float: right;">The form is correctly sended.</div>
</div>
<div id="contactsenderror" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('contactsenderror').style.display = 'none';">
<img src="error.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div style="width: 160px; float: right;">An error occured while sending the form!!!</div>
</div>
<div id="sendformcheck" style="position: absolute; top: 160px; left: 50%; width:360px; height:400px; margin-left: -180px; padding: 20px; border: 1px solid gray; text-align: center; display: none; cursor:hand; cursor:pointer;" onclick="document.getElementById('blackground').style.display = 'none'; document.getElementById('sendformcheck').style.display = 'none';">
<img src="warning.png" alt="" style="float: left; margin: 0px 20px 20px 0px;" />
<div id="sendformcheckmessage" style="width: 160px; float: right;"></div>
</div>
Nu werkt de warning bij verkeerd invullen goed.
Alleen bij de bevestiging na het verzenden krijg ik nog de foutmelding
Gewijzigd op 02/11/2010 23:31:52 door Rene Wennekes