Now that the AJAX class has been created, it is time to test
it on a Web Form. The first thing to do is add a new ScriptManager and load
inside the Script Reference section the AJAX class created above. You will end
up with something like this:
Listing 9
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="InlineEdit.js" />
</Scripts>
</asp:ScriptManager>
Now to enable editable areas on the page, add the following
span tag.
Listing 10
<span class="editText" id="txtName"><h1>Inline-Edit with AJAX 1.0 Extensions! </h1></span>
You will also need to attach to the pageLoad event of the
Application class that is part of the AJAX Extensions Client Library.
In the pageLoad you will create a new instance of the
inline-edit AJAX class so that all the editable spans are configured for
editing.
The pageLoad function body is shown in Listing 8.
Listing 11
var inlineEdit = null;
function pageLoad(sender, args) {
// Create a new instance of the class
inlineEdit = new bhaidar.CodeSuite.AJAX.InlineEdit("txtName");
// Initialize the InlineEdit
inlineEdit.EditBoxInit();
}A new instance of the Inline-Edit AJAX class is created and
the EditBoxInit() function is fired. Now you are ready to test your Web form in
the browser and try to edit the text on the spot.
Figure 1 shows the Web form in its read-only original state.
Figure 1
Figure 2 shows the Web Form with a click is done on the
editable span. As you can see, the text that was first inside the span is now
displayed in a Textbox on the page. Once an Enter key is done, you will see how
the Web form now shows the new edited text.
Figure 2
