0

I am printing out objects in two different ways in the console with these calls:

console.log(ui.handle)
console.log($(ui.handle))

console.log(ui) prints out this:

enter image description here

console.log($(ui.handle)) prints out like this:

enter image description here

There is a common "thing"value I need to get out of one of them. In the first I need data-value. Therefore I need a way of getting the 12:00 AM from it.

From the second, this "thing"/value I need to get is in more than 1 spot. 1. Under attributes -> data-value -> it is the nodeValue, textContent, and value 2. Under dataset -> value is 12:00 AM

I Have tried doing the following after printing out the objects, and do not get the correct value:

    console.log(ui.handle.attributes.getNamedItem("data-value"))
    console.log($(ui.handle).data('value'))
    console.log(ui.handle.dataset["value"])

Someone please understand what I am trying to get and help me.

Here Is my JS code that initializes the slider:

$(".pct-slider#" + sliders[1])
.customSlider({
    min: 0,
    max: 1440,
    step: 15,
    range: false,
    ticks: true,
    values: initialValues,
    create: function (event, ui) {
        $.each( initialValues, function(i, v){
            updateValue({
                value: v,
                handle: $(".pct-slider#" + sliders[1]).find('.ui-slider-handle').eq(i) 
            });
        });
    },
    start: function(event, ui) {
        //console.log(event)
        console.log(ui.handle)
        console.log($(ui.handle))
        console.log($(ui.handle).data('value'))
        console.log(ui.handle.dataset["value"])
        console.log(" ")
        console.log(" ")
        var curHandles = $(".pct-slider#tuesdaySlider").find('.ui-slider-handle')
        var dataValue
        $.each(curHandles, function(i, v){
            dataValue = $(".pct-slider#" + sliders[1]).find('.ui-slider-handle').eq(i).attr('data-value')
            console.log(ui.handle.dataset.value + " " + dataValue)
            if (ui.handle.dataset.value == dataValue) {
                var last = $($(".pct-slider#" + sliders[1]).customSlider('values')).last()[0]
                $(".pct-slider#" + sliders[1]).customSlider('addValue', last + 15)
                return false
            } 
        })
        console.log("HELLO " + $(ui.handle).data('value'))

    },
    slide: function (event, ui) {
        resize_colors(sliders[1]);
        var handleIndex = $('a', event.target).index(ui.handle),
            curr = ui.values[handleIndex],
            next = ui.values[handleIndex + 1] - 15,
            prev = ui.values[handleIndex - 1] + 15;

        if (curr > next || curr < prev) {
            return false;
        }

        updateValue(ui);
        //positionSelects();
    },
    stop: function(event, ui){
        resize_colors(sliders[1]);
    }  
});

****NOTE**** the call console.log(ui.handle.dataset["value"]) in the stop function will give me 12:00 AM, but I am needing to extract this value in the start function to prevent the slide based on the value.

connor moore
  • 611
  • 1
  • 8
  • 18
  • Are all three values always the same or do you just need the value some way? – depperm Jun 16 '15 at 13:28
  • I just need to get the value from one of the spots. If I make any of the calls mentioned in my post above, I get 3:00 AM which is the value of the ui.handle before It changes. But my calls to print the object and the values in the manner above are after the value changes. I don't understand it. – connor moore Jun 16 '15 at 13:33
  • Coudl you post the js code were you are accessing the time value ? – dreamweiver Jun 16 '15 at 13:35
  • possible duplicate of [How to get the data-id attribute?](http://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute) – Anonymous Jun 16 '15 at 13:36

3 Answers3

1

Try

$(ui.handle)[0].dataset.value
Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
0

To get ui.handle attribute

console.log(ui.handle.attr('data-value'));
depperm
  • 10,606
  • 4
  • 43
  • 67
  • Im sorry, I tried this as well. Gives the following error: Uncaught TypeError: ui.handle.attr is not a function – connor moore Jun 16 '15 at 13:31
  • have you included jquery, ie – depperm Jun 16 '15 at 13:31
  • could you show the script code in context in the question, the html file with the libraries and then your script? What is ui.handle? – depperm Jun 16 '15 at 13:33
  • `ui.handle` is not a jquery object so `attr()` wont work on it. you should try `console.log($(ui.handle).attr('data-value'));` – dreamweiver Jun 16 '15 at 13:34
  • Im using jquery ui slider. ui slider is the object that is passed through the functions of the api. It is a slider handle. @dreamweiver console.log($(ui.handle).attr('data-value')); doesnt error out but gives me the value the handle was initialized with / the old value. Im printing it out AFTER i print out the object, which clearly has a new value. – connor moore Jun 16 '15 at 13:37
  • @connormoore: post that js code, need to check how your accessing – dreamweiver Jun 16 '15 at 13:38
0

The main why you are getting a wrong value when you try to call $(ui.handle).attr('data-value') is because your trying to read the value in the start event of the slider, which is by definition "Triggered when the user starts sliding".

Ref: http://api.jqueryui.com/slider/

What you can do is that, you could try to read the value in the stop event of the slider.

jQueryUi Slider Stop Event handler

JS CODE:

$(".pct-slider#" + sliders[1])
.customSlider({
min: 0,
max: 1440,
step: 15,
range: false,
ticks: true,
values: initialValues,
create: function (event, ui) {
    $.each( initialValues, function(i, v){
        updateValue({
            value: v,
            handle: $(".pct-slider#" + sliders[1]).find('.ui-slider-handle').eq(i) 
        });
    });
},
start: function(event, ui) {
...
},
stop: function(event, ui) {
    console.log($(ui.handle).attr('data-value'));
});
halfer
  • 19,824
  • 17
  • 99
  • 186
dreamweiver
  • 6,002
  • 2
  • 24
  • 39
  • Yeah, I just edited my post 5 minutes ago stating this because I discovered it. But, I need to know the value its clicking on (ui) before the slide event happens. If an already existing handle is being clicked on I want to allow them to slide it, else I want to add a new handle. – connor moore Jun 16 '15 at 13:55
  • are you saying every value that you encounter while sliding the slider needs to be captured ? – dreamweiver Jun 16 '15 at 14:03
  • No, I'm sorry I am having a tough time explaining. My slider has multiple handles. When I click on a HANDLE (AKA a value that already exists as a part of my slider), I want to be able to slide it. When I click on a NON-HANDLE (AKA a value that does not exist as a part of my slider), I DONT want to slide it, I want to add a new handle. I have ways of doing everything except getting the value I click on in the slider, in the start function (AKA before it actually moves to the slide function and slides) – connor moore Jun 16 '15 at 14:06
  • if i'm not wrong you want to know the slider value before the slider is sliding on it ? which is more like predicting the slide value and trying to add a new handle if it doesnt contain one. btw the value `12.00 am` is the final limit value of your slider – dreamweiver Jun 16 '15 at 14:23
  • Why is it predicting when the object im showing you above, logged out from the start function (before any sliding occurs), shows the value "12:00 AM" which is where Im clicking on my slider. (Hence, one of my slider handles is initialized at 3:00 AM, I am clicking to the left of it on 12:00 AM) – connor moore Jun 16 '15 at 14:27
  • hmmm, looks like some other logical issue. could you create a jsfiddle, need to run the code and see whats the issue, just add the specific code which would simulate your issue. http://jsfiddle.net – dreamweiver Jun 16 '15 at 14:42