Section 12.9. Ticket-Creation Component


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.

Figure 12-12. Ticket-creation form


Listing 12-15. AddTicket.php

1 <div  > 2 3 <form  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.




Understanding AJAX(c) Using JavaScript to Create Rich Internet Applications
Understanding AJAX: Using JavaScript to Create Rich Internet Applications
ISBN: 0132216353
EAN: 2147483647
Year: N/A
Pages: 154

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net