To start, Inplace.html includes all the necessary JavaScript source files. Then, I put together a imple table with a paragraph containing the in-place editable data. At the end of the file, I insert a small bit of script that creates an InPlaceEditor object for the paragraph. That InPlaceEditor constructor takes as arguments the ID of the paragraph as well as the URL of the page that will handle the submission after I’m done editing. In this case, that page is submitted.html; but in reality, it would be an ASP.NET, Java EE, or PHP page or some other dynamic Web technology.

Listing 6 shows the simple submitted.html file.

Listing 6. Submitted.html

<p>Name changed!</p>

Now to test it. I first open my browser to the HTML file. There, I see the original text. As I mouse over the text, it turns yellow, as shown in Figure 3.

Figure 3. The starting point of in-place editing

This yellow highlighting is a visual indicator to users that they can edit the field by clicking it. So, I click the field and get the Name field, an ok button, and a cancel link, as shown in Figure 4.

Figure 4. Editing the text after clicking it

I then change the text and click ok, which posts the data to the server (or the submitted.html page, in this case). The server then returns the HTML page that should replace the original text. In this case, I send back Name changed! (as shown in Figure 5); in reality, it would probably be the new value of the data.