• Choose a category
• All
• Classic-Fiction

Obtain window ID

winProps += "&x=" +

c Find

parseInt(elemWin.style.left);

window

winProps += "&y=" +

position

parseInt(elemWin.style.top);

winProps += "&w=" +

d Grab

parseInt(elemWin.style.width); window size

winProps += "&h=" +

parseInt(elemWin.style.height);

Settings("saveSettings",winProps); e

Call Settings function

elemWin = ""; f

Remove element reference

}

Licensed to jonathan zheng

450

CHAPTER 11

The enhanced Ajax web portal

As you can see in listing 11.11, we obtain the ID of the window b by referencing the window object. The ID that we obtained was assigned to the window when the library built it. When it assigns an ID, it appends win in front of the number from the database id column; we can see that by looking at the JavaScript code that is building the windows.

The x and y positions of the window are obtained c by referencing the left and top properties in the stylesheet. We also use the stylesheet properties to obtain the size d of the window by referencing its width and height properties. After obtaining the information, we can call another function, Settings() e, which we will be creating shortly, to send our request to the server. Once we call the function, we should remove the element object from our global variable elemWin f. To do this, we assign an empty string to the variable elemWin. Now with the SaveWindowProperties() function complete, we can initiate our silent Ajax request to the server with the JavaScript function Settings().

11.5.2 Autosaving the information to the database

Ajax lets us send information to the server without the user even knowing it is happening. We can see this in action with two projects in this book. We can easily submit requests to the server as a result of both monitoring keystrokes, as we do in the type-ahead suggest (chapter 10), and monitoring mouse movements, as we do in this chapter. This invisible submission is great for developers since we can update the user’s settings without him having to lift a finger. In most cases, reducing steps increases the user’s satisfaction. For this application, the action of the user releasing the mouse button is all we need to initiate the XMLHttpRequest object. Now it’s time to initiate the process to send the request to the server. The client: sending the silent request

The XMLHttpRequest process in this case will not require anything sophisticated. The user’s interaction with the form sends all of the form properties to our function. We first need to initialize the XMLHttpRequest object: function Settings(xAction,xParams){

var url = xAction + ".servlet";

var strParams = xParams;

var loader1 = new net.ContentLoader(url,

BuildSettings,

ErrorBuildSettings,

"POST",

strParams);

}

Licensed to jonathan zheng

Adding Ajax autosave functionality

451

For the function Settings(), we are passing the action string that contains all of our window’s properties. We attach the parameters that we’re going to post back to the server. If we get a successful round-trip to the server, the loader will call the function BuildSettings(). If we get an error during the round-trip, we will call the function ErrorBuildSettings():

function BuildSettings(){

strText = this.req.responseText;

document.getElementById("divSettings").innerHTML = strText;

}

function ErrorBuildSettings(){

alert('There was an error trying to connect to the server.');

document.getElementById("divSettings").style.display = "none";

}

The function BuildSettings() shown here is quite basic; all we are doing is finishing up our XMLHttpRequest received from the server. We can set a message on the portal status bar to show that we have updated the information on the server. We can add an error message to the status bar if we encounter a problem updating the information on the server. We also generate an alert, which tells the user of the error, but will also disrupt their workflow. We presented production-ready notification mechanisms in chapter 6, and leave it as an exercise for the reader to integrate those