dynamically changing custom html values using jquery

Question

<div data-react-class="Duration" data-react-props="{"startDate":"","endDate":""}">

I have this in my html. How can I change the startDate and endDate values in data-react-props using jquery?

Is it running allright? Because your "{"startDate" should break (wrong "). Well, for changing these values with jQuery, maybe a simple var element = $('selector'); // var data = element.data('react-props'); // data['startDate'] = new value; // element.data('react-props', data); // that should do — Renan Souza
– Renan Souza, Commented Sep 10, 2017 at 23:44

Amit Sheen · Accepted Answer · 2017-09-11 00:02:29Z

2

add an ID to the div:

<div id="sample" data-react-class="Duration" data-react-props="{"startDate":"","endDate":""}">

And use the setAttribute method:

document.getElementsByID('sample').setAttribute('data-react-props', '{"startDate":"","endDate":""}');

answered Sep 10, 2017 at 23:47

Amit Sheen

2491 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Philip Bejoy · Accepted Answer · 2017-09-11 00:07:14Z

1

You can use jQuery data selectors

$("div[data-react-class='duration']").attr("data-react-props","{'startDate':'12-12-2017', 'endDate':'01-01-2018'}");

answered Sep 11, 2017 at 0:07

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges