12.9. Ticket-Creation Component
The ticket-creation component provides a form that is used to add a new ticket to the application. The user must be logged in to use this component. The ticket-creation process is kept simple because the form requires only a title and a description; the rest of the information will be pulled in from the user's profile or set later during the editing process. An example of the ticket-creation form is shown in Figure 12-12; the HTML is shown in Listing 12-15.
Listing 12-15. AddTicket.php
1 <div id="addTicket" class="section">
2
3 <form id="atForm" onsubmit="return addTicket(this);">
4 <p><label>Title</label><br>
5 <input name="title">
6 </p>
7
8 <p><label>Description</label><br>
9 <textarea name="description" rows=6></textarea>
10 </p>
11
12 <p><input type="submit" value="Add Ticket"></p>
13 </form>
14 </div>
|
AddTicket.php contains a simple form. When the form is submitted, the addTicket function is called. This function is shown in Listing 12-16.
Listing 12-16. AddTicket.js
1 var atCallback = {
2 addTicket: function(result) {
3 addTicketComplete(result);
4 }
5 };
6 var rAddTicket = new Ticket(atCallback);
7
8 function addTicket(form) {
9 var title = form.elements.title.value;
10 var description = form.elements.description.value;
11 rAddTicket.addTicket(title,description);
12
13 form.submit.value = "Adding ticket please wait ...";
14 form.submit.disabled = true;
15
16 return false;
17 }
18
19 function addTicketComplete(result) {
20 var form = byId('atForm');
21 form.submit.value = "Add Ticket";
22 form.submit.disabled = false;
23 form.title.value = '';
24 form.description.value = '';
25 viewTicket(result);
26 }
|
The HTML that drives the JavaScript for adding a ticket is quite simple. On lines 16, we set up the AJAX class; it contains a callback for the addTicket method, which calls addTicketComplete. The addTicket method (lines 817) processes the form, the values are pulled from its elements array (lines 910), and the values are sent to the server by using the AJAX stub class's addTicket method (line 11). The function finishes by adding a loading message to the form's submission button (lines 1314). The addTicketComplete function (lines 1926) removes the loading indication set by addTicket, clears out the form, and then runs the viewTicket method, which is defined in the ticket-editor component.
|
