2007-10-21

kid テンプレートから出力すると、jQuery の append() メソッドが使えなくて困った

web.py + Kid + jQuery を使っていると、jQuery の append() メソッドを呼び出しても、期待した副作用が起こらなくてびびりました。結論から言うと、kid.HTMLSerializer を使えば解決です。



やろうとしたこと:



以下のようなテンプレートがあったとします。ファイル名を foo.kid としましょう。



<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://purl.org/kid/ns#">
  <head>
<title>foo</title>
<script src="jquery.js"></script>
<script>
  function bar() { $("#myparagraph").append(", World!"); }
</script>
  </head>
  <body>
<p id="myparagraph">Hello</p>
<input type="button" value="Press Me" onclick="bar()" />
  </body>
</html>


このテンプレートから、以下のような Python コードで HTML を出力します。実際にはテンプレートにパラメータを渡して、web.py 経由でブラウザにレスポンスしますが、まあ、それはよいとして。



template = kid.Template(source=file("foo.kid").read())
print template.serialize()


期待した動作は、ボタンをクリックすると、「Hello」と表示されている p 要素に「Hello, World!」と表示されることでした。が、何も起こらず。



なんで?:



(1) テンプレートからの出力が実は XML で、(2) jQuery の append() メソッドは XML ドキュメントには使えない(どこに書いてあったかは失念)から。



で、どうするの?



Python コードを以下のように、HTMLSerializer を使うように変更するとおっけー。



template = kid.Template(source=file("foo.kid").read())
serializer = output=kid.HTMLSerializer(encoding="utf8")
print template.serialize(output=serializer)


ふーむ。AJAX への道は険しい...。