The Transform plugin enables users to easily make cross-browser XML transformations with XSL. The plugin does not rely on additional libraries and utilizes all ajax options. Very flexible and easy to use.Transform features include:

Asynchronous or non-asynchronous calls

Multiple asynchronous transformations at once

Pass an object or html for a loading message while xml and xsl is retrieved

Automatically transform element by providing a custom transform attribute to the element

Supports passing ajax objects for xml and xsl retrieval

Request data from URL or pass as string

Works with xsl:import and xsl:include (even Safari and Chrome)

Pass custom parameter values to XSL and callback functions

Custom handlers for 'success', 'error', and 'complete'

Non-asynchronous calls return transformed HTML

Option to append XML and XSL as a data island

Works with selectors

No ActiveX objects

Tested in IE6/8, Firefox3, Opera 9, Safari 3, Chrome, Netscape 8, and Flock

Examples: - More available in download

  1. //Simple request for element with id="result" 
  2. $("#result").transform({xml:"file.xml",xsl:"file.xsl"}); 
  3. -or- 
  4. $.transform({el:"#result",xml:"file.xml",xsl:"file.xsl"}); 
  5. //With XSL parameter 
  6. $("#result").transform({ 
  7.     xslParams:{name:"value"}, 
  8.     xml:"file.xml",xsl:"file.xsl" 
  9. }); 
  10. //Non-async returns HTML 
  11. var html = $.transform({async:false,xml:"file.xml",xsl:"file.xsl"}); 
  12. //Custom handlers 
  13. $("#result").transform({ 
  14.     success:someFunc,error:someFunc,complete:someFunc, 
  15.     xml:"file.xml",xsl:"file.xsl" 
  16. }); 
  17. //Pass XML and XSL as string 
  18. $("#result").transform({xslstr:[xsl string], xmlstr:[xml string]}); 
  19. //Use transform attribute to transform on load with msg 
  20. <div transform='{xml:"file.xml",xsl:"file.xsl",msg:$("#loadingmsg")}'></div> 
  21. //Request xml from web service by using an ajax object for the xml instead of file name 
  22. $("#result").transform({ 
  23.     xml:{ 
  24.         url:"service.asmx/AddTogether", 
  25.         data:{ 
  26.             y:$("#y").val(), 
  27.             x:$("#x").val() 
  28.         }, 
  29.         type:"POST", 
  30.         dataType:"xml" 
  31.     }, 
  32.     xsl:"xsl/service.xsl" 
  33. }); 

Workarounds - Getting cross-browser support meant making some unique modifications to the script. If you have any issues with the plugin this is a good place to look for issues.


The href property of xsl:import and xsl:include elements are converted to fully qualified urls. This function may not work for all scenarios.

Safari and Chrome do not support xsl:import and xsl:include. To simulate this, the transform plugin loops through all included/imported xsl files and loads them through a non-asyncronous ajax call. Templates and parameters within those files are then loaded into the main stylesheet ignoring any duplicates and the import/include node is removed. Any import/include files which have another import/include reference should still work, but has not really been tested.

IE implementation would not set parameters in an imported/included file (result of not using ActiveX). Any included parameters are added and set if they are missing in the main xsl file.

When using the server transform file you must set values in the $.transform_config object. These values are not set dynamically and identify the language (asp or php), path to the server transform file, and path from the javascript file to the page.

转载请注明:代码家园 » Transform