<%@ Page Language="C#" %> <% // OrteLookup.aspx // A sample that is showing the integration of AJAX actions // and a field with LookUp functionality. // Copyright (c) by Matthias Hertel, http://www.mathertel.de // This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx // ----- // 18.11.2005 WebService function name changed. %> <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Credit calculation Form Sample</title> <link href="/mathertel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/ajaxcore/ajax.js"></script> <script type="text/javascript" src="/ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S02_AJAXCoreSamples/KreditCalc.asmx"></script> <script type="text/javascript" src="/ajaxcore/ajaxForms.js"></script> <style> .AJAXFORMEXCEPTION { color: red; display: none; } TD { vertical-align: top; } </style> </head> <body> <mh:Banner ID="Banner1" runat="server" /> <mh:Title ID="Title1" runat="server" /> <a style="position: absolute; right: 32px; top: 10px" href="../ViewSrc.aspx">View Source</a> <hr /> <p>This sample page shown how to implement a form with fields that can be changed by the user without a need for a submit button. The values on the right as well as the graph at the bottom will be calculated and displayed with only a small delay.</p> <hr /> <div id="frm" onkeyup="ajax.Start(action1, 'frm');ajax.Start(action2, 'frm')" style="margin: 2px; padding: 2px; border: solid 1px green"> <table> <tr> <td> <label for="loan">Loan amount:</label></td> <td style="width: 280px"> <input id="loan" name="LOAN" value="100000" /> €<br /> <span class="AJAXFORMEXCEPTION" name="LOAN"></span></td> <td style="width: 20px"></td> <td> <label>Estimated monthly payment:</label></td> <td> <input name="MONTHLYREPAY" disabled="disabled" /> €</td> </tr> <tr> <td> <label for="rate">Yearly interest rate:</label></td> <td> <input id="rate" name="RATE" value="5.40" /> % per year<br /> <span class="AJAXFORMEXCEPTION" name="RATE"></span></td> <td></td> <td> <label>Years to repay loan:</label></td> <td> <input name="REPAYYEARS" disabled="disabled" /> €</td> </tr> <tr> <td> <label for="repay">Repayment:</label></td> <td> <input id="repay" name="REPAY" value="1.00" /> % per year<br /> <span class="AJAXFORMEXCEPTION" name="REPAY"></span></td> <td></td> <td> <label>Total payment:</label></td> <td> <input disabled="disabled" name="TOTALPAYMENT" /> €</td> </tr> <tr> <td colspan="3"> <p style="color: red; font-weight: bold">Warning! Do not rely on these numbers, they may be false!</p> </td> <td> <label>Total interest:</label></td> <td> <input disabled="disabled" name="TOTALINTEREST" /> €</td> </tr> </table> </div> <div id="a"> <h2>KreditData</h2> <div style="position: relative; border: solid 1px blue; height: 200px; width: 600px"> <img alt="blue" src="blue.gif" /><img alt="red" src="red.gif" /> </div> </div> <p>If this graphic is not shown at once but is assembled slowly line by line, it's because of an IE bug. Just reload the page and try again. It can be fast!</p> <p>Also have a try to the error handling when entering a non numeric value into the amount field...</p> <hr /> <p>This sample uses HTML, Javascript and the XMLHTTP object on the client to call a WebService.</p> <p>This page is part of the <a href="http://ajaxaspects.blogspot.com/">http://ajaxaspects.blogspot.com/</a> project.</p> <hr /> <script type="text/javascript"> var xsltDoc = null; // declare an AJAX action var action1 = { delay: 200, prepare: ajaxForms.getData, call: proxies.KreditCalc.Calc, finish: ajaxForms.setData, // function (val, obj) { ajaxForms.setData(val, obj); ajax.Start(action2, obj); }, onException: ajaxForms.processException } // action1 // declare an AJAX action var action2 = { name: "Amortization", delay: 800, prepare: ajaxForms.getData, call: proxies.KreditCalc.Amortization, finish: displayAmortization, onException: proxies.alertException } // action2 // how to use the Calc webservice without the ajax engine: function calcSynchron() { proxies.KreditCalc.Calc.onException = proxies.alertException; proxies.KreditCalc.Calc.func = null; var xdata = ajaxForms.getData('frm'); var s = proxies.KreditCalc.Calc(xdata); ajaxForms.setData(s, 'frm'); } // calcSynchron // calculate the Amortization on request function displayAmortization(val, obj) { if (typeof (XSLTProcessor) != "undefined") { // Mozilla... // Load the xsl file using synchronous (third param is set to false) XMLHttpRequest if (xsltDoc == null) { var x = new XMLHttpRequest(); x.open("GET", "KreditBars.xslt", false); x.send(null); xsltDoc = x.responseXML; // 21.07.2005 Bug and workaround in Mozilla/ Firefox: // if the return mime-type of the request is not text/xml, then the responseXML is not created. // create it manually... if ((xsltDoc == null) && (x.responseText != null) && (x.responseText.length > 0)) xsltDoc = ajax._getXMLDOM(x.responseText); } // if // Finally import the .xsl var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsltDoc); var fragment = xsltProcessor.transformToFragment(ajaxForms._getXMLDOM(val), window.document); document.getElementById("a").innerHTML = ""; document.getElementById("a").appendChild(fragment); } else { // IE if (xsltDoc == null) { var xsltDoc = new ActiveXObject("Msxml2.DOMDocument"); xsltDoc.async = false; xsltDoc.load("KreditBars.xslt"); } // if var srcTree = new ActiveXObject("Msxml2.DOMDocument"); srcTree.async = false; srcTree.loadXML(val); a.innerHTML = srcTree.transformNode(xsltDoc); } // if } // displayAmortization </script> </body> </html>
This page is part of the http://www.mathertel.de/ web site.
For updates and discussions see http://ajaxaspects.blogspot.com/.