Cant use find on element textarea which is child of td [duplicate] - javascript

This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?


Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);


targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find

Related

Unable to set innerHTML from HTML Collection [duplicate]

This question already has answers here:
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 7 months ago.
I have below div tag from material UI which is getting autogenerated through MUI -
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Through javascript , I am fetching this element as -
var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);
In console log I am able to see element with all its properties including innerHTML as Some Text
When I am trying to change the InnerHTML by -
ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.
Also , before this , when I try to log innerHTML -
console.log(ele[0].innerHTML) , I am getting blank result.
How can I change the inner HTML from HTML Collection I am fetching ?

You have missed two things:
Typo in getElementsByClassName -> should be getElementByClassName
If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.
var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>

Query Selector, select an element by it's class and content [duplicate]

This question already has answers here:
Native javascript equivalent of jQuery :contains() selector
(6 answers)
Closed 3 years ago.
I'm making a chrome extension and i want to do an action when a certain element exist on the page. But the class element isn't precise enough to select the element only by it's class.
the element i'm looking for on pages is the following :
<span class="btn-text">M'y emmener</span>
I tried :
const listfull = document.querySelector('.btn-text:contains("m\'y emmener")');
if (listfull) {
console.log("hello")
}
But it doesn't seems to work anybody could tell me how this works ?

:contains is jQuery-specific syntax. It's also case-sensitive. To achieve what you're looking for, either use jQuery and capitalize the M:
const listfull = $(`.btn-text:contains("M'y emmener")`);
if (listfull.length) {
console.log("hello")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn-text">M'y emmener</span>
Or iterate over all matches of .btn-text and check their textContent:
const listfull = [...document.querySelectorAll(`.btn-text`)]
.find(elm => elm.textContent.includes("M'y emmener"));
if (listfull) {
console.log("hello")
}
<span class="btn-text">M'y emmener</span>

How to get Javascript getElementById base on partial string? [duplicate]

This question already has answers here:
ID Ends With in pure Javascript
(6 answers)
Closed 3 years ago.
I need to get the ID of an element but the value is dynamic with only the end of it is the same always.
Heres a snippet of the code.
<TABLE ID="_MIPS-LRSYSCPU">
The ID always ends with '-LRSYSCPU' then the _MIPS is dynamic.
How can I get the ID using just JavaScript and not jQuery? thanks

Use the selector [id$="<END OF ID HERE>"]:
const table = document.querySelector('[id$="-LRSYSCPU"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
Similarly, by using ^ instead of $, you can select elements who attributes start with a certain string:
const table = document.querySelector('[id^="_MIPS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
And *= to select elements who attributes contain a certain string:
const table = document.querySelector('[id*="LRS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">

Change text id span via JavaScript [duplicate]

This question already has answers here:
How can I change an element's text without changing its child elements?
(16 answers)
Closed 1 year ago.
I have next html:
<label for="user_name">
<abbr title="required">*</abbr>
Name
</label>
And I want to change label caption to Title with jquery. So I do
$('label[for=user_name]').html('Title')
And it replaces all inner html (including abbr tag)
So, what's the easiest way to replace only Name?

If you use contents() method it will also return text nodes. Since jQuery doesn't have text node methods, convert last node to a DOM node
$('label[for="user_name"]').contents().last()[0].textContent='Title';
Demo: http://jsfiddle.net/yPAST/1/

Sorry for the late reply... But here is a way to do so using only jQuery:
$('label').contents().last().replaceWith('Title');

It may not be the prettiest way, but this works:
var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));

You can select only the abbr element, store it, and then replace the whole content with the stored element plus the changed caption:
​$('label[for="user_name"]').each(function(){
var a = $(this).children('abbr');
$(this).html(a).append('Title');
});
See this fiddle​

you can use replace accomplish this
var html = $('label[for=user_name]').html().replace('Name','Testing');
$('label[for=user_name]').html(html);
check it : http://jsfiddle.net/DyzMJ/

Evans solution added to jquery fn to make it's use comfortable:
// get/change node content not children
jQuery.fn.content = function( n ){
var o = $(this).clone();
var c = o.children().remove();
if (typeof n === "string" ){
o.html(n);
$(this).html(c).append(n);
}
return o.html();
}
Usage :$('myselector').content('NewContentString');

This is the solution that worked for the most browsers
$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';
This one came close but gave issues in ie8 since textContent is not supported
$('label[for="user_name"]').contents().last()[0].textContent='Title';

if you are manipulating more than 1 label you can select each label and replace text with jquery:
$('label[for="user_name"]').contents().last().replaceWith("Title");
and for the second label :
$('label[for="user_lastname"]').contents().last().replaceWith("Title2");
and so on ...

Jquery check element exists by data attribute matching only the start of a specific value [duplicate]

This question already has answers here:
How to select all elements with an attribute that starts with
(2 answers)
Closed 8 years ago.
I want to be able to check to see if a specific data attribute exists that starts with a specific value.
for example lets say i have the following HTML code:
<div data-attr="123ABC"></div>
<div data-attr="123456"><div>
<div data-attr="TEST"></div>
and then i want to find any use of the data tag of data-attr that starts with 123
if ($('[data-attr="123"]').length > 0) {
//do something
}
This appears to always return 0 as i have no data-attr="123" How would i make it so i can check for only that specific data attribute that starts with 123 and has anything after that?

here is how
if ($('[data-attr^="123"]').length > 0) {
//do something
}

Categories

Resources