I used zf2 to design a website.
And the form is something like this:
$this->add(array
'options'=>array(
'label'=> 'title1'))
And finally it shows like this:
<form>
<fieldset>
<legend>title1</legend>
<label>****</label>
</fielset>
</form>
Now, I wanna add a link or an image after the title1, for example:
<form>
<fieldset>
<legend>title1<a href=''>link</a></legend>
<label>****</label>
</fielset>
</form>
How can I do this?
You can't. Well, at least not without overwriting the specific ViewHelper (probably formCollection()). In ZF2 all Labels are run through the Zend\View\Helper\EscapeHtml ViewHelper. Therefore using any sort of HTML inside Labels is not supported in any way.
While going by specification it may be allowed to use inline-elements inside the <legend> Element, semantically it looks a little different. The <legend> shall do nothing but to describe the contents of the <fieldset>.
Anyways, opinions aside, as i've mentioned, you'll have to overwrite the ViewHelper and then skip the use of the EscapeHtml ViewHelper, as it's done in this line of the formCollection() Code
Related
The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.
Suppose I want to replace glyphicon with font awesome.
The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.
Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:
feedback: {
success: 'fa-check',
error: 'fa-times'
}
as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.
After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):
<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>
Note the quotes syntax.
Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
with:
<span class="fa form-control-feedback" aria-hidden="true"></span>
This is not very well documented, and I could not make it work. I ended up using a different form validator which accomplish the same functionality and it's easier to configure success/error formats using bootstrap classes:
var validator = $('#submitForm').validate({
validClass: "is-valid",
errorClass: "is-invalid",
jQuery Validator
I would like to add the target attribute to a FLUID form, so that after submitting the form, a new window is created.
This does not work, and produces an error:
<f:form target="_blank" action="..." name="..." id="..." pageUid="..." controller="..."></f:form>
Any ideas on how to make the to open in a new window?
I use TYPO3 6.2beta5
As the f:form ViewHelper inherits from the AbstractTagBasedViewHelper, it shares the same allowed attributes.
The fluid documentation inside the TYPO3 Flow documentation shows you all allowed attributes.
To answer your question, the correct way to use it would be:
<f:form additionalAttributes="{target:'_blank'}">FORMCONTENT</f:form>
Note that the additionalAttributes argument is an array. If you were to add more than 1 custom attribute, you would do it like that:
<f:form additionalAttributes="{target:'_blank', data-validate: 'foo'}">FORMCONTENT</f:form>
EDIT
The AbstractTagBasedViewHelper changed, so the answer as of today for TYPO3 CMS v7 would be: There's an attribute data for that which takes an array of keys and values.
<f:form data="{foo: 'bar', validate: 'baz'}" ....>
FORMCONTENT
</f:form>
I am trying to add an htmlview (which is using declarative support according to SAP's docs) to an index page that is also using declarative support. Using data-sap-ui-type="ui.MyView" makes me to ask two questions:
Is there any equivalent to sap.ui.localResources in declarative support?
data-ui-type is not adding the view.html suffix to the view that should be laoded. Is there a special pattern for MVC in declarative support or is there currently no way to implement it?
Kind regards,
Nico
find some basic samples here:
https://openui5.hana.ondemand.com/#docs/guide/MVC.html
First of all I believe that you always have to set sap.ui.localResources in code.
As you can see instanciating a HTMLView from an HTMLView goes like this:
<div data-sap-ui-type="sap.ui.core.mvc.HTMLView" id="MyHTMLView" data-view-name="example.mvc.test2"></div>
This will load example.mvc.test2.view.html and place it into your parent view.
Generally speaking the JS API translates into HTMLViews like this:
new sap.ui.AnyControl("myId", {
aLittleProperty: "10",
property: false,
press: functionInMyController,
morePress: a.static.myFunction,
defaultAggregation: [
new sap.ui.OtherControl("otherId1"),
new sap.ui.OtherControl("otherId2")
],
anotherAggregation: new sap.ui.OtherControl("otherId3")
}).addStyleClass("myClass");
<div data-sap-ui-type="sap.ui.AnyControl"
id="myId"
class="myClass"
data-a-little-property="10",
data-property="false"
data-press="functionInMyController"
data-more-press="a.static.myFunction">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId1"></div>
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId2"></div>
<div data-sap-ui-aggregation="anotherAggregation">
<div data-sap-ui-type="sap.ui.OtherControl" id="otherId3"></div>
</div>
</div>
Note that:
The id and CSS classes are set with the regular HTML attributes
Property names translate from camelCase to lower-case separated with "-" (due to the fact that HTML is not case-sensitive)
No matter what type the property is you of course have to put it in quotes in HTML
Whatever you put directly inside a HTML-defined control is considered to belong into it's default aggregation
BR
Chris
I’m working in the Moovweb SDK and am optimizing my personal desktop site for mobile.
How do I transform all my <p> tags to <div> tags? I really don't want to do it manually! Search and replace?? haha
You can use the name() function to change the name of an element. For example:
$("//p") {
name("div")
}
See it in action here: http://tester.tritium.io/bd1be4f2c187aed317351688e23f01127d26343a
Cheap way: Add p{margin:0} to your CSS, this will remove the only special styling of <p> tags making them look like <div>s.
This is only a visual effect, though. For instance, you're still not allowed to put a <form> inside a <p>, even with the above CSS. If that's what you're after, a simple search and replace will do:
Replace <p> with <div>
Replace <p␣ (left angle, p, space) with <div␣ (there's a space at the end of that one too)
Replace </p> with </div>
That should do it!
n00b here. I'm trying to "inject" an arbitrary template into another. But it seems like I'm doing it wrong :)
whatever.html:
<template name="parent">
{{child}}
</template>
<template name="child1">
I'm child 1
</template>
<template name="child2">
I'm child 2
</template>
whatever.coffee
x = "child1"
Template.parent.child = -> Template[x](#)
This will create "annotated HTML" (http://docs.meteor.com/#template_call) as the result, but the output of the {{child}} helper is html-encoded and thus is not interpreted.
I'm aware that I could use the Template.myTemplate.rendered event to add the template directly to the DOM using jQuery. But that seems like quite a hack imho. I'd rather have a helper generate that if possible.
What is the "right" way to do this? Is it possible to unescape the result in the template? Will reactivity work?
Thanks in advance!!1
Regards
A {{doubleBrace}} escapes HTML while a {{{tripleBrace}}} does not escape HTML and renders it as is.
EDIT: I mentioned it other way around.
From Handlebars docs - "Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the 'triple-stash'."