Ajaxなパーシャル

静的なHTMLページにちょびっとだけ動的な部分を埋め込みたいときとかに便利な技。

1.動的に埋め込みたい部分をpartialなrhtmlにする。ここでは仮にapp/views/common/_dynamic_pane.rhtmlとする。

2.適当なコントローラにパーシャルなrhtmlをrenderするアクションを作る。とりあえず、pane_controllerというコントローラとする。

class PaneController < ApplicationController
  def dynamic_pane
    render :partial => 'common/dynamic_pane' 
  end
end

3.静的なHTMLに以下のようなコードを適当な場所に入れる

<div id="placeholder1"></div>
<script language="javascript" type="text/javascript" ><!--

function header_response_complete(http, json){
    var status = http.status;
    var statusText = http.statusText;
    var fragment = http.responseText;
    if(status != 200) {
        throw new Error(status +": "+ statusText);
    }
    $("placeholder1").innerHTML = fragment;
}

new Ajax.Request( '/pane/dynamic_pane', {
        method: "get",
        asynchronous: true,
        requestHeaders: ["Content-type", "text/plain"],
        onComplete: header_response_complete });
--></script>

・・・と思ったんだけど、Ajax.Updaterを使うと一行で書けるのでした。

<script language="javascript" type="text/javascript" ><!--
new Ajax.Updater('placeholder1', '/pane/dynamic_pane',  { method: 'get' })
--></script>