Сохранение даты из DatePicker в куки и отправка даты в Datatable

Question

Поскольку мой разработчик недоступен, я пытаюсь усовершенствовать свои маленькие знания JQuery в своем проекте, но я столкнулся с блокировщиком. Я пытаюсь создать повара ie, который сохранит диапазон дат, выбранный пользователем в datepicker, и сделает отчет доступным в виде данных, когда пользователь обновится или вернется на страницу.

Все, что мне удалось сделать сейчас - создать / переопределить sh повар ie, когда даты выбраны, и сделать выбор диапазона дат обратно при выборе даты, когда пользователь вернется, но отчет не обновляется для этих дат, поскольку запрос Ajax не отправлено в Dataatable.

Вот мой код:

$('#demo').daterangepicker({
    "timePicker24Hour": true,
    "autoApply": true,
    ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "alwaysShowCalendars": true,
    "startDate": Cookies.get('startdate'),
    "endDate": Cookies.get('enddate'),
    "opens": "left",
    }, function(start, end, label) {
        $("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
        var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
        Cookies.set('startdate', start.format('MM/DD/YYYY'));
        Cookies.set('enddate', end.format('MM/DD/YYYY'));
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
});

Мне нужен запрос Ajax в конце кода, который будет выполнен при загрузке страницы. Я попробовал приведенный ниже код, но он не работает. Коротко, он создает куки при загрузке страницы, если не существует, иначе он отправит запрос Ajax для датировки с датами из куки, чтобы показать отчет:

$(function(){
    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();

    var output = 
        ((''+month).length<2 ? '0' : '') + month + '/' +
        ((''+day).length<2 ? '0' : '') + day  + '/'
        + d.getFullYear() ;

    if (Cookies.get('startdate')  == null || Cookies.get('enddate') == null) {
          Cookies.set('startdate', output);
          Cookies.set('enddate', output);
    }

    if (Cookies.get('startdate') && Cookies.get('enddate')) {
        var todaydate = Cookies.get('startdate')+"to"+Cookies.get('enddate');
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
    }
});

РЕДАКТИРОВАТЬ: Я думаю, что я не вносить изменения в соответствующем месте. У меня есть этот код, именно там, где должна быть загружена таблица кампании. php.

$(document).ready(function(){
    var todaydate = (new Date()).toISOString().split('T')[0]+"to"+(new Date()).toISOString().split('T')[0];
    $.ajax({
        url:"campaign-table.php",
        method:"POST",
        data:{todaydate:todaydate},
        success:function(data){
            $('#campaigntable').html(data);
        }
    });
});

$('li.dropdown.mega-dropdown').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

Answer 1

Если я правильно понимаю вопрос, вам нужна та же функциональность, которая возникает, когда пользователь выбирает дату, которая должна произойти при загрузке страницы? Это означает:

• Проверьте, есть ли у нас файлы cookie для существующих дат начала / окончания;
• Если они существуют, используйте их; если не использовать некоторые значения по умолчанию (сегодня?);
• Запустить запрос AJAX с этими датами;
• Обновить таблицу данных ответом от AJAX;

Чтобы сделать это, я бы изменил несколько незначительных вещей:

1) daterangepicker в настоящее время использует существующего повара ie для установки даты начала / окончания. Но это не удастся в самый первый раз, когда пользователь заходит на страницу, так как эти куки еще не существуют. Было бы неплохо протестировать и установить некоторые значения по умолчанию, чтобы справиться с этим случаем.

2) AJAX, который вы хотите запустить при загрузке страницы, точно такой же, как тот, который вы хотите запустить, когда пользователь выбирает свидание. Поэтому я бы выделил это в общую функцию, на которую вы можете ссылаться в любом месте, где вам это нужно, чтобы избежать дублирования кода.

$(document).ready(function(){
    // Create a simple function to fire the AJAX using the date you specify,
    // and show the response on the page.  We can reference this whenever we
    // need to do that.
    function showReport(todaydate) {
        $.ajax({
            url:"campaign-table.php",
            method:"POST",
            data:{todaydate:todaydate},
            success:function(data){
                $('#campaigntable').html(data);
            }
        });
    }

    // Check if we have cookies with dates, if not, set them to defaults
    // (today for both).  Now when the date range picker uses the
    // cookies the very first time a user visits, it will work.
    if (Cookies.get('startdate') == null || Cookies.get('enddate') == null) {
        Cookies.set('startdate', (new Date()).toISOString().split('T')[0]);
        Cookies.set('enddate', (new Date()).toISOString().split('T')[0]);
    }

    var todaydate = Cookies.get('startdate') + "to" + Cookies.get('enddate');

    // We have our dates, fire off the AJAX, and display the response.
    // This runs on page load, as you need.
    showReport(todaydate);

    // Now initialise the date range picker
    $('#demo').daterangepicker({
        // ... all your options, unchanged ...
    }, function(start, end, label) {
        $("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
        var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
        Cookies.set('startdate', start.format('MM/DD/YYYY'));
        Cookies.set('enddate', end.format('MM/DD/YYYY'));

        // Fire off the AJAX with the selected dates and show the response.
        showReport(todaydate);
    });
});

Вам не нужен код, указанный в вашем вопросе, начиная с $(function(){ материал, который мы только что добавили к $(document).ready(function(){, теперь обрабатывает это.