Progressive Enhancement example
Intro
| Step 1: The universal form
| Step 2
| Step 3
Back in the day of the static DOM, you'd have written the UI so that clicking the "edit" link sent you to another page,
where the user fills in the form and submits it to another page. (When was that day? Depending on who you talk to, it ended in the early 90's with ECMAscript,
or in 2005 when "Ajax" became a buzzword, or somewhere in between. That's not the point.)
We can still write it that way. The form above is pure form submission 101, and is rendered with the following code:
<div id="view" class="data" style="display:block">
Billy Ray was a
<a href="staticForm.php"
id="link">preacher's son</a>
</div>
[the following markup is in the staticForm.php file]
<form action="progressive_enhancement_tutorial.php">
<span>Billy Ray was a </span>
<input type="text" name="billyray" value="preacher's son" />
<input type="submit"
value="Save changes" />
<a href="progressive_enhancement_tutorial.php">Return without changing</a>
</form>
The idea is that when we add javascript, the script will change the form elements to suit its new interface.
And if the browser doesn't support javascript, then the script doesn't run, and the form is not altered from the original state we've already given it.
< Introduction
|
Step 2: The Javascript handler >
