Jump to content

Javascript Ajax Not Working Ie


Taurian
 Share

Recommended Posts

I've copied a script off of w3schools on this page http://www.w3schools.com/PHP/php_ajax_database.aspIt works fine in firefox, opera etc but not IE, it shows an error that says thisMessage: Unknown runtime errorLine: 23Char: 1Code: 0URI: http://localhost/event.rcpparking.com/selectcarpark.jsThis is the line

document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

Here is the rest of the file

var xmlhttp;function showEvent(str){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="event.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){if (xmlhttp.readyState==4){document.getElementById("txtHint").innerHTML = xmlhttp.responseText;}}function GetXmlHttpObject(){if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  return new XMLHttpRequest();  }if (window.ActiveXObject)  {  // code for IE6, IE5  return new ActiveXObject("Microsoft.XMLHTTP");  }return null;}

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Coupon Request Form</title><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="selectband.js"></script></head><body><p><strong> Band </strong>[ Menu -  <a href="coupon.php">Coupon Requests (Home)</a> - <a href="admin/coupon/index.php">Admin</a> ]</p><form id="form1" name="form1" method="post" action="ac_coupon.php">  <div id="txtHint"><b>Band info will be listed here.</b>  <table width="2%" class="adminlist">	<tr>	  <td><table width="610" class="adminlist">		  <tr>			<td width="446"><strong>Date of Show : </strong></td>			<td width="152"><label>			  <input name="frmDateOfShow" type="text" id="frmDateOfShow" value="YYYY-MM-DD" />			</label></td>		  </tr>		  <tr>			<td><strong>Select Band :</strong></td>			<td><? echo "<select name=student value='' style='width:160px;' onchange='showUser(this.value)'>Student Name</option>";// printing the list box select commandwhile($nt=mysql_fetch_array($result)){//Array or records stored in $ntecho "<option value=$nt[id]>$nt[dbBandName]</option>";/* Option values are added by looping through the array */}echo "</select>";// Closing of list box  ?></td>		  </tr>	  </table></td>	</tr>  </table></div></form></body>

Edited by Taurian
Link to comment
Share on other sites

One cause I've seen for this bug is when you have Javascript code inside of an element use innerHTML to change the contents of that same element. So your code has the div called txtHint, and inside of that div is the form with the Javascript code. You need to move the Javascript code out of the div that you're updating, if the code to update the div is inside the div you get that error.There also seem to be some people reporting the error with different tags. If that's the case, try wrapping your response from the server inside a div tag. IE seems to have some issues using innerHTML to add a block element to an inline element.

Link to comment
Share on other sites

One cause I've seen for this bug is when you have Javascript code inside of an element use innerHTML to change the contents of that same element. So your code has the div called txtHint, and inside of that div is the form with the Javascript code. You need to move the Javascript code out of the div that you're updating, if the code to update the div is inside the div you get that error.There also seem to be some people reporting the error with different tags. If that's the case, try wrapping your response from the server inside a div tag. IE seems to have some issues using innerHTML to add a block element to an inline element.
So I shouldn't use the selectband.js. I should have it inline in the html document. Like this:
<script language="JavaScript" type="text/javascript">// JavaScript Documentvar xmlhttp;function showUser(str){xmlhttp=GetXmlHttpObject();if (xmlhttp==null)  {  alert ("Browser does not support HTTP Request");  return;  }var url="getband.php";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlhttp.onreadystatechange=stateChanged;xmlhttp.open("GET",url,true);xmlhttp.send(null);}function stateChanged(){if (xmlhttp.readyState==4){document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}function GetXmlHttpObject(){if (window.XMLHttpRequest)  {  // code for IE7+, Firefox, Chrome, Opera, Safari  return new XMLHttpRequest();  }if (window.ActiveXObject)  {  // code for IE6, IE5  return new ActiveXObject("Microsoft.XMLHTTP");  }return null;}</script>

Link to comment
Share on other sites

You can have it in an external file, but from what I understand if the actual Javascript call (the function call inside the select tag) is inside of the element that gets changed, that will crash IE's parser. So you need to move that function call out of the div. Did you mean to put the entire form in the div, where you make a selection and the form disappears?

Link to comment
Share on other sites

You can have it in an external file, but from what I understand if the actual Javascript call (the function call inside the select tag) is inside of the element that gets changed, that will crash IE's parser. So you need to move that function call out of the div. Did you mean to put the entire form in the div, where you make a selection and the form disappears?
Interesting, so I can just have a button that the user can click after they "Select" the item. As long as the button exists outside of the div it should be ok.Any idea why this wouldn't work?
   <input type="submit" name="Submit" value="Submit"  onclick="showUser(this.value)"/>

Link to comment
Share on other sites

That should work, just make sure it's outside of the div. If your communication is ajax-only, you don't even need a form tag. You can just have your form elements on the page and use a <button> element to put your button wherever you want it. Losing the form may free up your design, you can separate the select box from the button from the feedback div.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...