質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • CakePHP

    2353questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • jQuery UI

    166questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

cakePHPのJQueryの読み込みについて教えてください。

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 5,820

TC4649

score 70

cakePHPでのJQueryの使い方で質問させて頂きます。

自分でサンプルで作った簡単なシステムを、
社内で調整して使うことになったのですが、
自分のサンプルはちょっと人に見せられたものじゃなったので、
新しくBAKEし直して、制作を始めました。

そこでなのですが、
同じ場所に同じようにJQueryのdialogに関するコードを書いたのに
どうしても新しく制作しているcakeでエラーを吐いてしまいます。
エラー内容は
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
というのが出てしまいます。

サンプルと本番作成との少し違いがありまして、
cakeのバージョンが
サンプルは「2.5.5」
本番は「2.4.10」
という事と、
「2.5.5」のサンプルはJQueryはCDNを使用しているのですが、
本番はローカル環境でもつかうなら・・・
という事も考えて「2.4.10」はサイトからダウンロードした
UIフォルダ(jquery-ui-1.11.4.custom.zipを展開したもの)を
webrootに配置しております。
読み込み方は、ダウンロードしたUIのサンプルのhtmlを参考に
ヘルパーで読み込んでいる感じにしております。

「2.4.10」の方に上記のエラーが出てしまいます。
ちなみに、CDNで読み込みをしてみてもエラーが出てしまいます。
これはcakeのバージョンが関係している性でしょうか?

長くなってしまいましたが、
助けていただきたいことは、
  1. cakeのバージョン違いでこのような結果がでてしまったのか?
  2. 正しいUIフォルダのjsファイルの読み込み方
  3. そもそもダウンロードしたJQueryUIのフォルダが合っているのか?

最後にdefault.ctpの読み込み部分を記載させて頂きます。
宜しくお願いします。

//CSSの読み込み
echo $this->Html->css(array('reset','cake.generic')).PHP_EOL;
echo $this->Html->css(array('jquery-ui.min','jquery-ui.structure.min','jquery-ui.theme.min')).PHP_EOL;
echo $this->fetch('css');

//JQueryの読み込み
//jsフォルダ直下に展開しました。
//\external\jquery\jquery.jsの所にあったjsファイルをwebrootの直下に置きました。
echo $this->Html->script(array('jquery','jquery-ui.min'),array('inline'=>true));
echo $this->fetch('script');
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

1. cakeのバージョン違いでこのような結果がでてしまったのか?
エラーの内容はjavascriptのエラーなのでcakeのバージョンは関係ないと思います。
ただし、CakePHPの変更履歴からもわかるように2.4.10から2.5.5では様々な変更が行われています。
一度目を通されたほうが良いと思います。

2. 正しいUIフォルダのjsファイルの読み込み方
javascriptはwebroot/js/、cssはwebroot/css/に格納します。
js、css直下に配置した場合は以下のように指定します。
echo $this->Html->script(array('jquery','jquery-ui.min'),array('inline'=>true));
js配下のサブディレクトリに格納した場合は以下のように指定します。
echo $this->Html->script(array('サブディレクトリ名/jquery','サブディレクトリ名/jquery-ui.min'),array('inline'=>true));

3. そもそもダウンロードしたJQueryUIのフォルダが合っているのか?
ファイル名を見る限りは合っています。

エラー発生部分のソースは提示できますか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/19 11:53

    ご回答下さりありがとうございます。
    エラーではなく、質問に書かせて頂いたエラーをどこで吐いているかという
    ソースしか出てきませんでした。

    以下私のソースです。

    $("#dialog").dialog({
    autoOpen: false,
    width: 'auto',
    height:'auto',
    buttons: [
    {
    text: "Ok",
    click: function() {
    var url = $("#dialog").find('form').attr('action');
    var data = $("#dialog").find('form').serializeArray();
    console.log(data);
    $.post(url, data, function(result) {
    console.log(result);
    if(result) {
    $("#dialog").html(result);
    } else {
    $("#dialog").dialog( "close" );
    window.location.reload();
    }
    });
    }
    },
    {
    text: "Cancel",
    click: function() {
               $("#dialog").dialog( "close" );
    }
    }
    ]
    });

    // // Link to open the dialog
    $("[id^=dialogLink]").click(function( event ) {
    $("#dialog").dialog( "open" );
    $("#dialog").load($(this).attr('href'),function(){
    $("#dialog").dialog( "open" );
    });
    return false;
    });

    バージョン2.5.5の方で同じことをしてみたのですが、
    残念ながら結局同じ結果でした・・・
    UIフォルダからではなくCDNで読み込むしか無いのでしょうか?汗

    キャンセル

  • 2015/05/19 16:36

    2.5.5のCDNでしかうまく行っていないということでよいでしょうか?
    私の環境で再現しようとしたんですがうまく行ってしまいます。(2.5.5&ダウンロードしたJS)

    キャンセル

  • 2015/05/19 17:40

    そうなんですか?!汗
    「external」というフォルダがありますが、
    この中にある「jquery.js」というファイルはwebrootの直下に置いたほうが宜しいのでしょうか??

    キャンセル

  • 2015/05/19 17:55

    上に書いたように私はwebroot/jsに配置しました。
    参考:http://d.hatena.ne.jp/yokkong/20130917/1379406750
    ただ、javascriptが読み込めていなければ別のエラーが出るはずです。

    キャンセル

  • 2015/05/19 18:06

    何度も申し訳ありません。
    default.ctpですが、指定は下記で合っていますでしょうか?
    //css
    echo $this->Html->css(array('jquery-ui.min','jquery-ui.structure.min','jquery-ui.theme.min'));
    //JQuery
    echo $this->Html->script(array('jquery','jquery-ui.min'));

    再度入れなおしましたら、
    getPreventDefault() の使用は推奨されません。代わりに defaultPrevented を使用してください。
    というのが出たのですが、気にしなくて大丈夫ですよね?汗
    しかも質問は’close’に対してだったのですが、次は’open’でも出てしまいました。汗

    キャンセル

0

cannot call methods on dialog prior to initialization

イニシャライズに優先してdialogのメソッドをコールしてはいけません

って言ってますね。あたりまえですが。

インデント全部ぶっ壊されてるのでよく読めないんですが、
ダイアログに関するコードを
$(document).ready(functioin(){

//この中

});

に入れたらどうなるでしょう?

(いい加減コメントでもコード書けるようにしてほしいですね…)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/19 17:42

    回答下さいましてありがとうございます。
    試して見たのですが、出来ませんでした・・・汗
    私の何かがきっと間違っているんですよね・・・・汗

    キャンセル

  • 2015/05/19 17:44

    イニシャライズというのは dialog のイニシャライズですかね…

    コード全部みないとわからないかなぁ…

    キャンセル

  • 2015/05/19 17:50

    悲しいことに、sho_csさんのご回答にお返事させて頂きました、
    ソース以外に今のところソースは無いのです。汗
    $(function(){ });で囲っても、
    ご回答下さいました$(document).ready(functioin(){ });で囲っても
    同じ状態でございます。汗

    キャンセル

  • 2015/05/19 17:52

    まぁ、エラーの通り、何かの(恐らくdialogオブジェクト)のイニシャライズの前にそのメソッドを呼ぼうとしてるので、そのあたりかなぁと。

    僕は先日グローバル変数openを汚染させてwindow.openが死んだので、やっぱりコード見ないとよくわからないです。すいません。

    キャンセル

  • 2015/05/19 18:08

    こちらこそ大変申し訳ありません。
    どのソースをお伝えすれば良いのかもわからず・・・
    どうしても解決に至らなかった時は、サーバーにあげてみますので・・・笑

    キャンセル

0

コメント数が限界まで行ったようなので別回答で。

getPreventDefault() の使用は推奨されません。代わりに defaultPrevented を使用してください。
が出るようになったということは、これまでjqueryは1.11.0以上、または、2.1.0以上が読み込まれていたと思われます。(jQuery-UI付属は1.10.2)
CDNで利用していたjQueryのバージョンと異なっていることが原因かもしれませんね。

default.ctpだけでなくjavascriptファイルの格納場所で決まります。
javascriptがきちんと読み込めているかはブラウザに搭載されている開発者向けのツールから確認するのが確実です。
大抵のブラウザでF12で出ます。
デバッガ

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/05/19 21:30

    色々とご指導いただきましてありがとうございます。
    ここに写真が載せられないみたいなので、スクリーンショットを別回答で載せてみたいと思います。

    キャンセル

  • 2015/05/19 21:36

    と思いましたら、自己解決用だったようで諦めました。汗
    添付して下さった写真と同じような感じの表示で、jsフォルダに入っているjqueyのファイル名がありました。
    UIをダウンロードした「external」の中にあったjqueryを読み込めば、
    他に最初に読み込まなきゃいけないファイルは無いですよね?
    UIフォルダの中のサンプルndex.htmlを参考にしたのですが・・・汗

    キャンセル

  • 2015/05/20 09:54

    jquery-ui、または、jquery-ui.minは読み込まれていますか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CakePHP

    2353questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • jQuery UI

    166questions

    jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。