Someone help me solve this query. My ajax code which seems to be not working with IE8 browser. It has got no issues with any other browser. The functionality is to bring dynamic values of "Snowboards Sold" and "Cash for the Slopes:" after every time "show Me the Money button" is clicked.
The code from random values are enter code hereproduced using php. I believe there is nothing I need to change in that code as this is a browser issue.
The ajax code is given below:
<head>
<title>Boards 'R' Us</title>
<link rel="stylesheet" type="text/css" href="boards.css" />
<script type="text/javascript" src="text-utils.js"> </script>
<script language="javascript" type="text/javascript">
var request = null;
//Declaring object for browsers
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHttp");
} catch (failed) {
request = null;
}
}
}
if (request == null)
alert("Error creating request object!");
}
//function called on clicking show me the money button clicked
function getBoardsSold() {
createRequest();
var url = "getUpdatedBoardSales-ajax.php";
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
var newTotal = request.responseText;
var boardsSoldEl = document.getElementById("boards-sold");
var cashEl = document.getElementById("cash");
replaceText(boardsSoldEl, newTotal);
/* Figure out how much cash Katie has made */
var priceEl = document.getElementById("price");
var price = getText(priceEl);
var costEl = document.getElementById("cost");
var cost = getText(costEl);
var cashPerBoard = price - cost;
var cash = cashPerBoard * newTotal;
/* Update the cash for the slopes on the form */
cash = Math.round(cash * 100) / 100;
replaceText(cashEl, cash);
}
}
</script>
</head>
<body>
<h1>Boards 'R' Us :: Custom Boards Report</h1>
<div id="boards">
<table>
<tr><th>Snowboards Sold</th>
<td><span id="boards-sold">1012</span></td></tr>
<tr><th>What I Sell 'em For</th>
<td>$<span id="price">249.95</span></td></tr>
<tr><th>What it Costs Me</th>
<td>$<span id="cost">84.22</span></td></tr>
</table>
<h2>Cash for the Slopes:
$<span id="cash">167718.76</span></h2>
<form method="GET">
<input value="Show Me the Money" type="button"
onClick="getBoardsSold();" />
</form>
</div>
</body>
</html>
Might i recommend the very standard and widely used JQUERY?
http://docs.jquery.com/Downloading_jQuery
http://api.jquery.com/jQuery.get/
And then for a little very simple magic, replace the portion about creating an AJAX and the call by this:
$.get('getUpdatedBoardSales-ajax.php', updatePage);
Keep your updatePage function as it is already and you're set!