CODEWITHSUNDEEP
javascriptjquery-ui
SCS
SCS

Reputation: 639

jQuery UI slider - Cannot call method 'addClass' of undefined

I had this old jQuery UI slider that had worked just fine a few months ago, but now I seem to be getting an exception reading: Cannot call method 'addClass' of undefined. I've checked the values being passed into the slider and they're regular Javascript dates.

  $('#dateFilter').click(function() {
    return $('#sliderContainer').slideToggle(200);
  });

  $(function() {
    var endFiling, startFiling;
    startFiling = Date.parse($('#startFiling').val());
    endFiling = Date.parse($('#endFiling').val());
    return $('#filingDateSlider').slider({
      range: true,
      min: startFiling,
      max: endFiling,
      step: 86400000,
      values: [startFiling, endFiling],
      slide: function(event, ui) {
        var eD, end, sD, start;
        sD = new Date(ui.values[0]);
        start = dateFormat(sD);
        eD = new Date(ui.values[1]);
        end = dateFormat(eD);
        $('#filingStartDate').text(start);
        return $('#filingEndDate').text(end);
      }
        });

Is there a particular reason why I might be getting this new error?

https://i.sstatic.net/Rp8vd.jpg

Upvotes: 19

Views: 20605

Answers (7)

Miguel Gil Martínez
Miguel Gil Martínez

Reputation: 520

I solved this error by using integers in "min", "max" and "values". Maybe you are setting null values.

The jQuery Slider specification says:

  • max Number Default:100
  • min Number Default:0
  • value Number Default: 0

So "values" are an array of numbers.

Upvotes: 22

Shailesh Bhardwaj
Shailesh Bhardwaj

Reputation: 179

jQuery UI Slider plugin min & max options accepts only number. So according to your requirement parse them to integer or float.

For details visit link- http://api.jqueryui.com/slider/

Upvotes: 0

brian
brian

Reputation: 1

solved the problem using unmodified jQuery-UI.min.js. Using a custom script caused the error i.e jQuery-UI-custom.js

Upvotes: 0

Dino
Dino

Reputation: 31

I had this issue with latest versions, too. The solution is easy: use parseInt() to pass dynamic values to sliders

Setter example for jquery ui slider:

    $("#mySlider").slider("option",{min: parseInt(value.min), max:parseInt(value.max),value: parseInt(value.active)});

Upvotes: 3

Alex
Alex

Reputation: 743

For anyone who's still having this issue, ensure that the values you're adding (min, max, and values are all NUMBERS and not STRINGS!

Been trying to diagnose a problem where the following code was failing:

t.slider({
  range : true,
  min   : t.attr('data-min'),
  max   : t.attr('data-max'),
  values: [t.attr('data-min'), t.attr('data-max')],
  step  : 1.00,
  slide : function (e, ui) {
    var
      v = (s == 'price') ? '£' + ui.values[0] + ' - £' + ui.values[1] : ui.values[0] + ' - ' + ui.values[1] + 'kg'
    $('#filter-' + s).html(v)
  },
  stop  : function () {
    Items.filter()
  }
})

As t.attr() returns a STRING, Slider was failing to set valueMouse on line 12843 of Version 1.10.1 of jQuery UI. Instead of being a value, it was returning a string (something similar to 39.99549.21 (min value of 39.99 concatenated with 549.21 - a percentage * max value)

Hope that helps someone!

Upvotes: 10

JvR
JvR

Reputation: 11

Another possibility - this error can come up if the min or max are missing for the slider. If your startFiling or endFiling are not evaluating to a date, the slider code fails when trying to calculate the new handle position.

Upvotes: 1

Vinay
Vinay

Reputation: 6342

For anyone reading back on this question, if you're pulling from a CDN, try pulling from the latest jQuery UI version. I also got this problem, and it was solved by using a later jQuery UI version.

Upvotes: 35

Related Questions