このJQueryは何をやっているんでしょう?? の続きです.
検索を行って結果を表示、検索結果の下にbootpag(https://botmonster.com/jquery-bootpag/)を使用して、検索結果のページナビゲーションを表示しようとしています.
bootpagのインストール
npm install --save bootpag
でプロジェクトにインストールしました.
コードはTypeScriptで以下のように書いてあります.
if (totalPageNumber > 1) {
// Add pagination widget
$('#wh-search-pagination').bootpag({
total: totalPageNumber, // total pages
page: pageToShow, // default page
maxVisible: 10, // visible pagination
leaps: false, // next/prev leaps through maxVisible
next: localization.getLocalization("next.page"),
prev: localization.getLocalization("prev.page")
}).on("page", function(event:JQuery.Event, num:number){
util.debug("Display page with number: ", Object(num));
// Replace or add the page query
let oldPage:string|undefined = util.getParameter("page");
let oldQuery:string = window.location.search;
let oldHref:string = window.location.href;
let oldLocation:string = oldHref.substr(0, oldHref.indexOf(oldQuery));
let newQuery:string = "";
if (oldPage == undefined || oldPage == "") {
newQuery = oldQuery + "&page=" + String(num);
} else {
let re:RegExp = new RegExp("(\\?|&)page\=" + oldPage);
newQuery = oldQuery.replace(re, "$1page="+String(num));
}
window.history.pushState("searchPage" + String(num), document.title, oldLocation + newQuery);
displayPageResults(num);
});
}
これでVSCodeで編集していてもbootpagにカーソルを置けば
(method) JQuery.bootpag(options: JqueryBootpag.Options): JQuery
jQuery Bootpag plugin main method
と表示されるので、ちゃんと認識できているようです.
トランスパイル
WebPackを使用.
./node_modules/.bin/webpack
ところがブラウザで表示させて実行すると
検索結果の表示まではできるのですが、このbootpagで以下のエラーになってしまいます.
TypeError: jquery_1.default(...).bootpag is not a function
at createView (search-es.ts:226)
at search-es-util.ts:37
大本がRequire.jsを使っています.今まで何度も.jsのロードで四苦八苦してきましたので、そのエラーが出ていないということはbootpagの.jsはロードできていると思います.
デバッガで追ってみると、上記のコードの
total: totalPageNumber, // total pages
から
prev: localization.getLocalization("prev.page")
まで実行できて、その先のステップ実行で例外になってしまいます.
解決のヒントがありましたらご教示願います.
[追記]
制御が渡る直前でコンソール出力してみました.
console.log("$('#wh-search-pagination')=",$('#wh-search-pagination'));
$('#wh-search-pagination')= S.fn.init [div#wh-search-pagination.wh-search-pagination.col-xs-12.col-sm-12.col-md-12.col-lg-12]
でJQueryはOKです.
console.log("$('#wh-search-pagination').bootpag=",$('#wh-search-pagination').bootpag);
$('#wh-search-pagination').bootpag= ƒ (t){function s(t,s){s=parseInt(s,10);var r,n=0==i.maxVisible?1:i.maxVisible,d=1==i.maxVisible?0:1,o=Math.floor((s-1)/n)*n,f=t.find("li");i.page=s=0>s?0:s>i.total?i.total:s,f.removeClass(i.activeClass…
< undefined
でいろいろ出力されますが結局undefinedということなのでしょうか??
フレームワークに対するプラグインなのでrequireの対象となる.jsはプラグインの中の決まった.jsに記述するのですが、ここに、bootpag.min.jsへのパスを書いても結果は変わりませんでした.