LoginSignup
1
2

More than 5 years have passed since last update.

Zend Framework2.5でJQuery,Bootstrap,その拡張を読み込ませて使う場合の注意

Posted at

ZendFramework2.5を極めたいと思いがんばってますが、挫けそうな要素いっぱい。
「あ〜CakePHP3にすりゃよかった。日本語充実してるし、なんかいいし。」と、関わった案件の方々からの親身のサポートを受け『Cakeやっているひとってみんな優しかったなぁ思い出すなぁ(遠い目』と、Cakeへの望郷の念を醸すが、やっぱり未来を見据えて英語頑張る....orz....
ちなみにPHP7界隈ではZF2.5が最速です。でもRapid開発ってことなら話は別です↑cake美味しそう

<head>エレメント内に読み込ませたいファイルの順番にハマル

Bootstrapで日時を入力させて、そこに向けてカウントダウンさせようと思いまして、いろいろ漁ってみましたら素敵なのが結構あるんですね。

それで活用させて頂こうと下のように記述。
「ふんふふん♪こういうの順番大事なんだよね〜。間違えるとハマルんだよね〜」と鼻歌交じりに記述。

<head>エレメント内
<!-- Scripts -->
<?php echo $this->headScript()
    ->prependFile($this->basePath('js/jquery.min.js'))
    ->prependFile($this->basePath('js/bootstrap.min.js'))
    ->prependFile($this->basePath('js/jquery.plugin.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown-ja.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.min.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.ja.js'))
    ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
    ->prependFile($this->basePath('js/html5shiv.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
;?><?=PHP_EOL?>

はい。動きません。エラーが出されてハマってしまいました。

実は記述の順番が逆だったんです

上記の順番だとこのように出力されます。

出力結果「こいつ動かないぞ」
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.min.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/bootstrap-datetimepicker.ja.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown-ja.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>

普通、上から下に解釈して出力すると思いますよ。いったいどうなってるんだ、ぶつぶつ。
ということで、順番を逆にしました。

<head>エレメント内
<!-- Scripts -->
<?php echo $this->headScript()
    ->prependFile($this->basePath('js/jquery.countdown.min.js'))
    ->prependFile($this->basePath('js/jquery.countdown-ja.js'))
    ->prependFile($this->basePath('js/jquery.plugin.min.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.ja.js'))
    ->prependFile($this->basePath('js/bootstrap-datetimepicker.min.js'))
    ->prependFile($this->basePath('js/bootstrap.min.js'))
    ->prependFile($this->basePath('js/jquery.min.js'))
    ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
    ->prependFile($this->basePath('js/html5shiv.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
;?>
<?=PHP_EOL?>

これをhtml出力してみると、

出力結果「こいつ動くぞ」
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5shiv.min.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/respond.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker.ja.js"></script>
<script type="text/javascript" src="/js/jquery.plugin.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown-ja.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.min.js"></script>

これで期待通りの順番に並んで出力され、画面上でも動き始めました。

まぁこれが仕様というならしようがないですが、じゃぁどこかに書いておいてよ!(いやどこかにかいているかもしれないけど。しらっと英語で)と思いましたので、日本語でここにメモっときます。
ハマったときはこれを頼りに抜け出てくださいませ。

PS. CSS読み込み部も同様の仕様で出力されるので、適用の順番にそって厳密にPHPは下から上に記述しましょう。そうすればHTML出力時に上から下に吐き出してくれます。

僕はこれで抜けられました(感謝)

Bootstrap参照エラーの対応

1
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2