Input text in draft.js - javascript

I'm doing automation test and I need to input text in a text field, but the problem is there is no 'input' to do this.
This one won't work:
document.querySelector([class*=modal-dialog] [class*=AddCitation_] [class*='DraftEditorPlaceholder']).value='Hello World'
Does any one know how to input text in draft.js?

You can use document.execCommand("insertHTML", "html string here", false)
As you can see draft js uses contenteditable property of div to write text
So if you want to automate tests with draftjs insert any sample html string with command
so you have a sample text in draft editor now you can perform tests
Read this
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Let's first understand the code you have written:
document.querySelector([class*=modal-dialog] [class*=AddCitation_] [class*='DraftEditorPlaceholder']).value='Hello World'
This code attempts to:
get the first element
which has a class containing 'DraftEditorPlaceholder' and
which has an ancestor having a class containing AddCitation_ which
has an ancestor having a class containing modal-dialog
So, you will first need to ensure that the element you try to edit is inside an element having a class containing modal-dialog. In your screenshot we cannot see such an ancestor element, the root having a class of modal-content. If the selector you have written does not find an element, then an error will be thrown when you try to assign a value to any of its attributes, like value in this case. You have an element having a class of styles_AddCitation__3_D5j, which is the child of the element of the class of modal-content. You have an element having a class of public-DraftEditorPlaceholder-root, which, assuming that you have a class containing the modal-dialog text being its ancestor, then the selector will find it. However, this is the sibling of the element which you seem to expect to find with your query. So, you will need to sort out where you intend to put your text into.
Now, assuming that you have sorted your selector out and there is a span in the element you are talking about, you will need to write span at the end of your selector, with a space before it. Also, in this case you will need to set innerText instead of value to your desired value. If the target element is an input, then setting a value should suffice.
Another possible problem is that your Javascript code might run before the structure is actually generated, hence not being able to set attributes of elements which do not exist yet. So you will also need to make sure that your structure is in place indeed when this Javascript code runs.

const screen = document.getElementById("screen");//get span ID
screen.innerHTML += `<span class="screen" >${
this.textContent
}</span>`);//add text content
<body>
<h1>CALCULATOR</h1>
<!-- <div class="container"> -->
<div class="container">
<div class="column2" id="screen">
<!-- <span class="screen"></span> -->
</div>
I used this to insert span tags into a div tag.
I'm only a beginner so it might not be optimal
I used this while experimenting with JS on a simple calculator, because I wanted to see if it could work without using an input tag.
please let me know if this helps as it will also help me to see if my understanding is good

Related

Changes to a parent element's textContent causes the child to delete

I have a 'click' event on an image in javascript that I want to use to change the text content of the parent element when clicked. However, when I click it, the parent's text changes, but the image deletes itself. I assume I can just create and append a new child element after, but this doesn't seem to be the most efficient, and I would also like to understand why the child element gets deleted. My code looks like the following:
<body>
<ul>
<li> Hello <img src="img/hello.png"></li>
<ul>
<body>
<script>
const helloImage = document.querySelector('img')
helloImage.addEventListener('click', (e) => {
let parentEle = e.target.parentElement
parentEle.textContent = 'bye'
})
<script>
I have looked for a while for an answer, but can't seem to find anything with regards to modern javascript. I found one answer to a similar question with jQuery, but I got the same result when applying the solution's logic. Any help or if you can just point me in the right direction, I would really appreciate it. Thank you!
When you set textContent you overwrite all other child nodes.
From MDN:
Warning: Setting textContent on a node removes all of the node's children and replaces them with a single text node with the given string value.
The corresponding spec for the textContent setter says
String replace all with the given value within this.
If you only want to change the text then alter your HTML and wrap the text you want to change in a distinct element. Then reference that element's textContent in the click handler.

Chrome extension to automatically replace html code

How could I change the value of id automatically,
e.g. if I have
<div id = "email">
I would like to change it to
<div id = "nick">?
AutoReplaceHTML seems to be what you are looking for. If you would like further customization, you can use content scripts with JavaScript that searches for elements by id.
I'm not sure why you would want to do this, however. The id of an element is used to determine which CSS styles apply to it and can possibly be used in scripts (like the JavaScript getElementById() example I linked). Changing the id of an element could break the styling or produce an error in any of the attached scripts.

Nightwatch. Click on element with text

I have a problem, can`t click on web element having some unique text.
I have this structure:
<div class="wg-wagon-type__item" data-reactid="10"
<div class="wg-wagon-type__title" data-reactid="11">Text</div>
I try this
.click('.wg-wagon-type__title:contains("Text")')
But I have an error
ERROR: Unable to locate element: ".wg-wagon-type__item .wg-wagon-type__title:contain("Text")" using: css selector
How can I correct click on this element?
Is there any reason why you can't simply target the class wg-wagon-type__title?
.click('.wg-wagon-type__title')
Unfortunately there isn't a CSS selector that matches on the text of an element. However, nightwatch has the capability to run javascript on the browser via 'api.execute' and that allows you to do string matching.
Alternatively, you could use an xpath selector and use that to match the text
.click("//div[contains(#class, 'wg-wagon-type__title') and text()='Text']")

How to avoid breaking block level HTML elements from partial selection?

The problem in a nutshell is: given a wysiwyg editor (CKEditor) you want to make a plugin doing text transformation - select a piece of text and manipulate the text in it (eg uppercase). Example:
this is paragraph one
this is paragraph two
If bold represents your selection the result would be
this is paragraph ONE
THIS is paragraph two
This issue here is the selection will be a complete HTML fragment, even when a selection is no containing the full tag. The selected HTML is:
<p>one</p> <p>this</p>
Notice the first and last <p> tags. When you do your dom traverse in the selection html, apply the text transformation and replace the html it will use those partial tags, so your result become:
this is paragraph
ONE
THIS
is paragraph two
I checked if it's possible to "merge" the first and last partial tags with their dom parents, however the selection object is isolated, it doesn't have siblings or parents from it's original context.
Also tried to find an option to retrieve the selection without these auto-fixed tags, but no luck.
On the CKEditor documentation they mention a walker object - however that automatically expands from the selection to the full enclosing tag, which means the selection is only used as a minimum boundary.
Also because the selection object is isolated, it's not possible to just change the dom node text values there - the original dom fragment needs to be replaced (at least in case of CKEditor).
I tried not to stick with the CKEditor api as much as possible, however at this point I don't see any alternatives either. Is this is really a hard problem or I'm missing something?
One solution is to use the browser engine to mark the selected area with a tag (afaik that's a native operation). This is the same as you make your selection bold or italic - however here it's gonna be a temporary wrapper. Then you walk the DOM and replace the content in the temporary tags - and finally remove the tag (keeping the content).
This makes sure you can apply your transformation on the exact selection and by removing the tag you won't break the original DOM. Steps in a nutshell:
apply tag on selection (use the browser or wysiwyg api)
find all temp tags:
recursively walk the children of the tag
if tag is text node then apply transformation
otherwise recursive walk
collect tag's left sibling text node + tag's html + right sibling text node
replace tag's parent html with the previous compilation (=remove temp tag)
Not too elegant however works. This is inspired by #Andrew_Mast's idea about wrapping in a span.
I would loop through all of the word(s) and for each set of words inside a different tag, surround it with <span style="text-transform: uppercase;"> and </span>

Getting text from a paragraph in jquery

This might be a very simple thing in jquery but I am not able to figure it out. My html document has the following structure
<div class="body">
<p>This is the text I want to extract</p>
</div>
I tried this
$("body").find("a p").text()
but this does not seem to be working for me. I am able to get the paragraph object but not the text. I tested it with console.log with no use.
What you have should be working (you can test it here), make sure you're running it when the DOM is ready though, like this:
$(function() {
alert($("body").find("a p").text()); //or just $("a p").text()
});
If it runs earlier, the elements may not be ready, and your selector won't find any matches.
If you want to select the class body make sure to use ".body" instead of "body" (which would select the <body> element). Here's a version using the .class selector:
$(function() {
alert($(".body a p").text());
});
the .html() function retrieves a nodes inner html.
$('.body a p').html();
should do the trick
Not sure if this would cause a problem, but you have invalid markup. From "The global structure of an HTML document" by the W3C
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
a elements are supposed to be contained by block elements like p, not the other way around.
here is your paragraph element in html or php file which is id assign tt
<p id="tt">ALert Message </p>
in in jquery file to get the text of your paragraph with tt id can be
var tt = $("#tt").text();
alert(tt);
working fine for jquery-3.1.1.js

Categories