Magazine
 
Quick Review:Ajax
 
Ajax and XML: Five cool Ajax widgets
 

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.

Apr 2008 | Java Jazz Up | 53
previous
index
next
 
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,

30
, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53 , 54, 55, 56, 57,

58
, 59, 60, 61, 62, 63 , 64, 65 , 66 , 67 , 68 , 69 , 70, 71, 72, 73, 74, 75, 76, 77, 78,   Download PDF