Form twig customize style - symfony-forms

i have a problem with customization of my form's style..
I extend the form widget in this normal way:
{{ form_label(form.tipi) }}
{{ form_errors(form.tipi) }}
{{ form_widget(form.tipi) }}
But i receive this bad HTML:
<div id="requests_tipi" class="form-control scroll-select">
<input type="checkbox" id="requests_tipi_1" name="requests[tipi][]" value="1" checked="checked">
<label for="requests_tipi_1">Appartamento</label>
<input type="checkbox" id="requests_tipi_2" name="requests[tipi][]" value="2" checked="checked">
<label for="requests_tipi_2">Casa Colonica</label>
<input type="checkbox" id="requests_tipi_3" name="requests[tipi][]" value="3" checked="checked">
<label for="requests_tipi_3">Garage</label>
<input type="checkbox" id="requests_tipi_4" name="requests[tipi][]" value="4">
<label for="requests_tipi_4">Loft</label>
</div>
I would a list like this:
<ul>
<li><label for="requests_tipi_1">Appartamento</label><input type="checkbox" id="requests_tipi_1" name="requests[tipi][]" value="1" checked="checked"></li>
...
</ul>
How can i do for customize my Symfony Form???
Thanks

This is how you customize rendering for individual field (tipi in your case):
http://symfony.com/doc/current/cookbook/form/form_customization.html#how-to-customize-an-individual-field
and this is where original formatting is defined (and where you can take an "inspiration" :) :
https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig#L45
So, something like this could work (please note i have not tested, it might be needed to be adjusted), just put following code somewhere at the top of the template file:
{% form_theme form _self %}
{% block _requests_tipi_widget %}
<ul {{ block('widget_container_attributes') }}>
{% for child in form %}
<li>
{{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
{{ form_widget(child) }}
</li>
{% endfor %}
</ul>
{% endblock _requests_tipi_widget %}

Related

How to recive selected value from Spring to Thymeleaf

I send from Spring to Thymeleaf ArrayList, which consists from two BigDemical parameters. This for price filter and I want to do: from 0 to first element from ArrayList, from first element to second and more second
Spring:
modelAndView.addObject("price",filterPrice);
Html
<div th:each="filterPrice : ${price}">
<input class="priceSelected" type="checkbox" id="price01" value="1"/> 0 -
<span class="filterPriceFirst" th:text="${price[0]}"></span> <br/>
<input class="priceSelected" type="checkbox" id="price02" value="2"/>
<span class="filterPriceFirst" th:text="${price[0]}">
-<span class="filterPriceFirst" th:text="${price[1]}"></span> <br/>
<input class="priceSelected" type="checkbox" id="price02" value="3"/>
> <span class="filterPriceFirst" th:text="${price[1]}">
<br/>
</div>
Code working, but I recive all value twice. But I need to recive all value only one time. Where my misstake?
In HTML You are using th:each that loops through the array. Since your array has two elements it does it twice. Removing th:each will fix it. Also element ID should be unique so you should use price03 on the last input.
Your code should look something like this
<div>
<input class="priceSelected" type="checkbox" id="price01" value="1"/> 0 -
<span class="filterPriceFirst" th:text="${price[0]}"></span>
<br/>
<input class="priceSelected" type="checkbox" id="price02" value="2"/>
<span class="filterPriceFirst" th:text="${price[0]}">-
<span class="filterPriceFirst" th:text="${price[1]}"></span>
<br/>
<input class="priceSelected" type="checkbox" id="price03" value="3"/> >
<span class="filterPriceFirst" th:text="${price[1]}">
<br/>
</div>

Whether it is possible hide 'checkbox' with use th:unless?

I have a color filter, simillar to this:
<input type="checkbox" id="orange" class="orange" value="orange"/>orange
<br/>
<input type="checkbox" id="peach" value="peach"/>peach
<br/>
<input type="checkbox" id="terracotta" value="terracotta"/>terracotta
<br/>
<input type="checkbox" id="coffee" value="coffee"/>coffee
<br/>
<input type="checkbox" id="browne" value="browne"/>browne
<br/>
<input type="checkbox" id="rose" value="rose"/>rose
<br/>
<input type="checkbox" id="red" value="red"/>red
<br/>
I recive color from DB.
<div th:each="model : ${allColor}">
<span th:text="${model.color}"/>
Can I hide color, with use Thymeleaf, which is not in DB?
For example now I haven't Rose, Coffee and Peach colors, but maybe in future I will have this color. I want to do colors verification , if color is in DB, user can see on UI checkbox, else checkbox hide. I read about th:if and th:unless. Whether it is possible to make it with use Thymeleaf?
If I try to do:
<input type="checkbox" th:if="${model.color==coffee}"id="coffee" value="coffee"/>coffee
It's not working.
Instead of hiding colors, you should create the color checkboxes with a loop as well. Like this:
<th:block th:each="model : ${allColor}" th:with="color=${model.color}">
<input type="checkbox" th:id="${color}" th:class="${color}" th:value="${color}"/> <span th:text="${color}" />
<br />
</th:block>
As for why your original attempt didn't work, it's hard to tell without seeing more of the html. I'm guessing that ${model.color} was undefined, because you weren't in a loop? Also, you were missing quotes around 'coffee'. like this: `${model.color == 'coffee'
Something like this may work as well, but I would recommend the loop.
<input th:if="${allColor.contains('orange')}" type="checkbox" id="orange" class="orange" value="orange"/>orange<br/>
<input th:if="${allColor.contains('peach')}" type="checkbox" id="peach" value="peach"/>peach<br/>
<input th:if="${allColor.contains('terracotta')}" type="checkbox" id="terracotta" value="terracotta"/>terracotta<br/>
<input th:if="${allColor.contains('coffee')}" type="checkbox" id="coffee" value="coffee"/>coffee<br/>
<input th:if="${allColor.contains('browne')}" type="checkbox" id="browne" value="browne"/>browne<br/>
<input th:if="${allColor.contains('rose')}" type="checkbox" id="rose" value="rose"/>rose<br/>
<input th:if="${allColor.contains('red')}" type="checkbox" id="red" value="red"/>red<br/>}`.

Inheritance in Slim template language

With PHP using Twig I can do something like this:
layout.twig
<html>
<body>
{% block content %}{% endblock %}
</body>
</html>
form.twig
{% extends "layout.twig" %}
{% block content %}
<div class="form">{% block form %}{% endblock %}</div>
{% endblock %}
login.twig
{% extends form %}
{% block form %}
<form>
<input type="text" name="email" />
<input type="submit">
</form>
{% endblock %}
This way I have a layout for all pages, a layout for pages with forms and login page.
But with Slim I can specify only main layout that is parent for all templates:
layout.slim
html
body ==yield
and special layouts for every page on my site:
login.slim
div.form
form
input type="text" name="email"
input type="submit"
Is there a simple way to realize Twig-like inheritance with more than one level in Slim?
It looks that I found the solution for Slim with Sinatra:
layout.slim
html
body
== yield
form.slim
== slim :layout
div.form
== yield
login.slim
== slim :form
form
input type="text" name="email"
input type="submit"
I believe that in Rails it doesn't exist something like template inheritance, but I believe that it isn't necessary with yield and content_for methods.
For example, you can have a _form.html.slim layout:
.form
= yield
A _login.html.slim partial:
form
input type="text" name="email"
input type="submit"
And when you want to display a login with the form layout, you should do something like:
= render partial: "login", layout: "form"
login.html.slim
= render layout: 'form' do
form
input type="text" name="email"
input type="submit"

How to fix conflict with jQuery UI and jQuery? Datepicker giving error

I am trying to use the jQuery datepicker for a form on a site that uses jQuery 1.3.2 but it's not working. I have to reference a newer jQuery library for some of my form functionality, and also the jQuery ui for datepicker to work. I have used noConflict for the newer jquery library but it's still not working. I get Uncaught TypeError: Cannot read property 'document' of null in the console. Updating/removing the 1.3.2 reference is not an option.
Here is my fiddle, which works. but i get the error above in Chrome (not FF) and the datepicker will not work on my site. http://jsfiddle.net/pnA33/
Can anyone help? It works locally but not on the server (which is a dev enviornment so I can't share a link). I found this but as I am relatively new to jQuery it is over my head.
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = jQuery.noConflict(true);
jQuery_1_9_1(document).ready(function() {
jQuery_1_9_1( "#datepicker" ).datepicker({ minDate: -1, maxDate: "+24D" });
jQuery_1_9_1('#pancettaForm').change(function () {
jQuery_1_9_1('.address,#new-ship-date').hide();
if (jQuery_1_9_1('#ship-address').prop('checked')) {
jQuery_1_9_1('.address').show();
}
else if (jQuery_1_9_1('#ship-date').prop('checked')) {
jQuery_1_9_1('#new-ship-date').show();
}
else if (jQuery_1_9_1('#ship-both').prop('checked')) {
jQuery_1_9_1('.address, #new-ship-date').show();
}
});
});
function validateForm()
{
var x=document.forms["pancettaForm"]["order-number"].value;
if (x==null || x=="")
{
alert("Please provide your order number from the confirmation email sent immediately after placing your order.");
return false;
}
}
</script>
HTML:
<form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm" onsubmit="return validateForm()">
<input type="hidden" value="Pancetta Order Update" name="subject">
<input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
<ol>
<li>
<label for="update-ship">I'd like to:</label>
<input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> Have pancetta shipped to a different address than my skillet<br />
<input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> Have pancetta shipped sooner than June 14, 2013 <br />
<input id="ship-both" name="update-ship" type="radio" value="update-both" /> Make changes to both the shipping address and shipping date
</li>
<li>
<label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label>
<input type="text" name="order-number">
</li>
<li>
<label for="full-name"><em>*</em>Recipient Full Name:</label>
<input type="text" name="full-name">
</li>
<li class="address" style="display: none;">
<label for="address">
<em>*</em>Address
</label>
<input type="text" name="address">
<label for="address2">
Address Line 2
</label>
<input type="text" name="address2">
</li>
<li class="address" style="display: none;">
<label for="city">
<em>*</em>City
</label>
<input type="text" name="city">
<label for="state">
<em>*</em>State
</label>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<label for="zip">
<em>*</em>Zip Code
</label>
<input type="text" name="zip">
</li>
<li id="new-ship-date" style="display: none;">
<em>*</em><label for="updated-ship-date">New Ship Date:</label>
<input type="text" id="datepicker" name="updated-ship-date" value="Update Your Ship Date" />
</li>
<li>
<label for="phone">
<em>*</em>Phone (for delivery questions)
</label>
<input type="text" name="phone">
</li>
</ol>
<input type="submit" id="button" name="submit" value="Update Pancetta">
</form>
Ah ha! You actually cannot run two versions of jQuery on the same document instance at one time...hence the issue here. This solution comes directly from Splendìd Angst's answer in this thread Can I use multiple versions of jQuery on the same page?
Basically you must declare your noConflict version prior to entering the document "main loop" I suppose you can call it.
Declare your noConflict variable outside the document.ready call...use the standard $(document).ready() syntax, then use (and ONLY use) your noconflict variable within the ready closure. That should do it.
I haven't tested this mind you but it makes sense and it won't take you much tweaking of your code to try it out.
TIL something new about jQuery :)

Buttonset does not work anymore after adding div's

With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>

Resources