Assigning individual keys of object stored in jQuery.data() - javascript

I have custom data stored on elements using jQuery.data() method.
<div id="mydiv" data-test='{"1":"apple", "2":"banana"}'>Custom data</div>
I know I can access individual keys of the object stored in data-test using
$('#mydiv').data('test')["1"]
But is it ok to re-assign individual keys like this ? It works but it isn't documented. Secondly, on inspecting the element using browser's developer tools, I still see the old value i.e. "apple" in this case. JSFiddle
$('#mydiv').data('test')["1"] = "pear"
Update
- Found more related Q&A (not really duplicate because my primary question was about assigning individual keys of the object)
Unable to set data attribute using jQuery Data() API
Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?
Can't update data-attribute value : Good discussion in comments of answers

Using .data() to set a value, won't change the values in the element while you inspect it, it would store that data internally. If you want to reflect those changes to the DOM element, then you should use .attr() like this,
$('#mydiv').data('test')["1"] = "pear"
$('#mydiv').attr('data-test', JSON.stringify($('#mydiv').data('test')));
DEMO
Inspect that particular element to verify the changes.

Try this
$('#mydiv').data('test')["1"] = "pear";
$('#mydiv').attr('data-test',function(_,attr){
return JSON.stringify(attr);
});

Related

Assign an object to an element as an attribute in java script

I have this scenario where i need to assign a java-script object to div attribute.
var temp["name"]="first";
i assigned it to a div tag attribute using Jquery.
div.attr('data-polygon',temp);
Object [ <div#image01> ]
when i try to retrieve it , it does not come back same.. it is converted as String.
div.attr('data-polygon');
"[object Object]"
Any proper option / alternate to retain the object in attribute? please let me know
Attributes are always strings.
Here are two options for doing this; since you're already using jQuery, the first is probably best:
jQuery's data
jQuery provides the data method for doing this:
// Setting -- notice no "data-" prefix
div.data("polygon", temp);
// Retrieving
varName = div.data("polygon");
Under the covers, traditionally data assigns the element a unique ID and manages a data cache for the element, separate from it. I think in the v3 branch they've updated it to actually store the data on the element (there were memory issues with doing that in Internet Explorer 8 and earlier, which is why jQuery didn't do it before).
Assign it as your own "expando" property
If you don't need to support Internet Explorer 8, you can just create a property on the actual DOM element.
// Setting
rawDiv.myUniquePrefixToAvoidConflicts_polygon = temp;
// Getting
varName = rawDiv.myUniquePrefixToAvoidConflicts_polygon;
Note that to avoid conflicts with the many predefined properties elements have, and future ones they don't have yet, you'll want to use a likely-unique prefix.

What does 'data()' do in '$("#myWidget").data(`ejTE`)'

This works:
var editor = $("#htmlEditor").data('ejRTE');
The question is what does .data('ejRTE') do?
It retrieves the widget which is part of this html:
<textarea id="htmlEditor" value.bind="entity.content"
ej-rte="e-width:100%"
ref="textArea"
style="height: 220px"></textarea>
How do I retrieve it without jQuery.
jQuery.data() Store arbitrary data associated with the specified element and/or
return the value that was set.
So basically the widget stores some data in the element htmlEditor indexed ejRTE, I bet it is a custom object used by this tool.
var editor = $("#htmlEditor").data('ejRTE');
then editor will hold the object stored by the widget for this element
If you set data like this $(#myWidget).data('foo', 'myFoo') then jQuery will create an object called 'jQuery224059863907884721222' on myWidget which it uses to store the value.
I am guessing that the number is an arbitrary datetime value.
I stepped through the jQuery code, and it's not practical to replace it. I thought it might be just a line or two of code.

How to delete an attribute when sending a partial object update to Algolia?

I need to use partialUpdateObject from the Algolia Javascript SDK to delete an attribute from an object that is already in the index.
My scenario is that I have a description field on my object that is optional. If the user originally sets a description and then later deletes it, I want to remove the description altogether from the object.
I do not want to overwrite the whole object (without the description attribute) because I have some count attributes on the object that I do not want to have to recalculate.
As far as I can tell in the documentation there isn't a way to do it and my workaround is to set the description as an empty string. Is that the recommended approach?
You're right: you cannot totally remove the attribute from an object with a partialUpdateObject operation. As a work-around you can set it to null, maybe that's enough for your use-case?
If you really want to delete the field you can :
Get your object with the search function
Store all fields values
Update (not partial update) your object without passing the field you want to delete

HTML5 data DOM's change isn't seen by JQuery

I'm using HTML5's data to store some informations on a div on my website, and whenever I change the value of this data with jQuery, the DOM's updating well, but jQuery doesn't see the update when I try to retrieve the value.
I update the value of this data with $('#myDiv').attr('data-my_data',value);, and get the value back with $('#myDiv').data('data-my_data').
Here's the fiddle to illustrate my problem.
Is this happening because of some jQuery's initial representation of the DOM that doesn't update?
I don't get it, any help will be appreciated!
Configuration : Chrome 25 - jQuery 1.9.0 - Mac OSx 10.7
you can set the values to the data('yourKey','Yourvalue')
$(yourElement).data('isEdit','1');
according to your Example
$('#myDiv').data('data-my_data','value');
Attr : it will add attributges to the dom object.
prop : it will add properites in memory. so your data will be stroed in dataSet of DOM.
for more info check this attr vs prop
data-* attributes are mapped to dataset DOMString object, use data method as setter, do not use attr for properties.
$('#testDiv').data('test_data', newData).html("My data is : " + newData);
http://jsfiddle.net/zgKdg/

How can I find an element from jquery.cache object which jquery uses for data storing

I need a way to find the element of stored data on jQuery.cache object.
As you may now jQuery stores data as following syntax:
$('#idOfTheSelector').data('dataKey','dataValue);
jQuery stores this data in $.cache object as ;
$.cache[1].data.dataKey = 'dataValue';
my question is:
how jQuery associates the data with the element? and
Can I find a associated element of stored data?
Why don't you just use $('#idOfTheSelector').data('dataKey')? It will return you whatever your stored in it.

Categories

Resources