I need to put 2 rows of text, the "API Name" and "Resource Name" to the left, and put another 2 rows of text, the "Service Name" and "Status" to the right.
like this
However, the result is not what I want. this is my result:
my code:
const ViewHeader = (props: ViewHeaderProps) => {
const {apiName, resourceName, serviceName, apiStatus, desc, rpcName, verb, uri} = props;
return (
<div className="view-api-header">
<span>
<div>{apiName}</div>
<div>{serviceName}</div>
</span>
<span>
<div>{resourceName}</div>
<div>{apiStatus}</div>
</span>
<div>
<span>{apiName}</span>
<span>{serviceName}</span>
</div>
<div>
<span>{resourceName}</span>
<span>{apiStatus}</span>
</div>
</div>
);
};
I'm new to html and react, is there anyway to format the 4 elements correctly?
I suppose the HTML code should be like this
<div style="clear: both">
<div style="float: left">{apiName}</div>
<div style="float: right">{serviceName}</div>
</div>
<div style="clear: both">
<div style="float: left">{resourceName}</div>
<div style="float: right">{apiStatus}</divstyle>
</div>
Related
i have shop section show product
i want to save quantity of different input on different values how to do it and i want when he click button return with quantity value on input!!
{
Object.keys(product).map(arr =>
<div className='Card'>
<div className='iconCard' > <img src={Icon} className="icon-card" alt="cardicon" />
</div>
<div>
<h2> {product[arr].title}</h2>
</div>
<div>
<input type='number' key={1} id='input-value' ref={textInput} min={1} max={100} className='NumberSelect' placeholder={t('Quantity')}/>
</div>
<div>
<h3 style={InputSearch}> {product[arr].price} 150{t('price')} </h3>
</div>
<div className='Card-Button'>
<button onClick={()=> onOnclickHandler()}> {t('Buy')} </button>
</div>
</div>
}
how to save multi input value using react or how just to retrun the input value when the user click button ?
I have an array with <p> and <div> items and I'm trying to render them as HTML, but whenever I try to render it, the values just appear as plain code and not the normal paragraphs. So I have an array with let's say that this information:
<p>The first paragraph of this pinned topic will be visible as a welcome message to all new visitors on your homepage. It’s important!</p>
<p><strong>Edit this</strong> into a brief description of your community:</p>
And when it gets rendered in the page, it gets rendered as this instead of the paragraph that should be rendered it gets rendered as plain code:
this is how it renders
This is the code I've used for render:
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
console.log(postData?.post_stream?.posts[0]?.cooked)
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p>{postData?.post_stream?.posts[0]?.cooked}</p>
</div>
</div>
</div>
</div>
</div>
You can use dangerouslySetInnerHTML for converting your string data to HTML, but for safety (avoiding XSS attack), you should sanitize your HTML string before using dangerouslySetInnerHTML by DOMPurify
import DOMPurify from 'dompurify'
const sanitizedHtml = DOMPurify.sanitize(postData?.post_stream?.posts[0]?.cooked)
And then call it like this
dangerouslySetInnerHTML={{__html: sanitizedHtml}}
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
const sanitizedHtml = DOMPurify.sanitize(postData?.post_stream?.posts[0]?.cooked)
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p dangerouslySetInnerHTML={{__html: sanitizedHtml}}></p>
</div>
</div>
</div>
</div>
</div>
One side note, without HTML string sanitization, your HTML data can be interfered by some script injections which would harm your website or your system.
You can use html-react-parser package
This is how your code will look like
import parse from 'html-react-parser'
useEffect(() => {
axios.get(`/api/get-post?id=${pid}`)
.then(res => setPostData(res.data))
.catch(err => console.log(err.response))
}, [])
return (
<div>
<div className={styles.containerPadding}>
<div className={styles.mainContainer}>
<div className={styles.blackLine}>
</div>
<div className={styles.titleContainer}>
<div>
<h1>{postData.title}</h1>
</div>
<div>
<h1></h1>
</div>
</div>
<div className={styles.postInformationContainer}>
<div>
</div>
<div>
<p>{parse(postData?.post_stream?.posts[0]?.cooked)}</p>
</div>
</div>
</div>
</div>
</div>
You can use 'dangerouslySetInnerHTML' like everyone else.
And I need to register the tags to use.
import DOMPurify from 'dompurify';
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(
view_inner ?? '<div>Unable to get data.</div>',
{
FORCE_BODY: true,
ADD_TAGS: ['style'],
ADD_ATTR: ['target'],
ALLOWED_TAGS: [
'span',
'div',
'link',
'table',
'thead',
'tr',
'th',
'tbody',
'td',
],
},
),
}}
/>
I have an observableArray property self.FilteredStudents, the students have name and lastname, and i want to print it together.
Here is the foreach code in the HTML:
<div class="row justify-content-center" data-bind="foreach: FilteredStudents">
<div class="col-md-6 col-lg-4">
<div>
<div class="LLUserCard">
<div class="LLUserCardHeader">
<div>$name $lastName</div>
<div></div>
</div>
<div class="LLUserCardBody">
</div>
<div class="LLUserCardFooter">
$enrollmentDate
</div>
</div>
</div>
</div>
</div>
Obviously the code above is not working, the pseudocode <div>$name $lastName</div> is just to specify what i am looking for.
In all the examples or tutorials i've found they use two elements like <td data-bind="text: name"></td><td data-bind="text: lastName"></td> but i don't want to print the values in different elements, i want them to be the text of one element.
Thank you.
you can use a computed or pure computed function or an inline function on the text binding https://jsfiddle.net/0o89pmju/69/
html
<p>
<span data-bind="text: Name"></span>
</p>
<p>
Or
</p>
<span data-bind="text: (firstname() + ' ' + lastname() )"></span>
js
function viewModel() {
var self = this;
this.firstname = ko.observable('bob');
this.lastname = ko.observable('smith');
self.Name = ko.pureComputed(function () {
return self.firstname() + ' ' + self.lastname()
},this);
}
var vm = new viewModel();
(function($) {
ko.applyBindings(vm); //bind the knockout model
})(jQuery);
I'm trying to make my first Tampermoney script
Here's an example of an html page :
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
<div class="a">
<div class="d">
<div class="e">
...
<div class="n">
"Hello world"
</div>
</div>
</div>
</div>
I found this topic, very interesting, but I'm not able to make it fits my requirements : Hiding div that contains specific string
I would like to hide the divs class="a" ONLY if it contains a div class="n" that contains the text "Hello world".
Do I need to loop on all the divs class="a", to seek for a class="n" containing "Hello world" ? I'll need some help please...
<div class="a">
<div class="b">
"Hello world"
</div>
<div class="n">
"Test"
</div>
</div>
Hmmmm, I think it needs a few ajustements...
Here's my code :
$(window).load(function(){
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
});
The web page :
And the associated code :
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
[...]
Also, I can't put in the webpage :
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
When I try to execute the commande in the console :
$('._5g-l:contains("Publication suggérée")').closest('._5jmm _5pat _3lb4 m_95yeui-j _x72').hide();
(unknown) Uncaught Error: <![EX[["Tried to get element with id of \"%s\" but it is not present on the page.","._5g-l:contains(\"Publication suggérée\")"]]]>
at h (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:166)
at i (https://www.facebook.com/rsrc.php/v3/yZ/r/AveNRnydIl_.js:36:293)
at <anonymous>:1:1
I think this will help you. And you want if class .a contain .n with text("hello world") , .a need to be hide. I just make edit your HTML part and also comment out which div will be hide. According to your HTML first one will be not hide because .n contain "test".
if any question or if you found anything wrong on my answer ask me. :) Live On Fiddle
UPDATE: In your Code the problem in your parent div you have 5 class _5jmm, _5pat, _3lb4, m_95yeui-j, _x72 but you write in jQuery closest('.5jmm _5pat _3lb4 m_95yeui-j _x72').hide(). So you can set only one class which is closest. And you don't
$(window).on('load', function() {
$('._5g-l:contains("Publication suggérée")').closest('._5jmm').hide();
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div data-fte="1" data-ftr="1" class="_5jmm _5pat _3lb4 m_95yeui-j _x72" id="hyperfeed_story_id_581d0a6f0b12a3832990101" data-testid="fbfeed_story" [...]>
<div class="_4-u2 mbm _5v3q _4-u8" id="u_jsonp_2_1f">
<div class="_3ccb _4-u8" [...]>
<div></div>
<div class="userContentWrapper _5pcr" role="article" aria-label="Actualité">
<div class="_1dwg _1w_m">
<div class="_5g-l"><span>Publication suggérée</span></div>
</div>
</div>
</div>
</div>
</div>
I am struggling to format this div structure using th:each in Thymleaf.
The desired html format is as follows
Desired HTML
<div class="row interest-featured"> <!--Parent Div -->
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
</div>
<div class="row interest-featured"> <!--Parent Div -->
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
<div class="col-md-4 interest">
</div>
</div>
Progress until now
<div th:each="interest,status : ${interest}" th:class="${(status.index + 1 % 3) == 0}? 'row interest-featured' :''">
<div class="col-md-4 interest">
</div>
</div>
Any help would be highly appreciated. Thanks
PS: HTML texts are removed for brevity
I think I understand the issue here. If you have a flat list and you want to display it in a Bootstrap grid, you'll have to create new rows for each n elements.
The solution to this problem isn't as clean as a normal th:each, but you'll have to use it twice and have proper th:if statements on when you want to display it.
For example, for the .row element, you want to only show it for elements with index 0, 3, 6, ... (if you want a 1/3th column grid). This means you should do:
<div th:each="interest,rowStatus : ${interests}" class="row interest-featured" th:if="${rowStatus.index % 3} == 0">
</div>
Now, for the children of the row you'll have to iterate again over your collection, but filter it so that for the first row you only show elements with index 0-2 for the second row the elements 3-5, ... .
To do that you use another th:if:
<div th:each="interest,rowStatus : ${interests}" class="row interest-featured" th:if="${rowStatus.index % 3} == 0">
<div th:each="interest,interestStatus : ${interests}" class="col-md-4 interest" th:text="${interest}"
th:if="${interestStatus.index lt rowStatus.index + 3 and interestStatus.index ge rowStatus.index}"></div>
</div>
If you don't want to use a cumbersome template like this, you can always just iterate over the column itself. If you're using Bootstrap, it will automatically create columns that do not fit within a row on a new line, for example:
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
<div class="col-md-4">Column 4</div><!-- This item will be on a new row because the grid does only allow 12 spaces -->
</div>
However, there are some differences between both approaches when the content of the column is variable in height.
NOTE: You're also using the interest variable twice. The collection is named ${interest}, but the result variable is also called interest. You probably have to rename one of those.
You use object.
html
<div class="source_list" th:each="history : ${historys}">
<label>date : <span th:text="${history.date}">2016.06.27</span></label>
<br />
<label>description : </label><span th:text="${history.description}">2016.06.27</span>
<br /> <br />
</div>
contorller
#RequestMapping(value = "/settings/history/{companyIdx}")
public ModelAndView showHistory(ModelAndView mav, #PathVariable int companyIdx, HttpServletRequest request) {
String language = CookieUtil.getCookieValue(request, "lang");
Company company = companyService.findCompanyByIdx(companyIdx);
List<CompanyHistory> historys = companyService.findHistoryByLanguage(company, language);
mav.addObject("company", company);
mav.addObject("historys", historys);
mav.setViewName("/company/company_settings_history");
return mav;
}
dto
#Entity(name = "company_history")
public class CompanyHistory {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private int idx;
#ManyToOne
#JoinColumn(name = "company_id")
private Company company;
private String date;
private String description;
...
}