Rails notes Ajax

ArticleDirectory

• Ajax Web2.0
• DOM interface !!! Take a look at the Javascript documentation
• Javascript Effect
• ... The following content needs to be familiar with JavaScript. I have decided not to study it further.

Ajax Web2.0

To use Ajax, you must first include <% = javascript_include_tag "prototype" %>

The Ajax command is as follows:

Link_to_remote

Example:

 
<% = Link_to_remote ("do the Ajax thing",: update => 'mydiv ',: URL =>{: action =>: say_hello }) %> <Div id = "mydiv"> This text will be changed </div>
 

The first parameter is the link text. The second parameter is the updated element ID (DIV, span font, etc.). The third parameter is the remote URL (url_for syntax ), note that layout should be disabled for this URL.

Form_remote_tag

Example <% = form_remote_tag (: update => "update_div",: URL =>{: action =>: guess}) %> <% = text_field_tag: guess %> <% = submit_tag "post form with Ajax" %> <% = end_form_tag %>

The parameters include: Update updated element ID: the URL is the same as above. More parameter query API ??? Why are API parameters different?

Observers

Example:

 
<% = Text_field_tag: Search %> <% = observe_field (: search,: frequency => 0.5,: update =>: Results,: url = >{: action =>: search}) %>
 

: Frequency indicates the update frequency. When the input field changes, the system automatically submits the changes to the corresponding action to update the returned value.

???Note:Request. raw_post | request. QUERY_STRING is used on the action end. It does not seem to be clear about this usage.

Periodic update

Example <% = periodically_call_remote (: update => 'process-list',: URL =>{: action =>: PS },: frequency => 2) %>

Same as above

DOM interface !!! Take a look at the Javascript documentation

Rails provides a set of JavaScript APIs for Dom operations.

$ (ID)

Pass the $ () method a string, and it returns the DOM element with the given ID. otherwise it returns its argument. (this behavior means you can pass in either an element's id = attribute or the element itself and get an element returned .)

 
$ ('Mydiv '). style. Border = "1px solid red";/* sets border on mydiv */
 

Element. Toggle (element ,...)

Element. Toggle () toggles whether the given element (or elements) are shown. Internally, It switches the value of the CSS display attribute between 'line' and 'none '.

 
Element. Toggle ('mydiv ');/* toggles mydiv */element. Toggle ('div1', 'div2', 'div3 ');/* toggles div1-div3 */
 

Element. Show (element ,...)

Element. Show () ensures all elements it parameters es as parameters will be shown.

Element. Show ('warning');/* shows the element with ID 'warning '*/
 

Element. Hide (element ,...)

Opposite of element. Show ().

Element. Remove (element)

Element. Remove () completely removes an element from the Dom.

 
Element. Remove ('mydiv ');/* completely erase mydiv */
 

Insertion Methods

The various insertion methods make it easy to add HTML fragments to existing elements. They are discussed in section 18.4, replacement techniques, on Page 389.

Javascript Effect

The javascript effect requires an additional include "effects" package, so a total of include two packages

 
<% = Javascript_include_tag "prototype", "effects" %>
 

Generally, you can use effect. XXX (element) to input a string representing the ID, or use this to indicate the current object.

... The following content needs to be familiar with JavaScript. I have decided not to study it further.