Laravel投稿サイト構築.65 jQuery導入とLaravel mix
■前回
前回までの対応でサイトは以下のような構成になった。
- トップ画面はテーマの一覧とそれぞれへの返信一覧を表示
- テーマまたは返信をクリックすると詳細画面を表示
- 詳細画面では選択したデータの親情報と子情報の一覧を表示し、選択した情報に対して返信可能
細かい修正をやっていきます。
■返信を書き込んだ場合の展開
現状では返信を書き込んだらトップ画面に戻ってしまっていた。
ので、store関数で書き込んだ後に詳細画面にリダイレクトするように修正。
return redirect('/detail?thread_id='.$request->thread_id.'&reply_id='.$request->reply_id);
■詳細画面表示時にスクロール
書き込みが少ない場合は問題ないが、階層が深い場合や書き込み数が多い場合など、画面の先頭を表示すると何を表示したかったか分かりづらいので、
該当情報にスクロールしたい。
bladeファイルで、選択したテーマまたは返信にはフォーカス設定用のアンカーを追加するように修正。
@if( $reply->is_target == 1 )
<a href="#" id="anc_focus" />
@endif
※is_targetへのフラグ設定はモデルでデータ取得時に設定
window.onload = function() {
if($('#anc_focus') ) {
$('#anc_focus').focus()
}
}
としたのだが、タグが見つからないというエラーが出た。
ChromeのF12でデバッグすると通るが実際に動作させるとエラーになる。
もしかしてjQueryが入っていないのか？
↑を参考に
$npm install jquery --save
としたらインストールされた。
-----
webpack.mix.jsを編集
.autoload({
"jquery": ['$', 'window.jQuery'],
})
を追記
-----
resouces\jsに処理を記述したjsファイルを作成。
-----
webpack.mix.jsに追記
mix.js('resources/js/app.js', 'public/js', 'resources/js/今回作成したjsファイル名')
-----
npm run dev
でビルド
したのだが、
Unable to locate Mix file: /js/xxxx.js.
のエラー。
時間切れで次回に続く
