Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The JavaScript Connection
The JavaScript included in this project is part of an AJAX engine that requests an XML file containing mortgage company statistics. This information is then displayed in the content div. While the companies are added to the content div, they’re given mouseover and mouseout events that are used later to highlight items in the bar chart. Once all of the mortgage companies have been displayed, we add them to a Flash bar chart by passing an array of names and rates. In Firefox, the chart in the Flash movie is not fully instantiated by the time all the JavaScript that’s trying to add the items has been executed in the page. Therefore, I added an onFlashLoaded method that’s called from Flash once the chart is instantiated, and which then adds the items to the chart. On the other hand, IE instantiates the chart and executes the ActionScript before the JavaScript is fully executed; therefore, we need to check the browser type after we’ve completed executing the JavaScript. If the current browser is IE, we need to add the items. Here’s the code:
function processReqChange()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
var response = xmlhttp.responseXML.documentElement;
var lenders = response.getElementsByTagName(’lender’);
for(var i=0; i<lenders.length; i++)
{
names.push(lenders[i].getAttribute(’name’));
rates.push(response.getElementsByTagName(’rate’)[i].firstChild.data);
var payment = response.getElementsByTagName(’payment’)[i].firstChild.data;
var origination = response.getElementsByTagName(’origination’)[i].firstChild.data;
var items = "<div id=’"+ names[i] +"’><span class=’title’>"+ names[i] +"</span> <a href=\"#\" onmouseover=\"javascript:highlightItem(’"+ names[i] +"’, ’#ebebeb’);\" onmouseout=\"javascript:highlightItem(’"+ names[i] +"’, ’#ffffff’);\" >Chart</a><hr><b>Rate:</b> <span class=’main’>"+ rates[i] +"</span><b>Payment:</b> <span class=’main’>"+ payment +"</span><b>Origination:</b> <span class=’main’>"+ origination +"</span></div><br/>";
document.getElementById(’content’).innerHTML += items;
}
}
else
{
alert("There was a problem receiving the XML data:\n" + xmlhttp.statusText);
}
}
if(navigator.appName.indexOf("Microsoft") != -1) flashMovie(’chart’).addAllItems(names, rates);
}
function onFlashLoaded()
{
flashMovie(’chart’).addAllItems(names, rates);
}
In order to call a method in the Flash movie from JavaScript, we need to create a JavaScript method that retrieves the Flash object by name, by checking the browser type and returning the object to the calling method. This is the method that we use to reference the important name and id attributes in the Flash object that I discussed earlier.
function flashMovie(name)
{
if(navigator.appName.indexOf("Microsoft") != -1)
{
return window[name];
}
else
{
return document[name];
}
}