Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.
Related
Here is a screenshot of the webpage I am searching:
Here is a snippet of the HTML code of that page:
I want to copy the value highlighted in yellow in the HTML code.
What I know to do in vba-html is to search for buttons and click them.
How can I access the value that is highlighted in yellow? I don't know how to do it because it is outside of a tag.
You can use the querySelector method of the HTML Document object to get to the parent element, and then you can use the Children property to get to the second child. Let's say that the object variable HTMLDoc has been assigned the html document, try...
HTMLDoc.querySelector("div.qmod-quote-element-paydate").children(1).innerText
Note that the index for the collection of children is 0-based.
From the snippet you provided, I think you should get the text using querySelector, getElementsByTagName and innerText.
Set PayValue = doc.querySelector("div.qmod-quote-element-paydate").getElementsByTagName("div")(2).getElementsByTagName("div")(0)
PayValue.innerText
I have a paragraph that is enclosed in artist.bio.summary. This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.
My problem is there is a link inside this p tag within a a tag.
The a tag is like this;
Read more
The p tag just prints this out rather than giving me a link to click.
What should I do to act accordingly?
I am calling this property as below:
<p>{artist.bio.summary}</p>
let artist = {
bio: { summary: '' }
};
I had set this artist.bio.summary as a string initially.
And an example string that i am getting is below:
"hello Read more there"
The above string is the content of the artist.bio.summary once i received it
This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={artist.bio.summary}></p>
But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals.
https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection
From you description it seems that artist.bio.summary contains the entire content i.e Read more . In that case what you need is dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>
However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself
Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.
I'm trying to find a navigation link by iterating through a handful of spans with class 'menu-item-text'. My goal is to compare what is inside the span tags to see if it is the right navigation control to click (there are no hard ids to go by.) My code is like this:
navlinks = #browser.spans(:class, 'menu-item')
navlinks.each do |this|
puts "'#{this.text}'"
if this.text == link_name
this.click
break
end
I know for sure I'm getting the correct elements. However, text is always an empty string. My second idea was to use .html instead of .text, but that returns something like this:
<span class="menu-item">Insights</span>
What I want is the "Insights" text inside the span, not the full html that includes the tag markup. I have also tried using this.span.text, but that did not work either.
How can I target exclusively the inner html of an element through watir's content grabbing methods?
Thanks!
Assuming you are using Watir-Webdriver v0.6.9 or later, a inner_html method has been added for getting the inner HTML.
For the span:
<span class="menu-item">Insights</span>
You could do:
#browser.span(:class => 'menu-item').inner_html
#=> "Insights"
Similarly, you could try using this method in your loop instead of .text.
Note that depending on the uniqueness of your text, you might be able to simply check if the text appears in element's (outer) html:
#browser.spans(:class => 'menu-item', :html => /#{link_name}/).click
So I have this textarea in my website. By default, it has something like this as its contents:
Name : Sample Value
Age : Sample Value
Location : Sample Value
It is editable before the user hits the button and inserts it into the database, although I am not using a rich text editor since it's nothing but a simple text.
Since basic HTML codes are not browser readable inside the textarea tag, I used
to separate lines.
Now my problem is that I am not able to include the HTML code when I'm reading the value of the textarea tag in the server side.
Thus, the value inserted to the database is not HTML formatted as well, and when it is once again fetched into a web browser, it has no format at all.
What alternatives do I have? Thanks.
Not possible using textarea, use contenteditable DIV instead.
<div contenteditable="true"></div>
You can use getters and setter as shown below:
//Get content
var contents = document.getElementById("divId").innerHTML;
//Set content
document.getElementById("divId").innerHTML = contents
Here is the browser support for this approach.
Why don't you use JQuery and do this $(textarea).val() to get the value of the textarea as a string and use it server side. you might have to consider using Ajax to make a call to the server side method you want to pass the Html data.
The answer is very simple.
Use contenteditable DIVs instead of TextBox and TextArea.
But remember to add contenteditable="false" to all your inner HTML tags.
This worked for me.