75349


[このJQueryは何をやっているんでしょう？？](https://ja.stackoverflow.com/questions/75296/%E3%81%93%E3%81%AEjquery%E3%81%AF%E4%BD%95%E3%82%92%E3%82%84%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%82%93%E3%81%A7%E3%81%97%E3%82%87%E3%81%86)
の続きです．

検索を行って結果を表示、検索結果の下にbootpag（<https://botmonster.com/jquery-
bootpag/>）を使用して、検索結果のページナビゲーションを表示しようとしています．

## bootpagのインストール

npm install --save bootpag

でプロジェクトにインストールしました．

## コードはTypeScriptで以下のように書いてあります．

[code]

            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);
                });
            }
    
    
[/code]

これで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はロードできていると思います．

デバッガで追ってみると、上記のコードの

[code]

       total: totalPageNumber, // total pages
    
[/code]

から

[code]

       prev: localization.getLocalization("prev.page")
    
[/code]

まで実行できて、その先のステップ実行で例外になってしまいます．

解決のヒントがありましたらご教示願います．

［追記］

制御が渡る直前でコンソール出力してみました．

> 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へのパスを書いても結果は変わりませんでした．


CC BY-SA 4.0
2021-04-15T15:03:19.560
75310
2021-04-17T14:42:47.183
2021-04-16T15:47:32.983
9503
9503
question
javascript jquery typescript
TypeError: jquery_1.default(...).bootpag is not a function で落ちてしまいます．


自己RESです．解決しました．

## TypeScript 側の変更事項

以下のコードを記述．

[code]

    import "bootpag";
    
[/code]

## webpack.config.js の変更事項

bootpagの記述を追加

[code]

        // Excludes dependencies from the output bundles. The created bundle 
        // relies on that dependency to be present in the consumer's environment.
        externals: {
            jquery: 'jquery',
            jqueryui: 'jquery.ui',
            buildparam: 'build-param',
            topicMap: 'topicMap',
            searchHistoryItems: 'searchHistoryItems',
            localization: 'localization',
            util: 'util',
            options: 'options',
            bootpag: 'jquery.bootpag',
        },
    
[/code]

## フレームワークテンプレートの.jsのrequire指定にbootpagを以下のように追加

[code]

    define(['require'], function (require) {
        require([
            './suggest',
            './search-es',
            './build-param',
            './topicMap',
            '../../../oxygen-webhelp/app/localization/localization',
            '../../../oxygen-webhelp/app/options/options',
            '../../../oxygen-webhelp/app/options/properties',
            '../../../oxygen-webhelp/lib/jquery-bootpag/jquery.bootpag.min'
        ]);
    });
    
[/code]

お騒がせしました．


CC BY-SA 4.0
2021-04-17T14:42:47.183
75349
2021-04-17T14:42:47.183
9503
75310
answer