HTML and CSS Reference
In-Depth Information
<div>Start Date :</div>
<input id=”startDate” type=”date” />
<div>End Date :</div>
<input id=”endDate” type=”date” />
<br />
<input id="getOrders" type="button" value="Get Orders" />
<br />
<table id="orderTable" border="1" cellPadding="3"></table>
</form>
The Order History view consists of a text box to specify a customer ID and two date fields. Notice the
markup in bold: the <input> fields accepting date range are of type date . This way, browsers capable of
showing a pop-up date picker can render the fields accordingly. Clicking the Get Orders button triggers the
web-worker operation. The returned order details are displayed in the orderTable HTML table.
Creating a Web Worker
After entering a customer ID and a date range for selecting Order records, the user clicks the Get Orders
button. The jQuery code responsible for creating a web worker and executing the required script is
contained in this button's click event handler; see Listing 10-9.
Listing 10-9. Creating a Web Worker to Fetch Order Records
var worker;
$(document).ready(function () {
$("#getOrders").click(function () {
$(this).attr("disabled", "disabled");
$(this).val("Wait...");
worker = new Worker("../../scripts/Processing.js");
worker.addEventListener("message", ReceiveDataFromWorker, false);
worker.addEventListener("error", HandleError, false);
var settings = { "CustomerID": $("#customerID").val(),
"StartDate": $("#startDate").val(),
"EndDate": $("#endDate").val() };
worker.postMessage(settings);
});
});
The code first declares a global variable ( worker ) to store a reference to the web worker. The ready()
function wires the click event handler of the Get Orders button. The click event-handler function
disables the button by adding a disabled attribute to it using the jQuery attr() method. This is done so
the user can't click the button multiple times and thus create multiple worker threads. To give a hint to the
user that processing is going on, the value of the button is changed to “Wait…” using the val() method.
A new Worker object is then instantiated. The JavaScript code that fetches data from the server resides
in Processing.js , and the path of the script file is specified while creating the Worker object. Then the
event-handler functions for the message and error events are attached using the addEventListener()
method. The respective event-handler functions, ReceiveDataFromWorker() and HandleError() , are
discussed shortly.
The view needs to pass three pieces of information to the worker thread: the customer ID whose order
details are to be fetched, the start date, and the end date. The postMessage() method can take only one
 
Search WWH ::




Custom Search