I can't find a solution for a problem I have with a TYPO3 Fluid template.
In the navigation header template I have a search form and a logout link.
<div class="suche">
<f:form action="search" method="post" controller="Search" extensionName="indexedsearch" pageUid="61" pluginName="Pi2">
<f:form.textfield name="search[sword]" value="{sword}" class="quicksearch-sword" placeholder="search" />
<button type="submit" name="search[submitButton]" class="btn">
<i class="glyphicon glyphicon-search"></i>
</button>
</f:form>
<p>
<div class="logout">
<f:link.page pageUid="1" additionalParams="{logintype:'logout'}">Logout</f:link.page>
</div>
</p>
</div>
How can I tell the page, that these two elements should also hide till the user is logged in with EXT:felogin?
The template is included into the default page template in this way:
<f:render partial="Navigation/Main" arguments="{_all}" />
I guess a simple display:none/show from the two divs would be enough, but I have no idea how to do this. (I must admit I'm not the biggest expert in TypoScript).
Any advice would be really helpful and appreciated.
You can use the <f:security.ifAuthenticated> view helper.
More you can see here:
https://docs.typo3.org/other/typo3/view-helper-reference/8.7/en-us/typo3/fluid/TYPO3_8-7/Security/IfAuthenticated.html
Example:
<f:security.ifAuthenticated>
<f:then>
shown when a user logged in
</f:then>
<f:else>
shown when a user is not logged in
</f:else>
</f:security.ifAuthenticated>
Related
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
I got 'invalid location of tag (a)' message, when I am working on my JSP page.
<a href="abc.html">abc</abc> this tag is not working properly.
<form class="form-inline my-2 my-lg-0">
<c:choose>
<c:when test="${sessionScope.SIGNIN_ID == null}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
signin
</button>
</c:when>
...(I erased unnecessary part)
</form>
</nav>
</header>
a tag is located under body > header> nav > form > button > a.
I tried to add <div> after <form> and add <tr>``<td> before <form> but it still doesn't work.
I also have jstl file in my \lib. Is there anyone who can help?
You can't have an a tag inside a button tag, in HTML. What are you trying to achieve, with the href (signinForm.html) inside the button?
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
I'm faced with a simple problem but just don't know how to solve it. I'm using twitter bootstrap's tabs. The tabs work but the forms within each tab don't submit. The forms submit when used without the tabs.
Below is the links I've used for the tabs
<ul class="nav nav-list affix tabs" data-tabs="tabs">
<li>
Overview
</li>
<li>
Profile
</li>
</ul>
And what follows are the tabs
<div class="tab-content span9">
<div id="overview" class="tab-pane" data-toggle="tab">
<!-- Overview Forms go here -->
</div>
</div>
<div class="tab-content span9">
<div id="profile" class="tab-pane" data-toggle="tab">
<!-- Profile Form go here -->
</div>
</div>
Finally I've added the following jquery
$('.tabs').tab();
$('.tabs a[href="#profile"]').tab('show');
Same goes for bootstrap panels, when you have a form inside panel-body and try to submit the form nothing happens. You have to remove the "panel-collapse" class from the body :)
I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.