I have pre-formatted HTML content (from third Party) that I need to display in Ionic. For example, I have list of questions (pre-formatted html) that I get from DB which I need to display as a list of Ion-Items or Ion-Card in Ionic.
Sample HTML Content from DB:
First Record:
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 1</strong></span><br />
TEXT_DESCRIPTION 1<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
Second Record
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 2</strong></span><br />
TEXT_DESCRIPTION 2<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
Third Record:
<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 3</strong></span><br />
TEXT_DESCRIPTION 3<br />
<span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
SOME_COMMENT_TEXT_1<br />
SOME_COMMENT_TEXT_2<br />
<img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
SOME_COMMENT_TEXT_3<br />
</p>
...and so on
I want to get suggestions regarding best practices to handle this scenario. Any help would be highly appreciated. Thanks!
You can DomSanitizer from Angular, to display your html.
Html :
<div class="details" [innerHtml]="details">
</div>
</ion-content>
And in your ts :
displayHTML(data){
this.details = this.sanitizer.bypassSecurityTrustHtml(data);
});
Don't forget to declare in the constructor :
public sanitizer: DomSanitizer
Related
I am using mui icons, currently I have filled ones but I want the thin versions for all of them.
This is where I am using them:
const drawer = (
<div>
<div className="drawer-container">
<div className="menu-container mt-8">
<List>
<div>
<DrawerItem name="Users" link="/view-users" icon="group" subItems={userChildren} />
</div>
<div>
<DrawerItem name="Forms" icon="article" link="/home" />
</div>
<div>
<DrawerItem name="Organisations" icon="groups" link="/organisations" />
</div>
</List>
</div>
</div>
</div>
);
They look like this:
My question is how do I get the outline versions?
I am trying to get my JSF Register form working with Bootstrap styles. Everything works fine, but i do not know how i can integrate my validation messages into my form. If i render this code the validation messages are just ignored. I don't know why? Any idea how i can make them visible and maybe style them good-looking? Many thanks in advance for your help!
<!-- Register Form -->
<h:form role="form" style="width: 400px; margin: 0 auto;">
<!-- User name -->
<div class="required-field-block">
<h:outputLabel for="name" value="Benutzername"></h:outputLabel>
<h:inputText id="name" value="#{userBean.user.name}"
validatorMessage="gültigen Benutzernamen mit 4-116 Zeichen" class="form-control">
<f:validateLength minimum="4" maximum="16" for="name"></f:validateLength>
</h:inputText>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<!-- Password -->
<div class="required-field-block">
<h:outputLabel for="password" value="Passwort"></h:outputLabel>
<h:inputSecret id="password" value="#{userBean.user.password}"
class="form-control" required="true"
requiredMessage="Mailadresse angeben">
</h:inputSecret>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<!-- Email -->
<div class="required-field-block">
<h:outputLabel for="email" value="Email"></h:outputLabel>
<h:inputText id="email" value="#{userBean.user.email}"
class="form-control" required="true"
requiredMessage="Passwort angeben">
<!-- Email Validation -->
<f:validator validatorId="emailValidator"></f:validator>
</h:inputText>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<!-- Age -->
<div>
<h:outputLabel for="age" value="Alter"></h:outputLabel>
<h:inputText id="age" value="#{userBean.user.age}" class="form-control"></h:inputText>
<h:message for="age"></h:message>
</div>
<h:commandButton id="send" value="Register" type="submit"
action="#{userBean.addUser}" class="btn btn-primary"></h:commandButton>
<h:message for="send"></h:message>
<h:commandButton id="reset" value="Reset" type="submit"
action="#{userBean.reset}" immediate="true" class="btn"></h:commandButton>
<h:message for="send" errorClass="errorMessage" globalAll="true"></h:message>
</h:form>
Just use jsf tag <h:message/> under each required input with attribute for where you should point input's id.
Also for good-looking style you can add bootstrap class "text text-danger". Also you can use attribute label for <h:inputText>.
It means you will get following error:
Email:Validation Error
instead of
email-id: Validation error.
For example:
<h:outputLabel for="email" value="Email"></h:outputLabel>
<h:inputText id="email-id" label="Email" value="#{userBean.user.email}"
class="form-control" required="true"
requiredMessage="Passwort angeben">
<!-- Email Validation -->
<f:validator validatorId="emailValidator"></f:validator>
</h:inputText>
<h:message for="email-id"/>
My data is spread all over so I can't keep this format :
<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">
<p itemprop="description">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">
</div>
</div>
Like you see in the code below the first thing on the page is the category path which has to be inside Offer schema than I have the image and the title which belong to Product than I have eligibleQuantity that again belongs to the Offer and so on....
So I added the :
<div itemscope itemtype="http://schema.org/Product">
In the beginning of the page and closed it at the end and than whenever I had an element that does not belong to the product schema like "eligibleQuantity" for example I would do this:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
The problem is I don't know if this is the correct way to do it and can't figure another way. I also get the "Warning: Incomplete microdata with schema.org."
Here is a link to the page :
https://www.pchounds.com/item.php?id=82627#.UTi7kRz_mSp
and below is some code from the page so you can have an idea what I did. Thank you.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="breadcrumb"> {L_041}:<span itemprop="category"> {TOPCATSPATH}</span> </div>
...........................................................................................
!-- IF B_HASIMAGE -->
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image"
src="{SITEURL}getthumb.php?w={THUMBWIDTH}&fromfile={PIC_URL}" border="0" alt="title" align="center"><br>
<h1 itemprop="name" style="line-height:24px;">{TITLE}</h1>...........................................................................................
<!-- IF QTY gt 1 -->
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{L_901}: <span itemprop="eligibleQuantity">{QTY}</span><br />
</div>
<!-- ENDIF -->
<!-- IF B_HASENDED -->
{L_904}<br />
<!-- ENDIF -->
<!-- IF ITEM_CONDITION -->
<b> {L_1036}:</b> <span itemprop="itemCondition">{ITEM_CONDITION}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MANUFACTURER -->
<b> {L_1037}:</b> <span itemprop="manufacturer">{ITEM_MANUFACTURER}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_MODEL -->
<b> {L_1038}:</b> <span itemprop="mpn">{ITEM_MODEL}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_COLOUR -->
<b> {L_1039}:</b> <span itemprop="color">{ITEM_COLOUR}</span><br />
<!-- ENDIF -->
<!-- IF ITEM_YEAR -->
<b> {L_1040}:</b> {ITEM_YEAR}<br />
<!-- ENDIF -->
</small>
offer must have a price, <span itemprop="price"> must be followed by the value of the price but is not and there are multiple Offers when there should just be one. Looking at the current test results from Google's structured data testing tool there are 5 errors, each states the price is missing.
The problem seems to be that each part of the offer has a separate `http://schema.org/Offer' at the start - so it is expecting 5 prices, one for each of the 5 offers.
What you need to do is declare http://schema.org/Offer' **once**, for example an extra` which remains open until all offer values are added.
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="breadcrumb"> Item category:<span itemprop="category"> All > Electronics > Audio > Audio Components > Speakers</span>
</div>
<div class="row">
<div class="span3" style="text-align:center"> <img class="img-polaroid" itemprop="image" src="https://www.pchounds.com/getthumb.php?w=120&fromfile=uploaded/82627/82627.jpg" border="0" alt="title" align="center"><br>
</div>
</div>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div><!-- schema.org/Offer removed -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
<div class="span5">
<h1 itemprop="name" style="line-height:24px;">Creative Labs Speaker GigaWorks T20 Series II Systems 2.0 EPS complian</h1>
<div> <!-- removed http://schema.org/Offer -->
<em>
<p><small>Buy Now:
<span itemprop="price"><b>108.91</b> USD</span></small></p>
</em>
</div>
Shipping fee: <b>8.00</b> USD<br />
<small>Ends within:
<span id="ending_counter"><span class="errfont">closed</span></span><br />
<p> Seller location: United States<br />
<div> <!-- removed http://schema.org/Offer -->
<b>Payment methods:</b><span itemprop="acceptedPaymentMethod"> PayPal</span> </p>
</div>
</small>
...
</div>
Following this thread, I tried to upload a file on the server. If I use a simple form like this:
<form action="/site/subscribers_import" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" />
</form>
everything goes well, but if I try to modify the form, like this:
<form action="/site/subscribers_import" method="post" enctype="multipart/form-data" >
<input type="submit" value='${importLabel}' style="float: right;" />
<div id="chooseFileBttn" style="width:3em; height: 2em; cursor:pointer; float: right;" onclick="getFile()">
<img src="/site/images/import.png" title="${importUsers}" height="20" width="30" style="padding-right: 10px; float: right;"/>
</div>
<div style='height: 0px;width:0px; overflow:hidden;'>
<input id="upfile" type="file"/>
</div>
</form>
<script>
function getFile(){
document.getElementById("upfile").click();
}
</script>
I don't get anything in the servlet.
Does anyone have any idea why that? Thanks!
Your working input:
<!-- presents a name attribute -->
<input type="file" name="file" />
Your not working input:
<!-- does not present a name attribute, but an id instead -->
<input id="upfile" type="file"/>
Your input need a name, which will be used as the parameter key, and thus recovered at the servlet.
I need to do something like that:
<form:errors path="*">
<div class="error">
<div class="internal">
${error}
</div>
<div class="bar"> </div>
<div class="internal">
<input type="button" value="Ok" />
</div>
</div>
</form:errors>
How can I get all the error messages by using the above HTML code? :S
By using <form:errors path="*" cssClass="error" /> it will be inside only one tag
You can use the spring:bind tag to bind a status-variable to your current error messages. Then you can iterate over status.errorMessages like in the example below.
<spring:bind path="*">
<c:forEach items="${status.errorMessages}" var="error">
<div class="error">
<div class="internal">
${error}
</div>
<div class="bar"> </div>
<div class="internal">
<input type="button" value="Ok" />
</div>
</div>
</c:forEach>
</spring:bind>
Don't forget to add the taglib declaration for spring: tags on top of your page:
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>