var tempid = document.getElementById("TDID1");
Using alert(JSON.stringify(tempid)) Gives
{"jQuery3600419938127216425761":{"events":{"click":[{"type":"click","origType":"click","data":null,"guid":14,"namespace":""}]}}}
When all i want it to give is a variable typeof sting with document.getElementById("TDID1")
JSON.stringify creates a string for the value you give it. When that value is an object, the string is JSON describing all of the own, enumerable properties of the object.
In your case, the object is a DOM element, and one on which jQuery has been used at some point.
When all i want it to give is a variable typeof sting with document.getElementById("TDID1")
If I understand you correctly, that's not what JSON.stringify is for. You could write the string directly of course:
const str = 'document.getElementById("TDID1")';
...but there's no way, starting from the value returned by getElementById, to construct a string for the way you accessed that value.
Or if you want the value of that element (assuming it's an input or select element), you could get that value from .value:
const value = document.getElementById("TDID1").value;
Or if you want the text content of a non-input element:
const text = document.getElementById("TDID1").textContent;
Or if you want the inner HTML of the element:
const html = document.getElementById("TDID1").innerHTML;
Or the outer HTML of the element:
const html = document.getElementById("TDID1").outerHTML;
Related
Doing this.getAttribute('data') returns an object, how can I access to that object to return data.id?
If I do this returns me [object Object].
$(".button").click(function(){
var source = this.getAttribute('data-request');
console.log(source);
});
And this way returns Undefined:
$(".button").click(function(){
var result = this.getAttribute('data-request');
console.log(result.id);
});
If this.getAttribute("data-request") is returning "[object Object]", it's because the attribute contains the string "[object Object]", not because it contains an object. Most likely, someone mistakenly did this.setAttribute("data-request", someObject); (or similar). Attributes can only store strings, so doing that automatically converts the object to string, which in most cases results in the string "[object Object]", and then stores that string in the attribute.
That means you can't access the object, because it was never stored to start with, instead, just the "[object Object]" string was stored. (The reason you get undefined for console.log(result.id) is that strings don't have an id property.)
Since you're using jQuery, you have access to jQuery's data function, which can store arbitrary data (which can be anything, not just a string) on a DOM element. So if you really need to store an object attached to a DOM element, find the code doing this.setAttribute("data-request", someObject); or $(something).attr("data-request", someObject); and replace it with $(something).data("request", someObject); That does not set a data-* attribute, but does store the data associated with the element. Then you can retrieve it with const result = $(this).data("request");.
The easiest way to solve this problem is to pass the attribute like a Json String with JSON.stringify(dayBooking) and then parse the json object
let dataDay = e.currentTarget.getAttribute("data-value")
dataDay = JSON.parse(dataDay)
I'm using cts.uris in my search query. I'm assigning it to a variable like:
var x = cts.uris(...);
What is the output type of x?
I'm using JSON documents in my application and want to use xdmp.nodeReplace on some 2 objects. I'm performing an update on my document after checking the value of "x" to be valid or not after writing a search query inside cts.uris.
if(x.toString().length>0)
//x is cts.uris output. Checking if it gets a value then do the update like this.
{
var newObject = x;
newObject.field1="new value";
//field 1 value updated in the clone of original file
newObject.field2="new value"; //same as above
return xdmp.nodeReplace(x, newobj);
}
I expect the newObject to have all the contents of the origial file that we fetch and put in "x" and then update the values as given in the above code.
Once it is updated then it should replace the original document with the new values.
I'm currently getting an error like: "XDMP-ARGTYPE: xdmp.nodeReplace"
cts.uris returns a Sequence of uris. You probably want to iterate over the Sequence using a JavaScript for..of construct. An example is given in above link.
Note though that a uri is not a full document, but just its identifier. It doesn't make sense to assign values to it like that.
To make updates to documents inside MarkLogic, either reinsert the document, or read it using cts.doc, isolate the property you want to update, and nodeReplace it as you intended.
HTH!
You can quite easily set a data attribute of any element with jquery using $('#elid').data('key', value). You can do the same using document.querySelector('#elid').setAttribute('data-key', value)
However, jQuery gives you a special ability that querySelector doesn't - the ability to add attributes of an arbitrary type (including functions, and I think promises, which is what I need).
So if you were to do $('#elid').data('key', function(){console.log('yes')}) with jQuery, and then $('#elid').data('key')(), it would log 'yes' to the console -- we can just assign a function to the element as a data attribute and run it whenever.
But we can't do the same with 'setAttribute' -- when we do it, it apparently just assigns a stringified form of the function to the data attribute, rather than the actual function.
I've provided example code here:
https://jsfiddle.net/8e1wyL41/
So how can I apply data to elements with plain javascript, just like jQuery, including the ability to have arbitrary functions or javascript objects as data attribute values?
jQuery#data() uses an internal object to keep track of data values. It does not update the element to have new or changed data-* attributes when setting data values. When retrieving a data value, if the internal object does not have a set value it will attempt to get it from the data-* attributes.
A overly simplified way of doing this without jQuery would be to just use an object and store your data on that
var element = document.querySelector("div");
element.customData = {};
//get data example, check if customData has a value first, if not use dataset
var someData = element.customData["somedata"] || element.dataset["somedata"];
//set
element.customData["somedata"] = function(){};
If you don't want to contaminate the element with arbitrary properties you could use a WeakMap, pending on browser support, to associate a data object with the element. This also allows for using a single object to maintain other element data objects as well. The key to the data object is the element object itself. And the data object will get deleted from the map automatically once the element is garbage collected
var dataMap = new WeakMap();
var element = document.querySelector('div');
var elementData = dataMap.get(element);
if(!elementData){
dataMap.set(element, elementData = {});
}
//get data example, check if data object has a value first, if not use dataset
var someData = elementData["somedata"] || element.dataset["somedata"];
//set
elementData["somedata"] = function(){};
.dataset sets or gets a DOMString of HTML data-*, though you can use Function() to call the function stored as string at HTMLElement.dataset
document.documentElement.dataset.fn = function fn(...args) {console.log(args)};
new Function("return " + document.documentElement.dataset.fn)()("yes");
I'm trying to display to lists but with the code I have all i get back as the output is [object HTMLUListElement]. If I just append 'value' itself then it out puts the ul's but if i put it in a variable first i just get back [object HTMLUListElement]:
var listFind = $('.yCmsContentSlot'),
navLinks = listFind.find('ul'),
navLinksTotal = navLinks.length,
listContainer = $('.search-error__content-bottom-list');
if (navLinksTotal >= 5) {
navLinksTotal = 3;
}
var navBlockSize = 12 / navLinksTotal;
$(navLinks).each(function(key, value) {
var navListBlock = '<div class="col-md-' + navBlockSize + '">' + value + '</div>';
listContainer.append(navListBlock);
});
Where am i going wrong?
A jQuery selector returns an array-like object containing native references to any elements that matched the selector.
You are then iterating over this array-like object via each().
With this in mind you can discern that a reference to the each UL is passed, in turn, to the callback. So value is a (poorly named) variable pointing to the element itself. What you're currently seeing is the result of trying to output - i.e. convert to a string - an object, rather than a property of it.
Extrapolating further, you just need to know how to get the inner HTML of an element.
This is done via value.innerHTML.
Better would be to rename value element - and while we're talking sensible naming, navLinks is probably not the best name for a variable that stores not link but, rather, list elements.
I need to call either a array like below:
ONone = document.getElementById("'"+CB[x]+"'");
or a property value like so:
var ONone = document.getElementById("'"+animateSector.named.id+"'");
the above values i.e (CB[x] and animateSector.named.id) alert the value that i need however when there called in the
(document.getElementById("'"+CB[x]+"'")
and
(document.getElementById("'"+animateSector.named.id+"'")
they return a null console error saying
Onone is null
getElementById doesn't accept a CSS selector, it accepts an ID. So even if the id would need to be quoted in CSS, it doesn't matter, because this isn't CSS.
Without seeing your HTML it's impossible to be sure, but:
Get the element whose id is whatever is in CB[x], or whatever is in animateSector.named.id:
ONone = document.getElementById(CB[x]);
ONone = document.getElementById(animateSector.named.id);
Get the element whose id is CB[x]:
ONone = document.getElementById('CB[x]');
Get a list of elements whose name is CB[], and then get entry #x from that list:
list = document.querySelectorAll('[name="CB[]"]');
entryX = list[x];
querySelectorAll, as the name implies, does accept a CSS selector, and returns all matching elements in a list.