Is there some easy way how put raw HTML tag to label? I have this:
{{ Form::label('firstName', 'First name <em>*</em>', array('class' => 'input_tag')) }}
and it produces:
<label class="input_tag" for="firstName">First Name <em>*</em></label>
BUT tag EM is not interpreted as it should be. What I want is:
<label class="input_tag" for="firstName">First Name <em>*</em></label>
use HTML::decode():
{!! HTML::decode(Form::label('firstName', 'First name <em>*</em>', array('class' => 'input_tag'))) !!}
Using sprintf in a macro is much faster than redecoding:
Form::macro('rawLabel', function($name, $value = null, $options = array())
{
$label = Form::label($name, '%s', $options);
return sprintf($label, $value);
});
You can create a helper function (macro) just like:
HTML::macro('raw', function($htmlbuilder) {
return htmlspecialchars_decode($htmlbuilder);
});
in your view:
{{ HTML::raw(Form::label('input_firstname', 'Prénom <sup>*</sup>')) }}
I often use raw html for form input and labels as I find it easier to read and use html5 attributes such as required and placeholder. This form is a good example of how to use raw html with Input::old which allows you to capture old input. https://github.com/Zizaco/confide/blob/master/src/views/login.blade.php
For required inputs, instead of trying to add HTML into the label, I add a class, 'required-input' (or something).
Then I have the following CSS rule
label.required-input:before {
content: ' * ';
color: #f00;
}
This would work unless you are needing to have the <em>*</em> for screen readers. But you can still add the required flag on the input.
Got it, it's using the e() helper function that uses htmlentities() to format your labels and this is converting your tag to <em>*</em>.
The quick and (very) dirty fix is to add this to your start.php or some other place before the first call to Helpers.php:
function e($value) { return $value; }
But this far from ideal.
I believe the Form::label($name, $value, $attributes, $escape_html) takes a fourth parameter which tells it whether to not to escape html. It defaults to true. So if your expected result is an italic *, pass false as the fourth parameter.
Related
Have been looking for this answer in SO, but perhaps I'm not frasing it correctly or there is actually no answer yet for this.
I am using an input component that uses a key to render it valid (green border) or invalid (red border) and I would like to add it dynamically:
<Input type="select" valid /> //This input has green border
<Input type="select" invalid /> //This input has red border
Since they key valid/invalid has no value like true or false, I'm not sure how to change it dynamically through a function since as far as I'm aware, I can change values dynamically with a JSX expression, but not add a key itself.
Can you please suggest a way to add 'valid' or 'invalid' tag dynamically without value?
"Without value" is actually not accurate. What you see there is syntactic sugar for valid={true} and invalid={true}.
So, the same can be accomplished by:
const valid = // whatever logic here to determine if it's valid.
<Input type="select" valid={valid} invalid={!valid} /> // Either return or assign to something.
Alternatively:
let inputProps = {type: 'select'};
if (/* whatever logic here to determine if it's valid*/) {
inputProps.valid = true;
}
else {
inputProps.invalid = true;
}
<Input {...inputProps} />; // Either return or assign to something.
But the latter is a lot more verbose.
Not sure if this will work but give it a try.
JSX reads properties without values/= as boolean/true.
Set null values:
<Input type="select" invalid={null} />
You can then conditionally show valid or invalid input elements
I try to dynamically change value of its variable. Once onclick (Change Ticket ID ) button then execute onClickSendEmail and variable value should be change of tickedId.
Its unable to update with newTickedId. I tried while create variable using #defining and individual calling by function also.
So, Basically I got stuck. how it will be solve.
#(sender: String)
<!--#{var tickedId = "tickedId"}-->
#defining(sender.contains("#")) {isEmail =>
#main((if(isEmail) "Email" else "Chat") + " Messages - " + sender) {
...
...
...
<div>
<a onclick="onClickSendEmail();return false;">
Change Ticket ID
</a>
</div>
#defining("getTicketId()") { tickedId =>
#views.html.common.form.panel("Reply",controllers.routes.ChatMessageController.sendEmail(tickedId,sender),"Send"){
<textarea id="emailArea" cols="100" rows="4" name="emailArea"></textarea>
}
<script type="text/javascript">
function onClickSendEmail() {
tickedId= "NewUpdatedTicketId";
}
function getTicketId() {
return "NewUpdatedTicketId";
}
</script>
}
}
}
You should not mix Twirl templating with Javascript. It's a bad approach.
The role for Twirl is to render HTML blocks. You can define conditions and variables here in order to dynamically change the HTML output. While with Javascript you can modify this rendered HTML output without reloading the page.
There are cases where you need to use a Twirl variable in Javascript, then you can do something like:
#(chartData: Html)
<script>
let jsData = #twirlData; // where twirlData is an existing variable
console.log(jsData)
</script>
Here's a link where you can read more.
Yii2 HTML::radio() helper generate html input tag with label tag around that input like this:
<label>
<input type="radio" name="abc" value="1"> Hello
</label>
But I need it like this:
<input type="radio" name="abc" value="1" id="radio1">
<label for "radio1">Hello</label>
Is it postible to custozime this inside radio helper ?
No, you can't. As you can see from yii\helper\BaseHtml class code, this nesting of tags comes from the source code of radio() method, without means of configuration by changing options.
What you need is override that method. It's really easy.
In the namespace app\helpers, create class Html. Put it into a new file named /Helpers/Html.php relative to your app root (if you've got Yii basic app), and put something like this inside:
namespace app\helpers;
use Yii;
use yii\helpers\BaseHtml;
class Html extends BaseHtml
{
public static function radio($name, $checked = false, $options = [])
{
$options['checked'] = (bool) $checked;
$value = array_key_exists('value', $options) ? $options['value'] : '1';
if (isset($options['uncheck'])) {
// add a hidden field so that if the radio button is not selected, it still submits a value
$hidden = static::hiddenInput($name, $options['uncheck']);
unset($options['uncheck']);
} else {
$hidden = '';
}
if (isset($options['label'])) {
$label = $options['label'];
$labelOptions = isset($options['labelOptions']) ? $options['labelOptions'] : [];
unset($options['label'], $options['labelOptions']);
$content = static::input('radio', $name, $value, $options);
$content .= static::label($label, null, $labelOptions);
return $hidden . $content;
} else {
return $hidden . static::input('radio', $name, $value, $options);
}
}
}
Explanation:
We've just copied the code of radio() method from yii\helpers\BaseHtml and changed the lines containing static::label() to separate output of static::input() from it;
Since both original and our custom classes extend yii\helpers\BaseHtml, and original yii\helpers\Html is not redefining none of BaseHtml methods, there will be no loss in logic for elements other than radio.
Namespace and class name shouldn't be exactly the same, but obviously they should just differ from yii\helpers\Html.
Just replace use yii\helpers\Html; with use app\helpers\Html; in your View code.
That's all!
My first time to use Twig template with CodeIgniter. I'm used to the default form functionality of the framework, but I was asked to try to render the form using Twig. I find the template engine to be nice and confusing at the same time. So that means, my controller would be very fat with code. But the main issue here is to render the form using twig.
Below is what I used to do when I want to render a form. View: TableSample.php
<?php
echo form_open("", array("name"=>"form_reg", "method"=>"post", "id"=>"form_reg"));
echo form_input("type"=>"text", "name"=>"fname", "value"=>set_value("fname"));
echo form_input("type"=>"text", "name"=>"lname", "value"=>set_value("lname"));
echo form_input("type"=>"text", "name"=>"emailaddress", "value"=>set_value("emailaddress"));
echo form_input("type"=>"submit", "name"=>"submit", "value"=>"Submit");
echo form_close();
?>
Controller: register.php
public function register (){
$this->load->view("TableSample");
if($this->input->post("submit")) {
/** retrieve input details, pass them as array to model, then redirect if registration is successful**/
}
}
But since I have to use Twig, things have been a little bit different.
public function register () {
$detail["form_open"] = form_open("", array("name"=>"form_reg", "method"=>"post", "id"=>"form_reg"));
$detail["form_input_name"] = form_input("type"=>"text", "name"=>"fname");
$detail["form_input_lname"] = form_input("type"=>"text", "name"=>"lname");
$detail["form_input_eadd"] = form_input("type"=>"text", "name"=>"email");
$detail["form_input_submit"] = form_input("type"=>"submit", "name"=>"submit", "value"=>"Submit");
$detail["form_close"] = form_close();
//codes for saving here
//call twig view
$this->twig->display("tableSample.html.twig", $detail);
}
tableSample.html.twig would be like this:
<html>
<head></head>
<body>
{{ form_open }} //will display form as a **String** and not THE **HTML** like this:
<form method="post" name="form_reg" id="form_reg"></form>
{{ form_close }}
</body>
</html>
I know I'm missing something, please point me to the right way of rendering this. Thank You!
ok, I think I got it. raw made it possible. Twig Raw Filter
I am searching for the same answer that was given here:
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
But I want to do this in MVC4.
I got the following view:
#using (Html.BeginForm("Kompetens", "KumaAdmin"))
{
<div class="three columns" style="margin-right: 627px;">
<h6>Kompetens</h6>
<div style="width:456px;"> #Html.ListBox("kompetensId", (SelectList)ViewBag.KomId)</div><br/>
<h6>Lägg till kompetens</h6>
<div class="focus">
#Html.EditorFor(mm => mm.KompetensTest)
</div>
<input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
</div>
}
Since this is my textbox:
#Html.EditorFor(mm => mm.KompetensTest)
I don't know how to apply the "onfocus" & onblur attributes on it like in the link above.
You need to create an Editor Template. Because the Html.EditorFor does not have the "object htmlattributes" parameter to do "new { onfocus = "js here" }".
Over the Views>Shared,
Create a folder called EditorTemplates
Then, you create a view using #model string/whathever this object is. Name the file as you want.
When you put the #model on a view you are specifying that it only accepts this type mas a model.
Inside this view, you create a Html.TextBox (not TextBoxFor) and voila.
On the Html.EditorFor method there is also a way to set which editor template you want to use. Choose the one you created by typing its name like this:
#Html.EditorFor(mm => mm.KompetensTest, "GreyedTemplate")
Code for the View I named as: GreyedTemplate.cshtml
#model string
#Html.TextBox("", Model, new { onfocus = "", onclick="" })
Note that the first parameter is empty. This was done on purpose, because when you use EditorFor(mm => mm.KompetensTest,"GreyedTemplate") it uses KompetensTest as the name of the field automatically.
You want to use the placeholder html attribute (http://www.w3schools.com/tags/att_input_placeholder.asp)
Something like #Html.EditorFor(mm => mm.KompetensTest, new { placeholder = "Text" })
#Gmoliv It worked finaly! I googeld arround and found that the "Editfor" does not have access to html attributes. Although I found "TextBoxFor" which has access to them, so the soloution is:
#Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })
#Pedro I really tried hard to make it work but the problem was that i could not get the value to be set so it was alwasy empty, i treid setting it in the view and in the templateView and it simply did not take. If you could i would appreciate a full code sample
Thanks alot!