jquery - jQuery DateRangePicker - プラグインのどのインスタンスが起動されたかを知る

Question

私は DateRangePicker ブートストラップ プラグインを使用しており、parentElオプションを次のように動的に設定しようとしています。

$('.dashboard-report-range').daterangepicker({
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
        'Last 7 Days': [moment().subtract('days', 7), moment()],
        'Last 30 Days': [moment().subtract('days', 29), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
    },
    opens: (App.isRTL() ? 'right' : 'left'),
    format: 'DD/MM/YYYY',
    separator: ' to ',
    startDate: moment().subtract('days', 7),
    endDate: moment().add('days', 1),
    minDate: '01/01/2010',
    maxDate: moment().add('days', 1),
    timePicker: false,
    opens: 'left',
    parentEl: '#' + $(this).closest('.portlet').attr('id'), // this line
    locale: {
        applyLabel: 'Submit',
        fromLabel: 'From',
        toLabel: 'To',
        customRangeLabel: 'Custom Range',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        firstDay: 1
    },
    showWeekNumbers: true,
    buttonClasses: ['btn btn-default'],
    applyClass: 'green btn-small btn-primary',
    cancelClass: 'red btn-small pull-right',
},

function (start, end) {
    App.blockUI($('#dashboard')); // ideally want to make this the parentEl

    setTimeout(function () {
        App.unblockUI($('#dashboard')); // same as above
     }, 1000);
     $('.dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

});

$('.dashboard-report-range').show();

$('.dashboard-report-range').on('apply.daterangepicker', function(ev, picker) { 

    console.log(picker.parentEl);

    // ajax request
    $.ajax({
        ...
    });
});  

HTML

<!-- BEGIN PORTLET-->
<div id="portlet_test" class="portlet solid bordered light-grey">
    <div class="portlet-title">
        <div class="caption full-width">
            <small>
                <div class="dashboard-report-range pull-right dashboard-date-range tooltips no-tooltip-on-touch-device responsive" data-tablet="" data-desktop="tooltips" data-placement="top" data-original-title="Change report date range">
                    <i class="icon-calendar"></i>
                    <span><%= 1.week.ago.strftime('%B %-d, %Y').to_s %> - <%= Time.now.strftime('%B %-d, %Y').to_s %></span>
                    <i class="icon-angle-down"></i>
                </div>
            </small>
        </div>
    </div>
</div>
<!-- END PORTLET-->     

DateRangePicker ドキュメント: https://github.com/dangrossman/bootstrap-daterangepicker

コンソールは、親要素が設定されていないときのデフォルト値であることを教えてくれるbodyので、設定方法に何か問題がありますparentEl。

を任意のセレクターにハードコーディングすると、次のparentElエラーが発生します。

Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefinedこれは、ブートストラップと jQuery の間の競合だと思います。

必ずしも を使用する必要はありませんparentEl。どのピッカーが使用されたかを区別する方法を探しているだけです (ページには複数のピッカーが存在します)。

これが任意の要素にidまたはdata属性を追加することを意味する場合、それは問題ありません。目的は、選択した日付をajax経由で正しいURLに渡すことだけであるため、全体のポイントは、どのURLを使用する必要があるかを見つけることです。