jQuery

The JavaScript and AJAX helpers for CakePHP both make use of the Prototype and
script.aculo.us libraries. Although these are both solid libraries, many developers are shifting to
jQuery for their JavaScript needs. Some may view not having a helper for jQuery as a negative,
but I probably wouldn’t use it anyway. I prefer to write my jQuery code directly.

CakePHP の JavaScript ヘルパーと Ajax ヘルパーはともに Prototype ライブラリと script.aculo.us ライブラリを利用しています。これらは両方とも信頼性の高いライブラリではありますが、多くの開発者は JavaScript 上の要求[を満たす]ために jQuery に移行しつつあります。[CakePHPに] jQuery のためのヘルパーが存在しないことを否定的に考える人もいるかも知れませんが、[もしあったとしても]どうせ私は使わないでしょう。jQueryのコードを直接書く方が好きです。

Replacing $javascript->event()
$javascript->event() の置き換え

The JavascriptHelper used the Prototype library for the event method, which is triggered based
on user interaction with the page. If you were using the CakePHP helper, you’d write something
like:

JavascriptHelper は event メソッドのために Prototype ライブラリを使っていました。event メソッドはユーザがページとやり取りする中で起動される[コードを書くためのもの]です。CakePHP [のJavaScript]ヘルパーを使っていたなら、こんな風に書いたでしょう。

<?php echo $javascript->event('domId',
                              'click',
                              'function() { alert("clicked")'); ?>

This would fire an alert with the message “clicked” anytime the DOM element with the id “domId”
was clicked. Notice that this is PHP code that will generate the proper JavaScript.

これで “domId” という id を持つDOM要素がクリックされたときには常に alert を発するでしょう。これは適切なJavaScriptコードを生成する「PHPのコード」であることに注意してください。

To accomplish the same thing with jQuery you would use:

jQuery を用いて同じことを行うには：

$("#domId").click(function() { alert("clicked") });

This is pure JavaScript code and can be placed directly in the view or in an external JS file.

これは純粋な JavaScript のコードであり、したがってビューや外部JSファイルの中に直接書くことができます。

For the full list of jQuery events see http://docs.jquery.com/Event. Also, jQuery has very powerful
selector support, so you’re not just stuck using a DOM ID – check out
http://docs.jquery.com/Selectors.

jQuery [で使用できる]イベントの完全な一覧についてはhttp://docs.jquery.com/Eventを見てください。また jQuery は非常に強力なセレクタ機能をサポートしているので、DOM IDの使用に縛られることはありません。http://docs.jquery.com/Selectorsをチェックしてください。

Replacing $ajax->link()
$ajax-link() の置き換え

The AjaxHelper’s link method creates a special link that, when clicked, sends off an
XMLHttpRequest, rather then redirecting the browser. The html that is returned can then be
placed in an element in the page. The code for this, using the AjaxHelper, would be:

AjaxHelper の link メソッドは、クリックされたときにブラウザ[の画面]を遷移させるのではなく、XMLHttpRequest[によるリクエスト]を送信する特別なリンクを生成します。そして[レスポンスとして]返却されたHTMLを、ページ中のある要素の中に配置することができます。AjaxHelper を使ったコードは次のようになるでしょう：

<?php echo $ajax->link('Update!',
                       '/scores/update',
                       array('update' => 'divId')); ?>

This will create a link with the word “Update!”. When it is clicked the Ajax request will be made to
the ScoresController, update action. The resulting html will be displayed in the DOM element
with the id “divId”.

このコードは “Update!” という語を含むリンクを作成します。リンクがクリックされると ScoresController の update アクションに対する Ajax リクエストが行われます。結果[として返却された]HTMLは “divId” というidを持つDOM要素の中に表示されます。

To accomplish the same thing with jQuery, you would first create the html link as normal, giving it
an ID:

同じことを jQuery で実現するには、まずHTMLのリンクを通常通り作って、IDを与えます。

<?php echo $html->link('Update!',
                       '/scores/update',
                       array('id' => 'scoresUpdate')) ?>

Then you would catch the click event for this link and make the Ajax request.

そしてこのリンクに対する click イベントを捕捉して、Ajax リクエストを行います。

$("#scoresUpdate").click(function() {
  $.ajax({
    url: "/scores/update",
    success: function(html) {
      $("#scoresUpdate").html(html);
    }
  });
});

This is just the tip of the iceberg with jQuery. Check out
http://docs.jquery.com/Tutorials:How_jQuery_Works for more.

これは[ここで紹介したのは] jQuery の氷山の一角に過ぎません。より多くを知るにはhttp://docs.jquery.com/Tutorials:How_jQuery_Worksをチェックしてください。

Leave a Reply