How to solve repeating dialog box save as pdf?

问题

I am drawing chart using selection box and printed the chart in pdf format.

This is the selection box and the layout code:

<div class= "chart-column">
                        <div class="chart-3-5block-inner">
                            <div class="chart-block-title">Job & Internship by Category</div>
                            <div class="chart-view" style="padding-top: 10px; padding-left: 10px">

                                <!-- //combo box options to select application filter -->
                                <?php
                                     echo 'Category Group: ';
                                     echo '<select id="category_filter">';
                                     echo '<option value="0" selected="selected">Select</option>';
                                     echo '<option value="1">Accounting/Finance</option>';
                                     echo '<option value="2">Admin/Human Resources</option>';
                                     echo '<option value="3">Arts/Media/Communications</option>';
                                     echo '<option value="4">Building/Construction</option>';
                                     echo '<option value="5">Computer/Information Technology</option>';
                                     echo '<option value="6">Education/Training</option>';
                                     echo '<option value="7">Engineering</option>'; 
                                     echo '</select>';

                                ?>

                            </div>                  
                            <div class="chart-view" id="categoryname_chart_div"></div>
                            <div class="chart-block-description">The bar chart shows the category of job & Internship posted by linked companies</div>
                            <div class="chart-block-view">
                                <input id="pdf-categoryname" type="button" value="Save as PDF" disabled />
                            </div>
                        </div>

This is the code for drawing the chart.

function drawCategoryNameChart(){

                // for category-filter
                $('#category_filter').on('change',function(){
                var select1 = $(this).val();  // category-filter value
                var jsonCategoryNameData = $.ajax({
                            url: "<?php echo $ajaxurl11; ?>",
                            contentType: "application/json",
                            data: {Value1 : select1},
                            dataType: "json",
                            async: false
                            }).responseText;

                var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);

                var optionsCategoryNameChart = {
                             //title: 'Job/Internship Distribution by Category',
                             titleTextStyle: {
                                  color: 'Black',
                                  fontSize: 18
                                },
                                pieSliceText: 'none',
                             fontSize: '11',
                             hAxis: {
                                  title: 'Category Name',
                                },
                             vAxis: {
                                  title: 'Total',
                                  minValue: 0,
                                  gridlines: { count: 4 }       
                                },
                             legend: {textStyle: {color: '#464847', fontSize: 11}},
                             tooltip: {isHtml: true},
                             backgroundColor: '#F8F9FA',
                             colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'],
                             chartArea: {
                                    backgroundColor: {
                                        stroke: '#fff',
                                        strokeWidth: 1
                                    }
                                },
                             height: 300,
                             chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" }
                              };        


                // Instantiate and draw our pie chart, passing in some options.
                var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));

                //draw the chart      
                CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);

                google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
                   btnSave.disabled = false;
                });

                var btnSave = document.getElementById('pdf-categoryname');

                btnSave.addEventListener('click', function () {
                    var doc = new jsPDF();
                    doc.setFontSize(15);
                    doc.text(70, 25, "Job & Internship by Category");
                    doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
                    doc.setFontSize(9);
                    doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies");
                    doc.save('category_name.pdf');
                  }, false);
                });

    }

My problem is when click on the button save as pdf, the pdf save box come out twice if I click on the selection box twice. The number of the pop up box appear according to the number of selection from the select box.

Why it repeating the action?

回答1:

the problem is the click event is being added to the button multiple times
every time the category filter changes
it should only be added once

to correct, add the click event outside of the change event

also, when adding event listeners to a chart,
they should be added before the chart is drawn

see following snippet...

function drawCategoryNameChart() {
  var btnSave = document.getElementById('pdf-categoryname');
  var CategoryNameChart;

  // for category-filter
  $('#category_filter').on('change',function() {
    var select1 = $(this).val();  // category-filter value
    var jsonCategoryNameData = $.ajax({
        url: "<?php echo $ajaxurl11; ?>",
        contentType: "application/json",
        data: {Value1 : select1},
        dataType: "json",
        async: false
        }).responseText;

    var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);

    var optionsCategoryNameChart = {
         //title: 'Job/Internship Distribution by Category',
         titleTextStyle: {
              color: 'Black',
              fontSize: 18
            },
            pieSliceText: 'none',
         fontSize: '11',
         hAxis: {
              title: 'Category Name',
            },
         vAxis: {
              title: 'Total',
              minValue: 0,
              gridlines: { count: 4 }
            },
         legend: {textStyle: {color: '#464847', fontSize: 11}},
         tooltip: {isHtml: true},
         backgroundColor: '#F8F9FA',
         colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'],
         chartArea: {
                backgroundColor: {
                    stroke: '#fff',
                    strokeWidth: 1
                }
            },
         height: 300,
         chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" }
         };


    // Instantiate and draw our pie chart, passing in some options.
    CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));

    google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
       btnSave.disabled = false;
    });

    //draw the chart
    CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);
  });

  btnSave.addEventListener('click', function () {
      var doc = new jsPDF();
      doc.setFontSize(15);
      doc.text(70, 25, "Job & Internship by Category");
      doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
      doc.setFontSize(9);
      doc.text(50, 115, "The bar chart shows the category of job & Internship posted by linked companies");
      doc.save('category_name.pdf');
  }, false);
}

来源：https://stackoverflow.com/questions/46577794/how-to-solve-repeating-dialog-box-save-as-pdf