As always such arguments would then appear in the params hash available to our

As always such arguments would then appear in the

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

that can be appended to the URI. As always, such arguments would then appear in the params[] hash available to our Rails controller actions. Screencast 6.6.1 uses the Firebug interactive debugger as well as the Rails debugger to step through the rest of the code in Figure 6.15 . Getting the URI that is the target of the XHR request is easy: since the link we’re hijacking already links to the RESTful URI for showing movie details, we can query its href attribute, as line 11 shows. Lines 13–14 remind us that function-valued properties can specify either a named function, as success does, or an anonymous function, as error does. To keep the example simple, our error behavior is rudimentary: no matter what kind of error happens, including a timeout of 5000 ms (5 seconds), we just display an alert box. In case of success, we specify showMovieInfo as the callback. 1 #movieInfo { 2 padding: 2ex; 3 position: absolute; 4 border: 2px double grey; 5 background: wheat; 6 } Figure 6.16: Adding this code to app/assets/stylesheets/application.css specifies that the “floating” window should be positioned at absolute coordinates rather than relative to its enclosing element, but as the text explains, we don’t know until runtime what those coordinates should be, so we use jQuery to dynamically modify #movieInfo ’s CSS style properties when we are ready to display the floating window. Screencast 6.6.1: Interactively single-stepping through AJAX AJAX debugging requires a combination of a JavaScript debugger such as Firebug and a server-side debugger such as debugger , which you met in Chapter 4 . Be aware that Firefox’s “Information” views (such as we used in Screencast 2.3.2 work by modifying the DOM itself to show the popups and tooltips, so if you’re “testing things out” using the JavaScript console, you may get unexpected results if these features are active. Note: The JavaScript code in the screencast uses the name RP rather than MoviePopup to name the global variable that stores the JavaScript functions related to this example, but other than that difference, the code is the same. Some interesting CSS trickery happens in lines 20 and 23 of Figure 6.15 . Since our goal is to “float” the popup window, we can use CSS to specify its positioning as absolute by adding the markup in Figure 6.16 . But without knowing the size of the browser window, we don’t know how large the floating window should be or where to place it. showMovieInfo computes the dimensions and coordinates of a floating div half as high and one-fourth as tall as the browser window itself (line 20). It replaces the HTML contents of the div with the data returned from the server (line 22), centers the element horizontally over the main window and 250 pixels from the top edge (line 23), and finally shows the div , which up until now has been hidden (line 24).
Image of page 229
There’s one last thing to do: the floated div has a “Close” link that should make it disappear, so line 26 binds a very simple click handler to it. Finally, showMovieInfo returns false (line 27). Why?
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