1

スクリプトにブートストラップ daterangepicker を実装しました。最初は問題なく動作しています。リンクをもう一度クリックすると (daterangepicker を実装し、AJAX 呼び出しを使用してページ コンテンツを読み込む)、ブートストラップ daterangepicker が機能しません。

ajax を使用してページ本文のコンテンツを読み込んでいます。日付範囲ピッカー スクリプトとインクルード ファイルをページ本文のコンテンツに含めました。

JQuery ready() 関数内に daterangepicker を実装しました。

これは私が実装した私のコードです。

HTML コード:

     <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
           <i class="icon-calendar icon-large"></i>
           <span></span> <b class="caret" style="margin-top: 8px"></b>
      </div>

JS コード:

 $(document).ready(function() {

       $('#reportrange').daterangepicker({
                    ranges: {
                       'Today': [new Date(), new Date()],
                       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                       'Last 7 Days': [moment().subtract('days', 6), new Date()],
                       'Last 30 Days': [moment().subtract('days', 29), new Date()],
                       'This Month': [moment().startOf('month'), moment().endOf('month')],
                       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },                        
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    startDate: moment().subtract('days', 6),

                 },
                 function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    start = start.format('MMMM D, YYYY');
                    end = end.format('MMMM D, YYYY');
                    test(start,end);

                 }
              );
      $('#reportrange span').html(moment().subtract('days', 6).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

});

私の問題を解決するのを手伝ってください。

4

1 に答える 1

0

jQuery のドキュメント準備完了関数は、ページの DOM コンテンツが読み込まれるとすぐに起動します。これは通常、レンダリングの直前に発生しますが、ほとんどの場合、サーバーへの AJAX 呼び出しがreportrangediv を含むコンテンツを読み込む前に発生します。これは、html を使用した ajax 呼び出しがロードされると、その要素を再度reportrange起動する必要があることを意味します。$('#reportrange').daterangepicker({

幸いなことに、jQuery はこれを行う必要があることを認識しているため、問題はそれをどこに配置するかです。

reportrange div を明示的にロードすると、次のようになります。

$(".rangeArea").load("reportRange");

次に、jQuery はコールバックのオプションを提供します。

$(".rangeArea").load("reportRange", function() {
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

他の方法で ajax 領域をロードする場合は、ピッカー コードをグローバル ajax complete ハンドラーに接続することをお勧めします。これは、すべてのajax 呼び出しの後に起動されるため、やり取りが多い場合は注意してください。

$.ajaxComplete(function(){
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

もう 1 つの問題は、あなたが your を呼び出しているということです。<div id=reportrange>これは、ページ上にそれらのうちの 1 つしか存在できないことを意味します。id 属性は、後でコンテンツが読み込まれた場合でも、ページ上で一意でなければならないことに注意してください。同じページに1 秒もかからない場合は、reportrangeおそらく ID からクラス名に切り替えたいと思うでしょう:<div class=reportrange>と$(".reportrange").

最後に -jQuery(document).ready(function(){...})次のようにもっと簡潔に書くことができます$(function(){...})

于 2013-06-07T15:47:42.453 に答える