人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

cakephpで jQuery を使用する方法が知りたいです。

http://jquery.com/からダウンロードしたjquery.jsファイルをapp/webroot/jsの直下にそのまま入れました。
コントローラー内で
public $helpers = array('Javascript');
を書き、
viewのadd.ctpに
<?php echo $javascript->link('jquery'); ?>
を書きました。
しかし、ブラウザで表示しても
「Error: Create the class JavascriptHelper below in file: app/View/Helper/JavascriptHelper.php」エラーが表示されます。
これが表示されたということは、app/View/Helper直下にもjquery.jsを入れるのでしょうか?
どなたか、教えてください。
ちなみにこのサイト(http://p.tl/b7YL)を参考に設置しました。

●質問者: チョロQ
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Cherenkov

CakePHPのバージョンはなんでしょうか?
2.0からJsヘルパーに変わったようです。
JsHelper — CakePHP Cookbook v2.x documentation


2 ● __QWERT__

//add.ctp
echo $this->Html->script('jquery');

javascriptのファイルを扱うのは、Htmlヘルパーのscriptメソッドです。
それとフォルダ構成からおそらく2.xバージョンを使ってるかと思いますが、
ヘルパーの書き方が、例えばHtmlヘルパーのlinkメソッドなら、$html->link()ではなく、$this->Html->link()になりました。前者では質問にあるエラーが出ると思います。

これはうろ覚えになりますが、AjaxヘルパーとJavascriptヘルパーはなくなり、Jsヘルパーになったと思います。
Jsヘルパーでは、自動でAjax用のスクリプトを用意してくれるHtmlを書いてくれたりします。

1.xと2.xでは書き方がだいぶ変わるので、BookやAPIを参照するといいです。
Book http://book.cakephp.org/2.0/en/
API http://api20.cakephp.org/
Bookは日本語訳のページもありますが、まだ翻訳途中なので、見られないページもあります。


チョロQさんのコメント
う〜ん、まだまだJsヘルパーに関しての資料が少ないですね。 Jsヘルパーを使わなくても本来のような書き方をしてもいいのでしょうかね? >|| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var nav = $('.nav'); //navの位置 var navTop = nav.offset().top; //スクロールするたびに実行 $(window).scroll(function () { var winTop = $(this).scrollTop(); //スクロール位置がnavの位置より下だったらクラスfixedを追加 if (winTop >= navTop) { nav.addClass('fixed') } else if (winTop <= navTop) { nav.removeClass('fixed') } }); }); </script> ||<

__QWERT__さんのコメント
コードのブロック(黒背景)を書く方法を教えてもらえると回答しやすくなります汗

チョロQさんのコメント
コードの頭に「>||」 コードの末に「||<」 というふうにコードをその2つで挟んであげるできますよ。

__QWERT__さんのコメント
ありがとうございます、助かります。

3 ● __QWERT__
ベストアンサー

もちろん上記のコードのような書き方をしても構いません。
しかし、CakePHPのwebroot内に設置されたファイルを読み込むには、HtmlHelper::script()を使ったほうがいいでしょう。

<script type="text/javascript" src="/js/jquery.js" />
例えば先のjquery.jsを読み込む場合に上記のような素のコードを書いておくと、ディレクトリ構造を変更したときにsrc内を書きなおす必要があります。
しかしHtmlHelper::script()でwebroot/jsからの相対パスを指定しておけば、ディレクトリ構造があってもコードを変更する必要はありません。

例えば僕は、webroot/js/コントローラ名/アクション名.js というファイルを作り、
それぞれのビューでecho $this->Html->script('コントローラ名/アクション名');で読み込んでいます。

Jsヘルパーには、Javascriptのファイルを読み込む機能はありません。
Jsヘルパーの使い方はこちらを見てください
http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html
例えば、こんな使い方をします。

<?php
echo $this->Js->link('更新',array('controller'=>'hoge','action'=>'fuga'),array('update'=>'#update'));
echo $this->Js->writeBuffer();
?>

<div id="update"></div>

実行結果は実際にやってみてください。
僕はJsHelper::link()とJsHelper::writeBuffer()しか使いこなせていないので、JsHelperに関するこれ以上の説明はちょっと難しいです。


チョロQさんのコメント
かんたんな使い方だけをまとめると、 ?app/View/Layouts/default.ctpに >|| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> ||< を書いて、jqueryを読み込む。 ?app/webroot/js/の直下に使いたいjquery.jsファイルを作成。 ?viewのadd.ctp内で >|| echo $this->Html->script('jquery'); ||< を読み込んで使う。 って感じでしょうか?

__QWERT__さんのコメント
?と?をセットで行なう、もしくは?を書けばOKだと思います。 ご存知だとは思いますが、?はgoogleからファイルを読み込むので、 オフライン作業時にjqueryが無効になることだけ留意してください。

チョロQさんのコメント
教えていただきありがとうございます。 ?でjquery自体を使えるようにしてから、 使いたいjQueryのコードだけを?に書き、?で反映させたと思います。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ