Languages
FsharpActionScript
xBase
Clean
GPSS
PureBasic
Sieve
Erlang
JOVIAL
Mercury
Linda
DataFlex
PostScript
FoxPro2
VFP
Cobol
Prolog
Jython
Awk
VisualBasic
JavaScript
Matlab
ASP
Haskell
Csharp
D
Smalltalk
Nemerle
Pixilang
Java
SQL
Python
ObjectPascal
Ruby
Perl
Pascal
Assembler
PHP
C
| Functions | Add function | Users Registration | Enter | About | ASCII Table | Our helpers |
Ruby-on-Rails1 Web Forms and Ruby on Rails 2 15.17 Creating an Ajax Form 3 15.18 Exposing Web Services on Your Web Site 4 15.19 Sending Mail with Rails | 15.17 Creating an Ajax Form(Page 2 of 4 ) Problem You want to build a web application that_s responsive and easy to use. You don_t want your users to spend lots of time waiting around for the browser to redraw the screen. Solution You can use JavaScript to make the browser_s XMLHTTPRequest object send data to the server, without dragging the user through the familiar (but slow) page refresh. This technique is called Ajax,* and Rails makes it easy to use Ajax without writing or knowing any JavaScript. Before you can do Ajax in your web application, you must edit your application_s main layout template so that it calls the javascript_include_tag method within its <HEAD> tag. This is the same change made in Recipe 15.15: <!-- app/views/layouts/application.rhtml --> <html> Let_s change the application from Recipe 15.16 so that the new action is AJAX-enabled (if you followed that recipe all the way through, and made the edit action use new.rhtml instead of edit.rhtml, you_ll need to undo that change and make edit use its own view template). We_ll start with the view template. Edit app/views/items/new.rhtml to look like this: <!-- app/views/items/new.rhtml --> <%= form_remote_tag :url => { :action => :create }, Name: <%= text_field "item", "name" Those small changes make a standard HTML form into an Ajax form. The main difference is that we call form_remote_tag instead of form_tag. The other differences are the arguments we pass into that method. The first change is that we put the :action parameter inside a hash passed into the :url option. Ajax forms have more options associated with them than a normal form, so you can_t describe its form action as simply as you can with form_tag. When the user clicks the submit button, the form values are serialized and sent to the destination action (in this case, create) in the background. The create action processes the form submission as before, and returns a snippet of HTML. What happens to this HTML? That_s what the :update option is for. It tells Rails to take the result of the form submission, and stick it into the element with the HTML ID of "show_item". This is why we added that <div id="show_item"> tag to the top of the template: that_s where the response from the server goes. The last change to the new.rhtml view is the :complete option. This is a callback argument: it lets you specify a string of JavaScript code that will be run once an Ajax request is complete. We use it to highlight the response from the server once it shows up. That_s the view. We also need to modify the create action in the controller so that when you make an Ajax form submission, the server returns a snippet of HTML. This is the snippet that_s inserted into the "show_item" element on the browser side. If you make a regular (nonAjax) form submission, the server can behave as it does in Recipe 15.16, and send an HTTP redirect.* Here_s what the controller class needs to look like: class ItemsController < ApplicationController def create def edit if request.post? This code references a new view, show. It_s the tiny HTML snippet that_s returned by the server, and stuck into the "show_element" tag by the web browser. We need to define it: <!-- app/views/items/show.rhtml --> Your most recently created item:<br /> Now when you use http://localhost:3000/items/new to add new items to the data base, you won_t be redirected to the edit action. You_ll stay on the new page, and the results of your form submission will be displayed above the form. This makes it easy to create many new items at once. Discussion Recipe 15.16 shows how to submit data to a form in the traditional way: the user clicks a "submit" button, the browser sends a request to the server, the server returns a response page, and the browser renders the response page. Recently, sites like Gmail and Google Maps have popularized techniques for sending and receiving data without a page refresh. Collectively, these techniques are called Ajax. Ajax is a very useful tool for improving your application_s response time and usability. An Ajax request is a real HTTP request to one of your application_s actions, and you can deal with it as you would any other request. Most of the time, though, you won_t be returning a full HTML page. You_ll just be returning a snippet of data. The web browser will be sending the Ajax request in the context of a full web page (which you served up earlier) that knows how to handle the response snippet. You can define JavaScript callbacks at several points throughout the lifecycle of an Ajax request. One callback, :complete, was used above to highlight the snippet after inserting it into the page. This table lists the other callbacks.
|
| Birth of a Hurricane
Summer storms are a regular feature in the North Atlantic, and while most pose little threat to our shores, a choice few become devastating hurricanes. To decipher which storms could bring danger, and which will not, atmospheric scientists are heading to the tropics to observe these systems as they form and dissipate--or develop into hurricanes. By learning to identify which weather systems are the most critical to track, the efforts may ultimately allow for earlier hurricane ...
|
PycckaR
BepcuR
Articles
Library
Downloads
