Screencast: Ajax Historie anpassen

Die neue pushState Funktion in JavaScript erlaubt es die gesamte URL mit Ajax zu verändern bzw. an den eigenen Bedarf anzupassen. Das bedeutet das auf einfache Weise eine Unterstützung für die Buttons „Zurück“, „Neu Laden“ und „Lesezeichen“ implementiert werden kann. Ryan zeigt in diesem Screencast wie dies in Kombination mit Rails eingesetzt werden kann.

 

Download:

Download(19.9 MB, 10:35)
Alternativer Download für iPod & Apple TV(18.9 MB, 10:35)

 

Resourcen:

 

Quellcode:

[javascript]
/* application.js */
if (history && history.pushState) {
$(function() {
$("#products th a, #products .pagination a").live("click", function() {
$.getScript(this.href);
history.pushState(null, document.title, this.href);
return false;
});
$("#products_search input").keyup(function() {
$.get($("#products_search").attr("action"), $("#products_search").serialize(), null, "script");
history.replaceState(null, document.title, $("#products_search").attr("action") + "?" + $("#products_search").serialize());
return false;
});
$(window).bind("popstate", function() {
$.getScript(location.href);
});
});
}

/* products/index.js.erb */
$("#products").html("<%= escape_javascript(render("products")) %>");
document.title = "<%= escape_javascript("#{params[:search].to_s.titleize} Products by #{(params[:sort] || ’name‘).titleize} – Page #{params[:page] || 1}") %>";
[/javascript]

Ein Gedanke zu „Screencast: Ajax Historie anpassen“

Schreibe einen Kommentar zu Tom Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.