3
I have created an ajax application which retrievs an xml file and fills in the tab fields on the form.The code works fine in IE while its does not in Mozilla. Can you please let me know if i have to install some plugins to use XPATH?
[HTML]<html>
<head>
<title>SilverLine </title>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear.
*/
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
var tabberOptions = {
/* Optional: instead of letting tabber run during the onload event,
we'll start it up manually. This can be useful because the onload
even runs after all the images have finished loading, and we can
run tabber at the bottom of our page to start it up faster. See the
bottom of this page for more info. Note: this variable must be set
BEFORE you include tabber.js.
*/
'manualStartup':true
};
</script>
<!-- Load the tabber code -->
<script type="text/javascript" src="tabber.js"></script>
<script type="text/javascript">
var request = false;
function getRequestObject() {
if (navigator.userAgent.indexOf("MSIE")>=0) {
var strName="Msxml2.XMLHTTP";
if (navigator.appVersion.indexOf("MSIE 5.5")>=0) {
strName="Microsoft.XMLHTTP";
}
try {
objXmlHttp=new ActiveXObject(strName);
alert ("strName"+strName);
return objXmlHttp;
} catch(e) {
alert("Error. Scripting for ActiveX might be disabled") ;
return;
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0) {
objXmlHttp=new XMLHttpRequest();
alert("mozilla");
return objXmlHttp;
}
}
function createDocument(){
var aVersions = ["MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0",
"MSXML2.DOMDocument","Microsoft.XmlDom"];
if (window.ActiveXObject)
{
for(var i = 0;i<aVersions.length ; i++){
try{
var oXmlDom = new ActiveXObject(aVersions[i]);
//alert("returning .."+i+" "+oXmlDom);
return oXmlDom;
}catch(oError){
}
}
throw new Error ("MSXML is not installed ");
}
else if (document.implementation && document.implementation.createDocument)
{
var xmlDoc=document.implementation.createDocument(""," ",null);
return xmlDoc;
}
else
{
alert ("no");
alert('Your browser cannot handle this script');
}
}
function updateTabInfo() {
if ((request.readyState == 4) && (request.status == 200)) {
var xmlDoc = request.responseXML;
var oXmlDom = createDocument();
alert ("oxml"+oXmlDom);
oXmlDom.load(xmlDoc);
oXmlDom.setProperty("SelectionLanguage", "XPath");
var noOfgroups = oXmlDom.selectNodes("//user/groups/group").length;
var noOfChannels = oXmlDom.selectNodes("//user/channels/channel").length;
var noOfClouds = oXmlDom.selectNodes("//user/clouds/cloud").length;
var oRoot = oXmlDom.documentElement;
var noOfChildren = oRoot.childNodes.length; //groups, channels, clouds
var groupRoot = oRoot.childNodes[0];
alert ("noOfgroups"+noOfgroups);
document.getElementById("group").innerHTML = noOfgroups;
}
}
function callServer(){
// Build the URL to connect to
var url = "http://localhost/user/ABC";
request = getRequestObject();
alert ("req"+request);
// Open a connection to the server
request.open("GET", url, true);
// Set up a function for the server to run when it's done
request.onreadystatechange = updateTabInfo;
// Send the request
request.send(null);
}
</script>
</head>
<body>
<form name="Login" method="post" >
<div class="tabber">
<div class="tabbertab" id = "group">
<h2>Groups</h2>
<p>Group details.</p>
</div>
<div class="tabbertab" id = "channel">
<h2>Channels</h2>
<p>Channel details.</p>
</div>
<div class="tabbertab" id = "cloud">
<h2>Clouds</h2>
<p>Cloud details.</p>
</div>
<div class="tabbertab" id="trend">
<h2>Trends</h2>
<p>User details.</p>
</div>
</div>
<script type="text/javascript">
/* Since we specified manualStartup=true, tabber will not run after
the onload event. Instead let's run it now, to prevent any delay
while images load.
*/
tabberAutomatic(tabberOptions);
</script>
<input type="submit" name="submit" value="submit"> <br>
UserName<input type="text" name="UserName" onChange="callServer();" /><br>
<span id="ReturnedData"></span>
</body>
</html>
The XML file is
Code: ( text )
<?xml version = "1.0" encoding = "UTF-8"?>
<user id ='ABC' name = 'BBBBB BBB'>
<groups>
<group id = 'SL' name = 'SL group'>
<userlist>
<userid id ='RR' name = 'RR'/>
<userid id ='SS' name = 'SS'/>
</userlist>
</group>
<group id = 'NN' name = 'NN group'>
<userlist>
</userlist>
</group>
<group id = 'Web2.0' name = 'Web 2.0 Interest Group'>
<userlist>
<userid id ='SS' name = 'SSSSSS''/>
<userid id ='NN' name = 'NNN'/>
</userlist>
</group>
</groups>
<channels>
<channel id ='CNN' name = 'CNN in June' url ='http://www.ibm.com/developerworks/news/dw_dwtp.rss' start='2007-06-01'/>
</channels>
<clouds>
<cloudid id ='cnn-in-oct' name = 'CNN in October'/>
<cloudid id ='Google-Jan' name = 'Google tags'/>
<cloudid id ='HBO-movies' name = 'HBO movie schedule'/>
</clouds>
</user>[/HTML]
