Because the handler was called as the result of clicking on a link a element we

Because the handler was called as the result of

This preview shows page 230 - 231 out of 517 pages.

Because the handler was called as the result of clicking on a link ( <a> ) element, we need to return false to suppress the default behavior associated with that action, namely following the link. (For the same reason, the “Close” link’s click handler returns false in line 31.) With so many different functions to call for even a simple example, it can be hard to trace the flow of control when debugging. While you can always use console.log( string ) to write messages to your browser’s JavaScript console window, it’s easy to forget to remove these in production, and as Chapter 8 describes, such “ printf debugging” can be slow, inefficient and frustrating. In Section 6.7 we’ll introduce a better way by creating tests with Jasmine. Lastly, there is one caveat we need to mention which could arise when you use JavaScript to dynamically create new elements at runtime, although it didn’t arise in this particular example. We know that $(’.myClass’).on(’click’, func ) will bind func as the click handler for all current elements that match CSS class myClass . But if you then use JavaScript to create new elements matching myClass after the initial page load and initial call to on , those elements won’t have the handler bound to them, because on can only bind handlers to already-existing elements. A common solution to this problem is to take advantage of a jQuery mechanism that allows an ancestor element to delegate event handling to a descendant, by using on ’s polymorphism: $(’body’).on(’click’,’.myClass’, func ) binds the HTML body element (which always exists) to the click event, but delegates the event to any descendant matching the selector .myClass . Since the delegation check is done each time an event is processed, new elements matching .myClass will “automagically” have func bound as their click handler when created. Summary of AJAX: To create an AJAX interaction, figure out what what elements will acquire new behaviors, what new elements may need to be constructed to support the interaction or display responses, and so on. An AJAX interaction will usually involve three pieces of code: the handler that initiates the request, the callback that receives the response, and the code in the document.ready function (setup function) to bind the handler. It’s more readable to do each in a separate named function rather than providing anonymous functions. Just as we did in the example of Section 6.5 , for graceful degradation, any page elements used only in AJAX interactions should be constructed in your setup function(s), rather than being included on the HTML page itself. Both interactive debuggers such as Firebug or the JavaScript consoles in Google Chrome and Safari and “ printf debugging” using console.log() can help you find JavaScript problems, but a better way is through testing, which we show how to do in Section 6.7 .
Image of page 230
Image of page 231

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors