Ebben a postban pár ajax és javascript trükköt mutatok be.Az első lépés eldönteni, hogy mit is akarunk csinálni és, hogy hogyan. Néha van úgy, hogy jobb megoldások is vannak, mint azt elsőre gondolnánk. Egy ajax metódus meghívásához ezt a kódot a header tagba kell illeszteni (a layoutban): <%= javascript_include_tag :defaults %>
js.erb sablonok használata
Ha eldöntötted, hogy ajax hívásokat fogsz az oldaladon végezni, szerver oldali programozással, akkor ajánlott egy új ajax controller létrehozása, de nem feltétlenül szükséges. Parancssorban:
rails g controller ajax
Ezután, ha csinálunk egy ajax hívást, definiálnunk kell hozzá egy metódust a app/controllers/ajax_controller.rb fájlban. A következő lépés, hogy a javascript kimenetet írjuk le ajax_controller.rb fájlban a respond_to függvénnyel, és a metódust: (most: empty_cart):
class AjaxController < ApplicationController
respond_to :js
def empty_cart
Cart.where(:session_id => request.session_options[:id]).destroy_all
end
end
Eután már meg tudjuk csinálni a empty_cart.js.erb fájlt az app/views/ajax/ könyvtárban. Ebben a fájlban azt a javascriptet írjuk le, amit az oldalra küldeni szeretnénk. Ez egy javascript sablon, de használhatunk benne ruby-s kifejezéseket is. Természetesen használhatunk prototype függvényeket és script.aculo.us effekteket is. A partial cart.html-t korábban a layout-ok között definiáltuk. Itt, amennyiben a kosár üres, ki kell írnia egy sort: "A kosár üres". A div tagon belüli részt cseréljük ki a partial-lal:
$("cart_div").update("<%= escape_javascript(render("layouts/partials/cart.html.erb")) %>");
new Effect.Highlight("cart_div", {duration: 1.5, startcolor: "#909090"});
Ezután csinálhatunk egy ajax linket a view-ban, most: layouts/partials/cart.html.erb. Itt egy css-ben definiált gombot használunk:
<% if Cart.where(:session_id => request.session_options[:id]).empty? %>
Cart is empty.
<% else %>
..put here your cart html code..
<%=raw form_tag url_for(:action => "empty_cart",
:controller => :ajax ),
{ :method => :post,
:remote => true,
:id => "empty_cart" } %>
<%=raw submit_tag "Empty Cart",
:id => "empty_cart_submit",
:class => "empty_cart_button",
:confirm => "Are you sure?" %>
</form>
<% end %>
Ne felejtsük el a link html ocióban beállítani ezt: :remote => true, hogy ajax metódust hívjunk.
Effektek használata
Bármilyen effektet használhatunk a javascript erb sablonunkban, úgy, mint sima javascriptben is. Például egy toggle effekt:
new Effect.toggle("some_div_<%= id %>", "slide", {duration: 0.2});
Ne felejtsd el a ruby-s kifejezéseket <%= %> tagok közé rakni csakúgy,mint a html view-ban.
observe_form és observe_field elfelejtése
Rails 2-ben ezek a funkciók még megtalálhatóak voltak, most, rails3-ban már nem. Ehelyett használhatunk Prototype Legacy Helper plugint, vagy, amit javaslok, hogy írjuk meg erre a saját javascript kódunkat, ami gyorsabb, mint az ajax hívás. Tegyük a javascript kódunkat a form view-ba (app/views/controller_name/form.html.erb):
document.observe("dom:loaded", function() {
new Form.Observer("<%= @jsvalidator.form.id %>", 0.3, function(form, value) {
// most megvannak a form értékeink egyetlen url formátumú sorban
// tehát meg kell csinálnunk a mező - érték párokat, ehhez a textArray segít
textArray=unescape(value).split("&");
var i=0;
for(i=0; i<(textArray.length); i++) {
// ezután az összes érték a cikluson belüll esz látható
// a textArray[i] egy mező-érték párt jelent, ezt is felbontjuk
value_line_with_equal_sign=textArray[i];
value_name="";
value_value="";
value_name=value_line_with_equal_sign.split("=",2)[0];
value_value=value_line_with_equal_sign.split("=",2)[1];
// mostmár megvannak az értékek, bármit le tudunk ellenőrizni
// a value_name a mező neve
// a value_value a mező értéke
} } }
A @jsvalidator objektum form adatokat tartalmaz és a form controllerében definiáltuk Több információ: How to generate inline javascript
A cikk angol nyelvű változata megtalálható: Rails3 ajax tricks with javascript.
Ennyi az egész!
ruby-on-rails-tutorials.blogspot.com/2011/08/how-to-create-scriptaculous-ajax.html
