Clear Selectable Element Filter using JQuery Button

I am following the below answer for my charting scenario, I have no problem in expected functionality like rendering the chart, filtering the charts.

Editing Google Charts Category Filter

My Problem is I use JQuery button to clear the selectable, Clear Button gets created and disabled. I am trying to enable the button but it’s not working.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript">
var click = 0;

function filter_st_charts(){
      var st_chartview={};
      var st_selectedvalues = [];

      var r_row;
      var r_view = {
            columns: [0]
        };      

      $('.st_selectable li.ui-selected').each(function(index, selected) {        
        st_selectedvalues.push(selected.innerHTML);
      });

      

      if(st_selectedvalues.length > 0){        
        $('.st_selectable').closest('.st_accordion').find('.button-reset').button('enable'); // Button is not enabling here                      
        for (var i = 0; i < st_selectedvalues.length; i++) {            
          r_row = r_columnTable.getFilteredRows([{column: 1, value: st_selectedvalues[i]}])[0];
          r_view.columns.push(r_columnTable.getValue(r_row, 0));
        }        
      }
      st_chart.setView(r_view);
      st_chart.draw();
    }

onload_st_filter_values = st_initState.selectedValues;
google.visualization.events.addListener(st_chart,'ready',function() {
      var filt_values = onload_st_filter_values;
      console.log("Inside ready");
      if(click==0){
        $.each(filt_values.filter(uniquelists), function(index, value) {
        $('.st_selectable').append('<li>' + value + '</li>');
        });
      }
      
    $('.st_accordion').accordion({
      active: false,
      create: function () {
        $('.st_selectable').selectable({
          filter: '*',
          stop: filter_st_charts
        });
      },
      collapsible: true,
      heightStyle: 'content'
    });

    $('.button-reset').button();
    $('.button-reset').button('disable');
    $('.button-reset').on('click', clearFilter);

    click++

    })

function clearFilter(sender) {
      console.log("Inside Clear Filter");
      var accordion;
      sender.preventDefault();
      sender.stopPropagation();

      accordion = $(sender.target).closest('.st_accordion');
      accordion.find('.st_selectable li').removeClass('st_selectable .ui-selected');
      accordion.accordion('option', 'active', false);
      $(sender.target).closest('button').button('disable');
      filter_st_charts();
      return false;
  }
</script>

My HTML Code

<!DOCTYPE html>
<html>  
  <head>
    <base target="_top">  
    <?!= include('page_style'); ?> 
</head>
<body>
<div class="st_accordion">
    <h3>    
      <span>State&nbsp;</span>
      <button class="button-reset ui-button ui-widget ui-corner-all ui-button-icon-only" title="Reset">
        <span class="ui-icon ui-icon-close"></span>
      </button>
    </h3>
    <div><ul class="st_selectable"></ul></div>
    </div>     
    <div id="chart_st_pdiv" class="chart_container1"></div> 
</body>

My page_style CSS

.st_accordion > div.ui-accordion-content {
  padding: 6px 6px 6px 6px;
}
.st_selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.st_selectable li {
  background-color: #f6f6f6;
  border: 1px solid #c5c5c5;
  cursor: pointer;
  font-size: 8pt;
  margin-top: 2px;
  padding: 6px 8px 6px 8px;
}
.st_selectable .ui-selecting {
  background-color: #99ccff;
    border: 1px solid #809fff;
}
.st_selectable .ui-selected {
  background-color: #007fff;
    border: 1px solid #003eff;
  color: #ffffff;
}
.ui-button-icon-only {
  float: right;
  height: 18px;
  margin: 0px;
  min-width: 18px;
  width: 18px;
  z-index: 1;
}

.ui-widget {
  font-size: 8pt;
}

In ready function, I am creating an button and disabling it, on the function filter_st_charts trying to enable it but its not working.

I tried below to enable it

var btn = $('.st_selectable').closest('.st_accordion').find('.button-reset');
console.log(btn.length) -> returns 1

I tried this

btn.prop('disabled',false) // not working

then this

btn.attr('disabled', false); 
btn.removeAttr("disabled");

None of them working, I would like to understand where I am doing wrong.

You need to sign in to view this answers

Related Post