How to refresh table data while select different value in Select box

StackOverflow https://stackoverflow.com/questions/22549310

Question

I want to refresh table value while select different value in Select box. My Issue is when select the select box value Table load the data perfectly then i select the another value Table loaded without refresh the existing value.

HTML Code

<select id="destinations">
   <option value=""></option>
</select>

<table class="table table-hover" id="class">
<thead>
<tr>
<th>S.No</th>
<th>Date &amp; Time</th>
<th>Status</th>
<th>Served Business</th>
<th>Total Amount</th>
<th>Parking Rate</th>
<th>Tip</th>
<th>Promo Code</th>
<th>Promo Discount</th>
</tr>
</thead>
</table>
<div id="label_CarsParked" class="number"></div>
<div id="label_RevenueWithTip" class="number"></div>
<div id="label_Revenue" class="number"></div>

Script

$(document).ready(function() {
$.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_locations.php?callback=?', 'valetgroup_id=valetgroup_52c36a450a002', function(data) {
$.each(data, function(i, v) {
$('#destinations').append('<option value="' + v.ValetLotId + '">' + v.BusinessName + ', ' + v.Address + '</option>');
});
});
});
$('select').change(function() {
var params = {
valetlot_id: this.value,
start_date: '2014-01-01',
end_date: '2014-02-28'
};
var str = jQuery.param(params);
        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function(data) {
$.each(data, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>"
$(tblRow).appendTo("#class tbody");
});
});
});

This is my bootstrap-datepicker script

function () {
$('#dashboard-report-range').daterangepicker({
opens: (App.isRTL() ? 'right' : 'left'),
startDate: moment().subtract('days', 29),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2014',
dateLimit: {
days: 60
},
showDropdowns: false,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), 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')]
},
buttonClasses: ['btn'],
applyClass: 'blue',
cancelClass: 'default',
format: 'MM/DD/YYYY',
separator: ' to ',
locale: {
applyLabel: 'Apply',
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
}
},
function (start, end) {
console.log("Callback has been called!");
$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
$('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#dashboard-report-range').show();
}

In above getJson method am set the "start_date" "end_date" with static value. My question is how to set the datepicker value in "start_date" "end_date" dynamically. how can i get this. please anybody give jsfiddle example.

Was it helpful?

Solution

First of all, you have to clear the table whenever you make an ajax request for data.

$.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function(data) {

     $("#class tbody").html(''); /*Clearing the table*/

     /*Populating the table*/
     $.each(data, function(i, f) {
         var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>";
         $(tblRow).appendTo("#class tbody");
     });
 });

This is the reason why the table isn't refreshing because only the last 3 options in the select will return data from the request and they have the same valetlot_id value which is valetlot_52c3e6c52dd6f! And the first 2 valetlot_id returns an empty array.

To check if the return data is empty, do a check after clearing the table.

console.log(data.length);

UPDATE WITH USE OF daterangepicker

HTML for daterangepicker

<input id="dashboard-report-range" type="text" />

To get the date values from the range picker use:

$('#dashboard-report-range').data('daterangepicker').startDate
$('#dashboard-report-range').data('daterangepicker').endDate

To make the code more maintainable, you should define a function to fetch data and populate the table so that the select and #dashboard-report-range can share it.

$(function () {
        $('#dashboard-report-range').daterangepicker({

            startDate: moment().subtract('days', 29),
            endDate: moment(),
            minDate: '01/01/2012',
            maxDate: '12/31/2014',
            dateLimit: {
                days: 60
            },
            showDropdowns: false,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), 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')]
            },
            buttonClasses: ['btn'],
            applyClass: 'blue',
            cancelClass: 'default',
            format: 'MM/DD/YYYY',
            separator: ' to ',
            locale: {
                applyLabel: 'Apply',
                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
            }
        },
        function (start, end) {
            /*$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));*/
            $("#class tbody").getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
            /*Update code */  
        $('#label_CarsParked').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        $('#label_RevenueWithTip').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        $('#label_Revenue').getData($('select option:selected').val(), start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
        });

        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_locations.php?callback=?', 'valetgroup_id=valetgroup_52c36a450a002', function (data) {
            $.each(data, function (i, v) {
                $('#destinations').append('<option value="' + v.ValetLotId + '">' + v.BusinessName + ', ' + v.Address + '</option>');
            });
        });

        $('select').change(function () {
            $("#class tbody").getData($(this).val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            /* Update Code */
            $('#label_CarsParked').getData($('#label_CarsParked').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            $('#label_RevenueWithTip').getData($('#label_RevenueWithTip').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));
            $('#label_Revenue').getData($('#label_Revenue').val(), $('#dashboard-report-range').data('daterangepicker').startDate.format('YYYY-MM-DD'), $('#dashboard-report-range').data('daterangepicker').endDate.format('YYYY-MM-DD'));            
        });
        $('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
        $('#dashboard-report-range').show();
});

/*Defining getData*/
$.fn.getData = function (valet, start, end) {
        var tbody = $(this);
        var params = {
            valetlot_id: valet,
            start_date: start,
            end_date: end
        };
        var str = jQuery.param(params);
        $.getJSON('http://api.valetpayapp.com/phptest/dashboard_fetch_valet_transactions.php?callback=?', str, function (data) {
            tbody.html(''); /*Clearing the table*/
            /*Populating the table*/
            $.each(data, function (i, f) {
                var tblRow = "<tr>" + "<td>" + f.Date + "</td>" + "<td>" + f.Status + "</td>" + "<td> " + f.BusinessName + "</td>" + "<td>" + f.TotalAmount + "</td>" + "<td>" + f.ParkingRate + "</td>" + "<td>" + f.Tip + "</td>" + "<td>" + f.PromoCode + "</td>" + "<td>" + f.PromoDiscount + "</td>" + "</tr>";
                tbody.append(tblRow);
            });
        });
};

To learn more about bootstrap date range picker, take a look at this https://github.com/dangrossman/bootstrap-daterangepicker

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top