| <!DOCTYPE html> |
| <!-- |
| Copyright 2011 Software Freedom Conservancy. All Rights Reserved. |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <title>ajaxy_page</title> |
| <body> |
| <form action="javascript:updateDom()"> |
| <label>New label text: <input name="typer" type="text"></label> |
| <br/> |
| <label>Select label color: |
| <input name="color" id="red" value="red" type="radio">Red |
| <input name="color" id="green" value="green" type="radio">Green |
| </label> |
| <br/> |
| <label>Create label: |
| <input name="submit" type="submit" value="Submit"> |
| </label> |
| </form> |
| <div id="update_butter" style="display:none"></div> |
| <script> |
| var butter = document.getElementById('update_butter'); |
| |
| var listeners = []; |
| function registerListener(fn) { |
| listeners.push(fn); |
| } |
| |
| function updateDom() { |
| butter.style.display = 'block'; |
| butter.innerHTML = 'Updating'; |
| disableForm(); |
| tick(); |
| } |
| |
| function disableForm() { |
| var inputs = document.getElementsByTagName('input'); |
| for (var i = 0, input; input = inputs[i]; ++i) { |
| input.disabled = true; |
| } |
| } |
| |
| function enableForm() { |
| var inputs = document.getElementsByTagName('input'); |
| for (var i = 0, input; input = inputs[i]; ++i) { |
| input.disabled = false; |
| } |
| } |
| |
| function tick() { |
| var length = butter.innerHTML.substring('Updating'.length).length; |
| if (length != 10) { |
| butter.innerHTML += '.'; |
| setTimeout(tick, 100); |
| } else { |
| enableForm(); |
| var div = document.createElement('div'); |
| var colors = document.forms[0].color; |
| for (var i = 0, color; color = colors[i]; ++i) { |
| if (color.checked) { |
| div.style.backgroundColor = color.value; |
| break; |
| } |
| } |
| div.innerHTML = document.forms[0].typer.value; |
| div.className = 'label'; |
| document.forms[0].typer.value = ''; |
| document.body.appendChild(div); |
| |
| butter.innerHTML = 'Done!'; |
| |
| setTimeout(function() { |
| while (listeners.length) { |
| try { |
| listeners.shift()(div.innerHTML); |
| } catch (e) { |
| butter.innerHTML = 'Exception seen: ' + e; |
| } |
| } |
| }, 100); |
| } |
| } |
| </script> |
| </body> |
