I have a rich text editor that supports mathematical expression, its working fine expressions can be written and rendered fine in the editor but when we try to render using div it throws many errors in the console and the page becomes blank.
<div className="text-container flex" dangerouslySetInnerHTML={{ __html: value }} />
We use Katex and Mathquil to work with math expressions, HTML content is this
<p>
<span class="ql-formula" data-value="\sqrt[3]{}23">
<span contenteditable="false">
<span class="katex">
<span class="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mroot>
<mrow></mrow>
<mn>3</mn>
</mroot>
<mn>23</mn>
</mrow>
<annotation encoding="application/x-tex">\sqrt[3]{}23</annotation>
</semantics>
</math>
</span>
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height: 1.04em; vertical-align: -0.2395em;"></span>
<span class="mord sqrt">
<span class="root">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 0.6588em;">
<span class="" style="top: -2.8366em;">
<span class="pstrut" style="height: 2.5em;"></span>
<span class="sizing reset-size6 size1 mtight">
<span class="mord mtight">
<span class="mord mtight">3</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="vlist-t vlist-t2">
<span class="vlist-r">
<span class="vlist" style="height: 0.8005em;">
<span class="svg-align" style="top: -3em;">
<span class="pstrut" style="height: 3em;">
</span>
<span class="mord" style="padding-left: 0.833em;">
</span></span><span class="" style="top: -2.7605em;"><span class="pstrut" style="height: 3em;"></span><span class="hide-tail" style="min-width: 0.853em; height: 1.08em;"><svg width="400em" height="1.08em" viewBox="0 0 400000 1080" preserveAspectRatio="xMinYMin slice"><path d="M95,702
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
c69,-144,104.5,-217.7,106.5,-221
l0 -0
c5.3,-9.3,12,-14,20,-14
H400000v40H845.2724
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.2395em;"><span class=""></span></span></span></span></span><span class="mord">23</span></span></span></span></span></span> </p>
In the editor it looks like this but when we try to render this on the view page, its fails.
How can we render this HTML content in react js?
There is a button which must show a toggle only if a value is greater than 0. Otherwise it shouldn't do anything.
This is the code before adding ng-if:
<span >{{values.valuesNumber}}
<i class="fas fa-caret-down" ng-click="$ctrl.doSomething(values)">
</i>
</span>
I want to call the function from ng-click only when values.valuesNumber > 0.
So I added it like the following but it does not work.
<span >{{values.valuesNumber}} <i class="fas fa-caret-down">
<span ng-if="values.valuesNumber > 0">
<span ng-click="$ctrl.doSomething(values)">
</span>
</span>
</i></span>
use ng-show instead of ng-if. Because ng-if creates a scope of it's own.
<span >{{values.valuesNumber}} <i class="fas fa-caret-down">
<span ng-show="values.valuesNumber > 0">
<span ng-click="$ctrl.doSomething(values)">
</span>
</span>
</i></span>
Also please take a look at this discussion:
what is the difference between ng-if and ng-show/ng-hide
I have a link whose title should change from "Add Comment" to "Edit Comment" only if a child has a class of .has-comment. What complicates the matter is that I also toggle icons which are also in a .
So if the div.additional-comments has class of .has-comment then I'd like the text to read "Edit Comment" otherwise it should read "Add Comment".
See working code here: JSFiddle
HTML
<table>
<tr>
<td>
<a class="toggle-comments">
<span class="add-comment" style="display:none;">Add</span>
<span class="edit-comment">Edit</span> Comments
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
</a>
<div class="additional-comments has-comment" style="display:none;">
<textarea>Comment is here...</textarea>
</div>
</td>
</tr>
<tr>
<td>
<a class="toggle-comments">
<span class="add-comment">Add</span>
<span class="edit-comment" style="display:none;">Edit</span> Comments
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true" style="display: inline-block;"></span>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true" style="display: none;"></span>
</a>
<div class="additional-comments" style="display:none;">
<textarea></textarea>
</div>
</td>
</tr>
</table>
Script
// Toggle Comments
$(document).ready(function() {
$('.toggle-comments').click(function() {
$(this).next('.additional-comments').toggle("fast");
$(this).find('span').fadeToggle(0);
});
});
I'm not really sure if I understand what you want to achieve so I updated your fiddle, tell me if its what you aimed : http://jsfiddle.net/benjaminb/mgdaf5ar/3/
I only changed this
$(this).find('span.glyphicon').fadeToggle(0);
You can ignore all your glyphicons by changing your find to:
$(this).find('span:not(.glyphicon)')
I have following HTML:
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagNone"></span>
</span>
</span>
</a>
</article>
<article>
<a href="#" title="Title">
<span class="row first">
<span class="col">
<span class="articleTitle">Article title</span>
<span class="row">
<span class="tel">12345</span>
<span class="mail">test#domain.com</span>
</span>
</span>
<span>
<span class="articleFlag flagRed"></span>
</span>
</span>
</a>
</article>
And now I would like to change the background-color from the span with class 'articleTitle' to red, if the class 'flagNone' is set in this article. It should only change in this article not in the following one.
I tried this:
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').closest('.articleTitle').css("background", "red");
}
});
but it doesn't work. Any ideas?
Hello Please check this Demo
$(document).ready(function() {
if ($('.articleFlag.flagNone').length>0) {
$('.articleFlag.flagNone').closest('.row').find('.articleTitle').css("background-color", "red");
}
});
I think it will help you
Use jQuery's :has() selector (demo)
$(document).ready(function() {
if ($('.articleFlag.flagNone')) {
$('.row:has(.flagNone) .articleTitle').css("background", "red");
}
});
Closest traverse up the dom tree, that is the reason your selector doesn't work
try below js code
if ($('.articleFlag.flagNone')) {
$('.articleFlag.flagNone').parents('.row:eq(0)').find('.articleTitle').css("background", "red");
}
I have this html code:
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
<span id="post"></span>
I want to count how many spans are there with the id="post" in my page. when I tried to use .length and alert I got 1
what is the way to do this ?
You may want to use class instead of id.
Like:
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
<span class="post"></span>
And
alert($('span.post').length);
IDs must be unique. Try using classes instead. Then you could do this:
alert(document.getElementsByClass("post").length);
// or jQuery
alert($(".post").size());
That'd give you the correct amount of spans.