In this lesson we put your knowledge into action by developing a simple but fully functional Ajax contact form. While developing the demo, we touched on a lot of topics covered in this app. We used the selectors, including the context parameter, which you learned in lesson 2. Methods like parent(), next(), and find(), introduced in lesson 3, were used to refine the selection of elements. The text() method, discussed in lesson 5, was employed to update the text of the span containing the errors. We employed some methods related to events, discussed in lesson 6, to listen for and trigger them (like blur(), click(), and focus()). We added some effects, covered in lesson 8, to let elements appear gradually. The $.each() utility function, introduced in lesson 9, helped you in iterating over the array of errors. Finally, we used the $.ajax() and the $.post() utility functions, discussed in lesson 10, to perform asynchronous requests to the server.
This wrap-up should have demonstrated to you that what we’ve covered so far isn’t theoretical but has a lot of applications in the real world. In this demo we employed at least one concept from almost every lesson of this app.
We hope that throughout these pages you’ve come to understand how each piece of the jQuery library is important to achieve a certain goal (the contact form, in this case) and how combining them gives you incredible power. We hope that you had fun developing this project and that you’re more confident using the topics discussed.
With this example we’ve completed the second part of the app. Starting with the next lesson, we’ll delve into more advanced concepts like creating plugins and unit-testing code.
Leave a Reply