I need to remove the attribute "data-processed" from a child div of a component. I cant just set it to null or false, it needs to be removed.
In classic JS, I'd need something like:
$('#mermaid').html(node.data.graph).removeAttr('data-processed');
But that will not seem to work here. I have used useRef to specify the ref to the div, but I cannot find any documentation on how to remove the attribute from the element at the ref. Is this at all possible to do in react?
You can use vanilla removeAttribute method on the DOM node using useRef. https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
const domRef = useRef();
domRef.current.removeAttribute('data-processed');
You have 2 options.
Using removeAttribute method on element:
document.getElementById('mermaid').removeAttribute('data-processed')
Using ref (which is better):
elementRef.current.removeAttribute('data-processed');
Related
With React I'm inside of one repository, and the HTML elements are loading from another repo, which I watch for using pageLoaded. Inside updateHeader there is just more HTML element selecting and attribute/class manipulation.
useEffect(() => {
if (pageLoaded.status) {
if (someCondition) {
updateHeader(ubeName);
} else {
document.querySelector('.headerbar-menu').style.display = 'block';
if (document.querySelector('.headerbar-menu.affiliates-wrapper')) {
document.querySelector('.headerbar-menu.affiliates-wrapper').style.display = 'none';
}
}
}
}, [pageLoaded.status])
The problem here is obviously we shouldn't be using querySelector, and i think it may be causing some unexpected functionality. The elements dont properly evaluate and render until some piece of state changes i.e. a scroll state handler, so on initial page load the elements dont show with their new attributes until a scroll.
I'd like to attempt to resolve using useRef, but don't have direct access to the html. Is there a way to dynamically connect a ref to an element without access to the HTML code?
Thanks for your time and attention!
The best way to do this, in my opinion, is in this sequence:
Attempt to select the element
If non-existant, set up a DOMSubtreeModified event handler or a MutationObserver
Clean up DOMSubtreeModified event handler or a MutationObserver (or keep it around to watch for updates)
This allows for use of query selectors in a safe and modern way which doesn't stray too far from React's recommendations
In jquery , I can use $(this) reference to access an element without using any class or id. What is the way to achieve similar result in vue.js?
I assume you want to get an element which triggered event. Then it should be event.target.
For example:
<div #click="sayHi"></div>
methods: {
sayHi(event) {
console.log(event.target)
}
}
The prior answer refers to this.$el which grabs the root element of a given Vue component (Vue documentation on .el), however, if you want to grab an arbitrary element within a given component, you can use this.$refs (Vue documentation on .refs):
<template>
<div>
<h1 ref="myHeader">Hello</h1>
<div>
<template>
this.$el within a Vue component
I've found this answer here:
https://stackoverflow.com/a/50431015/11735826
and i wonder why .$el was used here, and also why does it not work without the el element?
when you use ref attribute on the html tag, the DOM-element is returned by this.$refs.modal.
when you use ref attribute on the template tag, the component instance is returned, so this.$refs.modal.$el returns directly the DOM element. See https://v2.vuejs.org/v2/api/#vm-el
$el returns the HTML element to which a given Vue instance (be it a main instance or a component) is bound. By using this.$refs.modal.$el the answer gets the underlying HTML element for the this.$refs.modal, and then encapsulates it in a jQuery object to call the modal method.
Trying to get the element through DOM accessor in amp-script
Tried to get element by classanme,id and queryselector but couldnot get element
var blogs = document.getElementById('home-blog-cards');
Expected the element but got some other data
when using amp-script, you can get the elements inside amp-script tag, because querySelector is currently partially supported.
Check the official documentation: amp-script docs
Try updating :
const blogs = document.getElementById('home-blog-cards');
I have a function attached to the div #Browse's click event that toggles a variable isOpen to true or false. Another click event has the following statements
alert($("#Browse").attr('isOpen'));
alert(document.getElementById('Browse').isOpen);
The first one yields "undefined" while the second one says true or false and is correct. How can I get the value of isOpen using jQuery?
Use data attributes to both set and get the data:
// to set
$("#Browse").data('isOpen', true)
// to get
$("#Browse").data('isOpen')
Documentation
jQuery data method - http://api.jquery.com/data/
There is no "jQuery way" to do this, because isOpen is an ad-hoc property. If you are able to change how the property is set, follow the recommendations in Chris' answer.
Otherwise, the closest you can get is to use jQuery to get the DOM element, and then unwrap it:
alert($("#Browse")[0].isOpen);
With new versions of jQuery, you need to use .prop to get this.
alert($("#Browse").prop('isOpen'));
To get access to the dom element in jQuery, you have to get the element by its index in the jQuery collection: With an id, there's hopefully only one element in your collection, so you can use get(0)
$('#Browse').get(0).isOpen;
For more convinient setting of attributes on jQuery elements, just use the data method