Jump to content

Works in Chrome/FF but not IE 7

wth

By wth
in Javascript Help

 Share

Recommended Posts

wth Newbie

wth

Posted
Posted

Hi everyone,

 

I've been searching for a couple hours and haven't been able to fix my issue.  Everything works as expected in Chrome and FF but not IE7.  It used to create the connection in IE7 but not update the div but now it's not even accessing the background php page.

 

main page:

 

<?php
include_once "MySQL.php";

$RobDB = new MySQL;
$RobDB->NewMySQL("localhost");
?>

<html>
<head>
	<link rel="stylesheet" type="text/css" href="viewer.css" />
	<title>ROB Viewer</title>
	<script type="text/javascript" src="viewer.js">
	</script>
</head>
<body>
	<table id="options">
		<tr>
			<td>Date</td>
			<td>Store</td>
			<td>Pgc</td>
		</tr>
		<tr>
			<td>
				<select id="Date" onchange="SelectStore(this.value);">
					<option value="">Select Date</option> 
					<?php
					$query = "SELECT DISTINCT date_ship FROM shipments;";
					$RobDB->Select($query);
					while ($row = mysql_fetch_assoc($RobDB->db_result))
					{
						echo '<option value="'.$row['date_ship'].'">'.$row['date_ship'].'</option>';
					}
					?>
				</select>
			</td>
			<td>
				<select id="Store" onchange="SelectPgc(this.value);">
					<option value=""></option>
				</select>
			</td>
			<td>
				<select id="Pgc" onchange="GetRecords(this.value);">
					<option value=""></option>
				</select>
			</td>
		</tr>
	</table>
	<br />
	<table id="items">
	</table>
</body>
</html>	



<?php $RobDb->Close(); ?>

Javascript:

function AjaxO()
{
var xmlhttp = false;
var modes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
if (window.ActiveXObject)
{
	for (var i=0; i<modes.length; i++)
	{
		try
		{
			xmlhttp = new ActiveXObject(modes[i]);
		}
		catch(e)
		{
		}
	}
}
else if (window.XMLHttpRequest)
{
	xmlhttp =  new XMLHttpRequest();
}
return xmlhttp;
}
function SelectStore(date)
{
if (date=="") { return; }
var xmlhttp = AjaxO();
if (xmlhttp)
{
	alert("good");
}
xmlhttp.open("GET","/rob/getStore.php?q="+date,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("Store").innerHTML=xmlhttp.responseText;
	}
}
}

function SelectPgc(store)
{
var date = document.getElementById("Date").value;
if (store=="") { return; }
var xmlhttp = AjaxO();
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("Pgc").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/rob/getPgc.php?q="+store+"&p="+date,true);
xmlhttp.send(null);
}
function GetRecords(pgc)
{
var date = document.getElementById("Date").value;
var store = document.getElementById("Store").value;
if (pgc=="") { return; }
var xmlhttp = AjaxO();
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("items").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/rob/getRecords.php?s="+store+"&d="+date+"&p="+pgc,true);
xmlhttp.send(null);
}

Background php page:

<?php
include "MySQL.php";
$date=$_GET['q'];

$db = new MySQL;
$db->NewMySQL("localhost");

$query = "SELECT DISTINCT store FROM shipments WHERE date_ship='" . $date . "';";
$db->Select($query);

echo '<option value="">Select Store</option>';
while ($row = mysql_fetch_assoc($db->db_result))
{
	echo '<option value="' . $row['store'] . '">' . $row['store'] . '</option>';
}

$db->Close();
?>

 

There are a couple other background pages but they are very similar to this one and it's the first one called.  From what I've been able to figure out from alerts it looks like it's creating the xmlhttprequest object fine in IE but it's not sending the request.

 

Thanks for your help.

Link to comment
https://forums.phpfreaks.com/topic/251913-works-in-chromeff-but-not-ie-7/
Share on other sites
wth Newbie

wth

Posted
  • Author
Posted

You have not declared a DOC type. IE demands one. Try that first.

 

Thanks, forgot about that.  I added the following for DOCTYPE and edited HTML. 

 

<!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" xml:lang="en">

 

Now I'm back to IE is sending the request but not updating the screen with the response.  In Apache's logs the url it is sending to is correct.

 

So I'm still stuck with IE not updating the screen with the response of the AJAX request.

 

Thanks

sunfighter Newbie

sunfighter

Posted
Posted

Played with all morning. At first the js stopped on the first xmlhttp.open. After fighting this a while, I think it's because my cashe wont flesh auto. I had to kill the browser and re open.

 

What I found out is - IE dies because the <select onchange="GetRecords(this.value);">  is declared. When I removed it and put it in the called php script things worked.

 

I have put the entire dropdown in the called script and echo it to a div in the main script. I am sure you will have to work on these scripts but the main idea is there and they work.

Main script:

<!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" xml:lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="viewer.css" />
	<title>ROB Viewer</title>
<script type="text/javascript">

function AjaxO()
{
var xmlhttp = false;
var modes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
if (window.ActiveXObject)
{
	for (var i=0; i<modes.length; i++)
	{
		try
		{
			xmlhttp = new ActiveXObject(modes[i]);
		}
		catch(e)
		{
		}
	}
}
else if (window.XMLHttpRequest)
{
	xmlhttp =  new XMLHttpRequest();
}
return xmlhttp;
}
function SelectStore(date)
{
if (date=="") { return; }
var xmlhttp = AjaxO();
xmlhttp.open("GET","test_2.php?q="+date,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("Store").innerHTML=xmlhttp.responseText;
	}
}
}

function SelectPgc(store)
{
var date = document.getElementById("Date").value;
if (store=="") { return; }
var xmlhttp = AjaxO();
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("Pgc").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","test_3.php?q="+store+"&p="+date,true);
xmlhttp.send(null);
}
function GetRecords(pgc)
{
var date = document.getElementById("Date").value;
var store = document.getElementById("Store").value;
if (pgc=="") { return; }
var xmlhttp = AjaxO();
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
		document.getElementById("items").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/rob/getRecords.php?s="+store+"&d="+date+"&p="+pgc,true);
xmlhttp.send(null);
}

</script>
</head>
<body>
	<table id="options">
		<tr>
			<td>Date</td>
			<td>Store</td>
			<td>Pgc</td>
		</tr>
		<tr>
			<td>
				<select id="Date" onchange="SelectStore(this.value);">
					<option value="">Select Date</option>
					<option value="date_ship">date_ship</option>
				</select>
			</td>
			<td id="Store"></td>
			<td id="Pgc"></td>
		</tr>
	</table>
	<br />
	<table id="items">
	</table>
</body>
</html>

 

Calls two phps via AJAX

First - test_2,php:

<?php
echo '<select onchange="SelectPgc(this.value);">';
echo '<option value="">Select Store</option>';
echo '<option value="place">place</option>';
echo '<option value="plac">plac</option>';
echo '<option value="pla">pla</option>';
echo '<option value="pl">pl</option>';
echo '<option value="p-">p-</option>';
?>

 

second named test_3,php

<?php
echo '<select onchange="GetRecords(this.value);">';
echo '<option value="">Select Store</option>';
echo '<option value="GetRecord_1">GetRecord_1</option>';
echo '<option value="GetRecord_2">GetRecord_2</option>';
echo '<option value="GetRecord_3">GetRecord_3</option>';
echo '<option value="GetRecord_4">GetRecord_4</option>';
echo '<option value="GetRecord_5>GetRecord_5</option>';
?>

wth Newbie

wth

Posted
  • Author
Posted

Thanks for your awesome help sunfighter.

 

While reworking the site to just go around the IE issue I think I found out what was wrong.  Though I didn't know it extended to Selects also.  I was populating data inside a Table and it wouldn't work.  I'm pretty sure IE can only update Divs and not Tables.  I put the opening and closing table tags in the outside php and inserted a div to use innerHTML on and it worked.

 

I think what I may do is add a div for the Selects and call it with default parameters on page load.  That way they can then update as needed through the external file.

 

Thanks!

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.