jQuery uiを読み込んだらエラーがでたThis request has been blocked; the content must be served over HTTPS.

2019-07-31

以前、IE11でjQuery uiのデイトピッカーの表示されないということがありました。

【contact form 7】 IE11でdatepickerが表示されない

Contact form 7では、date,numberタイプなどのHTML5タグが使われています。 ※フィールドを選択すると、 ...

 https://www.radia.jp/archives/653

その時と同じフォームにて、Google Chromeのデベロッパーツールでエラーメッセージが出ていることに気がつきました。

Mixed Content:The page at '該当ページのURL' was loaded over HTTPS, 
but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js'. This request has been blocked; the content must be served over HTTPS.

メッセージの内容は、該当ページはSSL化されたページなのに、デイトピッカーの日本語化ファイルjquery.ui.datepicker-ja.jsを読み込んでいるURLはhttpsじゃないからブロックしてる。。。httpsで読み込みなさいといった感じのメッセージでしょうか。

wp_enqueue_scriptで読み込んだファイルを以下のSSL対応のURLに変更します。

https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js

さらに別のエラーが

httpsから始まるURLに変更して解決したかと思いきや、別のエラーが出ました。

jquery.ui.datepicker-ja.js Uncaught ReferenceError: jQuery is not defined.

jQueryを読み込んでいるはずなのにjQuery is not defined.と言われてしまう。

原因は、jQueryよりも、jquery.ui.datepicker-ja.jsの方が先に読み込まれていたからでした。

それもそのはず、wp_enqueue_scriptの記述に依存関係が記載されていませんでした。

修正前

wp_enqueue_script('jquery.ui.datepicker-ja','https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js');

修正後

wp_enqueue_script('jquery.ui.datepicker-ja','https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js',array('jquery'),'', true);

すごく初歩的なミスでした。。。

ひとまずこれでエラーは解消されました。。。