调用ajax函数onload并单击按钮

Question

I want to show report base on the election date. when I call the function showReport() on form load is working, but it's not working when I call that function on button click.

Report members

<script>
function showReport(){
   var from = $('#from').val();
   var to = $('#to').val();
   var str = $('#str').val();
 if(from == '' && to == '')
 {
    var from = '$from';
    var to = '$to';
 }
$.ajax({
    url: "crm_data_report.php?type="+str+"&from="+from+"&to="+to,
    method: "POST",
    success: function(data) {
    console.log(data);
    var date = [];
    var value = [];
    for(var i in data)
    {
    date.push(data[i].date);
    value.push(data[i].value);
    }
    var color = Chart.helpers.color;
    var chartdata = {
    labels: date,
    datasets :
    [
    {
    label: 'Members',
    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
    borderColor: window.chartColors.red,
    borderWidth: 1,
    data: value
    }
    ]
    };
    var ctx = $("#mycanvas");
    var barGraph = new Chart(ctx, {
    type: 'bar',
    data: chartdata
    });
    },
    error: function(data) {
    console.log(data);
    }
    });
}

The code I called the function on load and on button click.

<script>
$(document).ready(function(){
   showReport();
});
$('#filter').click(function(){
    showReport();
});
</script>

Answer 1

Replace the code block with this:

$(function(){
    $('#filter').click(function(){
        showReport();
    });    
})

Its a very common issue you are binding the click event when the button is not available to dom yet , so you have to bind it when dom tree is ready.

Answer 2

This is on a hunch, there's nothing wrong with your code. Could you please try

<script>
$(document).ready(function(){
   showReport();
   $('#filter').click(function(){
    showReport();
   });
});
</script>

It is possible that the DOM has not loaded completely (#filter element) when you are attaching the click handler to it.