• Choose a category
• All
• Classic-Fiction

Licensed to jonathan zheng

448

CHAPTER 11

The enhanced Ajax web portal

11.5 Adding Ajax autosave functionality

Using Ajax allows us to implement an autosave feature that can be fired by any event without the user knowing that it is happening. Normally, the user would have to click a button to force a postback to the server. In this case, we will be firing the autosave with the onmouseup event, which ends the process of dragging and resizing events. If we were to fire a normal form submission on the onmouseup event, the user would lose all of the functionality of the page, disrupting her workflow. With Ajax, the flow is seamless.

11.5.1 Adapting the library

As we mentioned earlier, the code from JavaScript DHTML libraries is normally cross-browser compliant, which frees us from spending time getting cross-browser code to work correctly. If you look at the code in the external JavaScript file, AjaxWindow.js, you’ll see a lot of functionality (which we will not discuss here because of its length). There are functions that monitor the mouse movements, and one function that builds the windows. There are functions that set the position of the windows, and another function that sets the size. Out of all of these functions, we need to adapt only one to have our window save back to the database with Ajax. Adapting the DHTML library for Ajax

The DHTML library functions for dragging and resizing windows use many event handlers and DOM methods to overcome the inconsistencies between browsers. The dragging and resizing of the windows is completed when the mouse button is released (“up”). Therefore, we should look for a function that is called with the onmouseup event handler in the AjaxWindow.js file. It contains the following code, which is executed when the mouse button is released:

document.onmouseup = function(){

bDrag = false;

bResize = false;

intLastX = -1;

document.body.style.cursor = "default";

elemWin="";

bHasMoved = false;

}

In this code, a lot of booleans are being set to false to indicate that their actions have been canceled. The cursor is being set back to the default. The line that we need to change is the one where the elemWin reference is being canceled. At this point, we want to take the reference and pass it to another function to initialize our XMLHttpRequest object, in order to transfer the information to the server. Licensed to jonathan zheng

Adding Ajax autosave functionality

449

Although sometimes when we adapt libraries, it might take a lot of trial and error to adapt them to our needs, in this case, the functionality is pretty straightforward. Just add the following line, shown in bold, to your document’s onmouseup event handler:

document.onmouseup = function(){

bDrag = false;

bResize = false;

intLastX = -1;

document.body.style.cursor = "default";

if(elemWin && bHasMoved)SaveWindowProperties(elemWin); bHasMoved = false;

}

The bold line in the previous code snippet checks to make sure that the object has been moved or resized and that the element still exists. If the user did not perform either of these actions, then there would be no reason to send the request to the server. If one of these actions was performed, we pass the element reference to the function SaveWindowProperties(), which initiates the request to the server. Obtaining the active element properties

After the user has moved or resized an element, we must update the server with the new parameters. The DHTML window library uses CSS to position the elements and to set their width and height. This means that all we have to do is obtain the database ID, the coordinates, and the size of the window. We can obtain the coordinates and size by looking at the CSS parameters assigned to the window that had focus. We then can take these new parameters and send them to the server to be saved in the database with Ajax (listing 11.10).

Listing 11.10 SaveWindowProperties() function

function SaveWindowProperties(){

winProps = "ref=" +

elemWin.id;