CODEWITHSUNDEEP
javascriptjquery
Robert J.
Robert J.

Reputation: 2711

Retrieve value from HTML Object

I have the following div (this was already given to me, I did not create it):

<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

as far as my understanding goes (please correct me if I am wrong), we are saying here, that I want to assing the following values (such as slideCount, moveCount, customLink, etc...) to the object named data-sudo-slider.

What I am trying to do in my underlying JavaScript, is to retrieve the value of pause from this object. Here is what I am doing:

var sudoEl = jQuery('[data-sudo-slider]'); 
var pause = sudoEl.pause;

Even though it recognized the slider object, it did not retrieve the value for pause I have passed in (returned value is undefined.

How can I retrieve this value?

Upvotes: 0

Views: 269

Answers (4)

Abhishekh Gupta
Abhishekh Gupta

Reputation: 6236

You can use data() like this:

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:

$('[data-sudo-slider]').data('sudoSlider').pause;

why did you have to specify 'sudoSlider'?

You can also use sudo-slider.

It worked as the property name is derived as following:

  1. The attribute name is converted to all lowercase letters.
  2. The data- prefix is stripped from the attribute name.
  3. Any hyphen characters are also removed from the attribute name.
  4. The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

Upvotes: 1

nardeas
nardeas

Reputation: 634

To retrieve the correct element use

var element = $("div[data-sudo-slider]");

You can either get the data-sudo-slider attribute via

var sudoSlider = element.attr("data-sudo-slider");

In which case you will have to convert the string to JSON to access the pause property:

var pause = JSON.parse(sudoSlider).pause;

or better yet, use the .data() method

var sudoSlider = element.data("sudoSlider");
var pause = sudoSlider.pause;

Upvotes: 1

Satpal
Satpal

Reputation: 133453

You should use .data() to fetch data-sudo-slider value.

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

var sudoEl = jQuery('[data-sudo-slider]').data('sudo-slider'); 
alert(sudoEl.pause);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1500, "pause": 5000}'>

Upvotes: 1

vaso123
vaso123

Reputation: 12391

You can get this property by:

$(function () {
    var pause = $('[data-sudo-slider]').data('sudoSlider').pause;
});

$('[data-sudo-slider]') is the div element, where data-sudo-slider is defined. .data('sudoSlider') is the data property value. data is working with - signs a littlebit different, you can read about it in jQuery data documentation.

.pause is the property of JSON object.

Upvotes: 1

Related Questions