Learning Ajax 2, url, link and button

with <Ajax on Rails>
S2.3. Bringing Rails into the Picture

complex url_for example:
url_for :only_path => false, :protocol => ‘gopher:// ‘,
  :host => ‘example.com’, :controller =&gt; ‘chapter2′,
  :action => ‘myresponse’, :trailing_slash => true, :foo => ‘bar’,
  :anchor => ‘baz’
#=> ‘gopher://example.com/chapter2/myresponse?foo=bar/#baz’

ajax on rails(aor) alert:
<p><%= link_to_remote "Alert with javascript Helper", :url =>
   "/chapter2/myresponse", :success => "alert(request.responseText)" %></p>

aor insert:
<p><%= link_to_remote "Update  with javascript Helper", :url =>
  {:action => "myresponse"}, :update => "response5" %></p>
<p id="response5"></p>

Chapter 3. Introducing Prototype

3.2 Ajax Links

:method => :delete
<%= link_to "Delete", "/people/1", :method => :delete %>

==>
<a href="/people/1"
  onclick="var f = document.createElement(‘form’);
           f.style.display = ‘none’;
           this.parentNode.appendChild(f);
           f.method = ‘POST’;
           f.action = this.href;
           var m = document.createElement(‘input’);
           m.setAttribute(‘type’, ‘hidden’);
           m.setAttribute(‘name’, ‘_method’);
           m.setAttribute(‘value‘, ‘delete’);
           f.appendChild(m);
           f.submit(  );
           return false;">Delete</a>

Return false;
<a href="#"
   onclick="new Ajax.Updater(‘current_time’, ‘/chapter3/get_time’,
               {asynchronous:true, evalScripts:true});
            return false;">Check Time</a>
<div id="current_time"></div>
The link will only be followed if the expression evaluates true (or if the user has javascript turned off). That’s why the link_to_remote helper puts return false at the end of the onclick attribute.

Callbacks:
<%= link_to_remote "Check Time",
    :update   => ‘current_time’,
    :url      => { :action => ‘get_time’ },
    :before   => "$(‘indicator’).show(  )",
    :success  => "$(‘current_time’).visualEffect(‘highlight’)",
    :failure  => "alert(‘There was an error. ‘)",
    :complete => "$(‘indicator’).hide(  )" %>
<span id="indicator" style="display: none;">Loading…</span>
<div id="current_time"></div>

hide( ) and show( )
for an element to be dynamically shown via javascript, its CSS display: none property must be defined inline

this won’t work:
<style type="text/css">
  #indicator { display: none; }
</style>
<div id="indicator">Hidden DIV</div>
<script type="text/javascript">
  $("indicator").show(  ); // won’t work
</script>

But this will work:

<div id="indicator" style="display: none">Hidden DIV</div>
<script type="text/javascript">
  $("indicator").show(  ); // will work
</script>

:condition
<li><%= check_box_tag ‘checkbox’ %> Thing #1</li>
<%= link_to_remote "Delete checked items",
    :condition => "$(‘checkbox’).checked",
    :url       => { :action => ‘delete_items’ } %>

:submit
it allows you to simulate a form submission. By providing the ID of a page element, any fields contained in it will be sent along with the request.
<div id="fakeForm">
  <input type="text" name="foo" value="bar" />
</div>
<%= link_to_remote "Submit fake form",
       :submit   => "fakeForm",
       :url      => { :action => ‘repeat’ },
       :complete => "alert(request.responseText)" %>

nested forms

<form id="myForm">
  <input type="text" name="text_to_reverse" id="text_to_reverse" />
  <%= link_to_remote "Reverse field",
       :url      => { :action => ‘reverse’ },
       :submit   => "myForm",
       :complete => "$(‘text_to_reverse’).value=request.responseText" %>
  <input type="submit" />
</form>

:with
<%= link_to_remote "Link with params",
       :url      => { :action => ‘repeat’ },
       :complete => "alert(request.responseText)",
       :with     => "’foo=bar’" %>
two sets of quote marks. javascript expression

include references to javascript variables or DOM elements:
<input id="myElement" type="text" value="bar" />
<%= link_to_remote "Link with dynamic params",
       :url      => { :action => ‘repeat’ },
       :complete => "alert(request.responseText)",
       :with     => "’foo=’+escape($F(‘myElement’))" %>
escape it (so that it can safely be included in a URL query string)

link_to_function
<%= link_to_function "Toggle DIV", "$(‘indicator’).toggle(  )" %></p>
toggle( ), which hides and shows elements on the page.

button_to_function
<%= button_to_function "Greet", "alert(‘Hello world!’)" %>

combine with remote_function
<%= button_to_function "Check Time",
      remote_function(:update => "current_time",
        :url => { :action => ‘get_time’ }) %>

DIY button_to_remote
def button_to_remote(name, options = {})
  button_to_function(name, remote_function(options))
end
==>
<%= button_to_remote "Get Time Now",
      :update => "current_time",
      :url    => { :action => ‘get_time’ } %>

此條目發表在 Ruby on Rails, 站長文檔 分類目錄。將固定鏈接加入收藏夾。

發表評論