<!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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>XML TEST</title>
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type='text/javascript' src='scripts/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#destination").autocomplete(["Aberdeen","Abu Dhabi","Abuja","Addis Ababa","Adelaide","Albuquerque","Amman","Amsterdam","Anchorage","Asheville","Athens","Atlanta","Auckland","Austin","Baltimore","Bangkok","Barcelona","Beijing","Belfast","Berlin","Big Island","Bilbao","Birmingham","Boston","Bridgetown","Bristol","Brussels","Budapest","Buenos Aires","Burlington","Cairo","Calgary","Canberra","Cape Town","Cappadocia","Cardiff","Castries","Charleston","Chiang Mai","Chicago","Chincoteague Island","Christchurch","Cleveland","Copenhagen","Costa del Sol","Cote d'Azur","Dakar","Dallas-Fort Worth","Delhi","Denver","Detroit","Dubai","Dublin","Dubrovnik","Durban","Edinburgh","Fez","Florida Keys","Frankfurt","Garden Route","Gda'sk","Geneva","Glasgow","Grand Cayman","Halifax","Hamburg","Hartford","Havana","Helsinki","Hong Kong","Houston","Indianapolis","Istanbul","Jackson"," Mississippi","Jerusalem","Johannesburg","Kathmandu","Kiev","Kingston","Kuala Lumpur","Las Vegas","Leeds","Lima","Lisbon","Loire Valley","London","Los Angeles","Madrid","Malta","Manchester","Manila","Marrakech","Melbourne","Memphis","Mexico City","Miami","Milan","Milwaukee","Minneapolis-St Paul","Monte-Carlo","Montreal","Moscow","Mumbai","Munich","Nairobi","Nashville","National Parks and Reserves","Nevis","New Haven","New Orleans","New York City","Newport","Nice","Oahu","Oklahoma City","Omaha","Orlando","Oslo","Oxford","Paris","Perth","Philadelphia","Phoenix","Pittsburgh","Port Elizabeth","Portland (Oregon)","Prague","Quebec City","Quito","Raleigh","Raleigh","Reykjavik","Rio de Janeiro","Riyadh","Rocky Mountains","Rome","Salt Lake City","San Diego","San Francisco","San Juan","Santa Fe","Sao Paulo","Sapporo","Seattle","Seoul","Shanghai","South West","Split","St Croix","St Louis","St Petersburg","St Thomas","Stockholm","Sydney","Tallinn","Tampa","Tel Aviv","The Amazon","The Highlands","The Nile Valley","The West","Tokyo","Toronto","Valencia","Vancouver","Vienna","Warsaw","Washington DC","York","Yucatan Peninsula","Zagreb","Zanzibar","Zurich"],
{
delay:10,
max:10,
autoFill: true
});
});
function submitForm(){
var region = $("#destination").val();
if (region=="") {
$("#messageBox").html("Enter destination, please!").show();
return false;
} else {
$("#messageBox").hide();
}
var monthValue = $('#month').val();
var monthText;
if ($('#month').val()!=null){ monthText = $('#month :selected').text(); }
// (XML, XSL, Target, Key1, key2, Key3, Key4, Key5)
transformXML = new XMLProcessor('xml/events.xml', 'xml/events.xsl', 'generateXML', region, monthValue, monthText);
transformXML.Build();
transformXML.Load();
}
function XMLProcessor(XML, XSL, Target, Param1, Param2, Param3, Param4, Param5){
document.getElementById(Target).innerHTML = "";
var resultDocument;
var platformMoz = (document.implementation && document.implementation.createDocument);
var platformIE = (!platformMoz && document.getElementById && window.ActiveXObject);
this.Load = function Load(){
if(platformIE){
document.getElementById(Target).innerHTML = resultDocument;
} else {
document.getElementById(Target).appendChild(resultDocument);
}
return true;
}
this.Build = function Build(){
if(platformIE){
//Load DOM and variables
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
var xslProc;
// Load XSL
xslDoc.async = false;
xslDoc.resolveExternals = false;
xslDoc.load(XSL);
xslt.stylesheet = xslDoc;
// Load XML
xmlDoc.async = false;
xmlDoc.resolveExternals = false;
xmlDoc.onreadystatechange=verify;
xmlDoc.load(XML);
// XSLT processor
xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
//传递参数
缺少代码
// Transform
xslProc.transform();
// Output
resultDocument = xslProc.output;
}
if(platformMoz){
var xsltProcessor = new XSLTProcessor();
// Load XML
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.onreadystatechange=verify;
myXMLHTTPRequest.open("GET", XML, false);
myXMLHTTPRequest.send(null);
var xmlSource = myXMLHTTPRequest.responseXML;
// Load XSL
var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", XSL, false);
myXMLHTTPRequest.send(null);
xslStylesheet = myXMLHTTPRequest.responseXML;
//Transform
xsltProcessor.importStylesheet(xslStylesheet);
//Pass Parameter
MISSING CODE
// Ouput
resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
}
function verify() {
if (xmlDoc.readyState == 1){
if(platformIE){
document.getElementById(Target).innerHTML = "<div class='events_loading'>Loading events, please wait...</div>";
} else {
document.getElementById(Target).appendChild("<div class='events_loading'>Loading events, please wait...</div>");
}
}
}
}
}
</script>
</head>
<body>
<style>
body { font: 12px verdana; }
.row { clear: both; padding-bottom: 10px;}
.col1 { float: left; width: 90px; padding-top: 3px; font-weight: bold; }
#messageBox { font: 10px verdana; color: #EF0000; }
</style>
<form action="javascript:;" onsubmit="submitForm(this.form);" name="eventsForm" id="eventsForm">
<div class="row">
<div class="col1">Destination:</div>
<div class="col2"><input id="destination" name="destination" /> <span id="messageBox" ></span></div>
</div>
<div class="row">
<div class="col1">Month:</div>
<div class="col2">
<select name="month" id="month">
<option value="">Any</option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</div>
</div>
<div class="row">
<div class="col1"> </div>
<div class="col2"><input class="submit" type="submit" value="Search" border="0" /></div>
</div>
</form>
<div id="generateXML" />
</div>
</body>
</html>
我知道我需要编写的代码允许XMLProcessor将params传递给xsl文件(从而允许用户过滤结果)。
有人能给我一些提示吗?我知道很少的javascript,真的非常需要完成这项工作。我使用谷歌但不知道从哪里开始。
答案 0 :(得分:0)
要传递参数,我使用模板:
<xsl:template name="test">
<xsl:param name="name"/>
<script type="text/javascript" src="scripts/jquery.js"></script>
....
<script>
<![CDATA[
var chart1;
$(document).ready(function() {
.....
title: {
text: ']]><xsl:value-of select="$name"/><![CDATA['
},
...
}
]]>
</script>
因此您可以在脚本中添加类似的参数。 然后,当你想要调用它时,你会这样做: ... ...