XSLT Using jQuery transform.js Plugin
The following code displays a form called "check_params" with 2 text areas and a button called "xgen". It uses jQuery to bind an on-click action to the xgen button. The action makes an Ajax call to check_conflicts.php using the values in the check_params form. check_conflicts.php returns an XML document which is transformed using the "conflict.xsl" stylesheet and displayed in the "html_results" div.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Patch Conflict Checker</title> <link href="CSS/isd_layout.css" rel="stylesheet" type="text/css" /> <link href="CSS/SWAN_Style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-dynamic-form/lib/jquery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-dynamic-form/lib/jquery/jquery-ui-1.7.2.custom.min.js"> </script> <script type="text/javascript" src="jquerytransform/js/jquery.transform.js"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#xgen").bind("click", function(){ $("div#html_results").transform({ xml:{ url:"check_conflicts.php", data:$("#check_params").serialize(), type:"POST", dataType:"xml" }, xsl:"conflict.xsl" }); }); </script> </head> <body> <form id="check_params" method="get" action="#"> <table> <tr><td>Candidate <br/>Patch Numbers:</td> <td><textarea name="patch_list" cols="40" rows="6"> </textarea></td> </tr> <tr><td>Target Patches:</td> <td><textarea name="upi_list" cols="40" rows="6"> </textarea></td> </tr> <tr><td></td> <td><input id="xgen" type="button" value="Check Conflicts"/> </td> </tr> </table> </form> <div id="html_results"/> </body> </html>