Board index » delphi » Ajax in Webbroker
mark horrocks
 Delphi Developer |
Ajax in Webbroker2008-02-24 06:27:12 PM delphi18 I have been playing around with Ajax in my web broker apps lately. It is pretty easy thanks to the Ajax toolkit from www.ajaxtoolkit.com In addition, I have been looking for a way to replace internet express with a decent grid as internet express does not work in Firefox and is incomplete and still relegated to demo status in Delphi. I have found a scrollable HTML table using Javascript here www.webtoolkit.info/dhtml.html This works pretty well and, in combination with Ajax it can make a pretty powerful master detail or combo box solution without paying an arm and a leg for Intraweb. One problem with XMLHttpRequest is that Javascript loaded in innerHTML is not well supported in the browser, particularly in Firefox. The method that I had been using, thanks to Marco Cantu, was this function AjaxAboutUs() { AjaxRequest.get({ 'url':'http://localhost/helene/about_us.html', 'onSuccess':function(req) { document.getElementById('main-content').innerHTML = req.responseText; } }) } This works fine until the page being loaded into HTML contains form elements or Javascript. One trap which caused me problems for many months was that [table] [form] will not dispaly in Firefox but works fine in IE. The solution is to replace it with [form][table] and then it works fine. However, I have seen reports that some form elements do not behave correctly in IE when using innerHTML. In my app I have scrollable table of the master items with a link to get the detail and display it in a div below. If the detail is in a scrollable table which needs to run a javascript function it will render as a plain HTML table, the Javascript to setup the table will only run in the body onload event. The answer to this problem and fixing the form problem is to write the innerhtml to a javascript variable and then use the DOM appendchild method to append it to the div. Here is an example. function loaddetailtable() { AjaxRequest.get({ 'url':'http://localhost/scrolltable/table3.html', 'onSuccess':function(req) { var newdiv = document.createElement("teamtable"); newdiv.innerHTML = req.responseText; var container = document.getElementById("table-3"); container.appendChild(newdiv); } }) } This now works fine, but what happens when the user selects the next master record? The function above will append the next detail table which will now only display as plain HTML (appended to the previous table) because we have a javscript conflict due to having 2 identical table IDs. We need first to remove the previous element child and replace it with thenew one. Here is the solution. This will now allow you to have a master table on your page and write the detail table using Ajax and repalce it with the details of the next master if needed. function loaddetailtable() { AjaxRequest.get({ 'url':'http://localhost/scrolltable/table3.html', 'onSuccess':function(req) { var newdiv = document.createElement("teamtable"); newdiv.innerHTML = req.responseText; var container = document.getElementById("table-3"); while (container.firstChild) {container.removeChild(container.firstChild);} container.appendChild(newdiv); } }) } I thought I might post this here to encourage web broker users to use Ajax in their apps and to provide a solution to anyone who encounters the same problems as I did. There is really precious little written about these problems that I could find so i hope this saves soembody some time. Mark Horrocks |