Comment résoudre la boîte de dialogue de répétition enregistrer en pdf?

Question

Je dessine un tableau en utilisant une boîte de sélection et j'imprime le tableau en format pdf.

Ceci est la boîte de sélection et le code de mise en page:

<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> 

Voici le code pour dessiner le tableau.

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); 
       }); 

    } 

Mon problème est quand cliquez sur le bouton Enregistrer en format PDF, le pdf boîte sauver sortir deux fois si je clique sur la boîte de sélection deux fois. Le numéro de la boîte contextuelle apparaît en fonction du numéro de sélection de la boîte de sélection. Pourquoi il répète l'action?

Answer 1

le problème est l'événement click est ajouté au bouton plusieurs fois
chaque fois que le filtre de la catégorie change
il ne doit être ajouté une fois

pour corriger, ajouter l'événement click en dehors de l'événement de changement

également, lors de l'ajout d'écouteurs d'événement à un graphique,
ils devraient être ajoutés avant que le tableau est tiré

voir suivant extrait ...

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); 
}