twig - Customise symfony2 embeded form template -
i using symfony2 version 2.3. created 2 entites outlet , voucher. voucher entity represent ebmded form. embeded voucher outlet form , works fine. now, trying customise voucher embeded form template. want apply same style outlet fields. how can that? formtype:
public function buildform(formbuilderinterface $builder, array $options) { $builder ->add('name') ->add('category') ->add('description') ->add('file') ->add('alt') ->add('area') ->add('location') ->add('phone') ->add('latitude') ->add('longitude') ->add('vouchers', 'collection', array( 'type' => new vouchertype(), 'allow_add' => true, 'allow_delete' => true, 'by_reference' => false, 'prototype' => true, )) ->add('enabled') ; }
twig file:
{{ form_start(form, {'attr': {'novalidate': 'novalidate', 'class': 'form-horizontal', 'id': 'frm-create'} }) }} <div class="form-group"> {{ form_label(form.name, 'outlet name', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.name) }} <div class="col-lg-10"> {{ form_widget(form.name, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter outlet name.</p> </div> </div> <div class="form-group"> {{ form_label(form.category, 'outlet category', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.category) }} <div class="col-lg-10"> {{ form_widget(form.category, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">choose outlet category.</p> </div> </div> <div class="form-group"> {{ form_label(form.description, 'outlet description', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.description) }} <div class="col-lg-10"> {{ form_widget(form.description, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter outlet description.</p> </div> </div> <div class="form-group"> {{ form_label(form.file, 'image', { 'label_attr': {'class': 'control-label col-lg-2 col-sm-2'} }) }} {{ form_errors(form.file) }} <div class="col-md-4"> {{ form_widget(form.file, {'attr': {'class' : 'default'} }) }} <p class="help-block">upload outlet image.</p> </div> </div> <div class="form-group"> {{ form_label(form.alt, 'image description', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.alt) }} <div class="col-lg-10"> {{ form_widget(form.alt, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter image description.</p> </div> </div> <div class="form-group"> {{ form_label(form.area, 'outlet area', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.area) }} <div class="col-lg-10"> {{ form_widget(form.area, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">choose outlet area.</p> </div> </div> <div class="form-group"> {{ form_label(form.location, 'outlet location', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.location) }} <div class="col-lg-10"> {{ form_widget(form.location, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter outlet location.</p> </div> </div> <div class="form-group"> {{ form_label(form.phone, 'outlet phone', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.phone) }} <div class="col-lg-10"> {{ form_widget(form.phone, {'attr': {'class' : 'form-control', 'data-mask':'(999) 999-9999'} }) }} <p class="help-block">enter outlet phone.</p> </div> </div> <div class="form-group"> {{ form_label(form.latitude, 'latitude', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.latitude) }} <div class="col-lg-10"> {{ form_widget(form.latitude, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter outlet latitude.</p> </div> </div> <div class="form-group"> {{ form_label(form.longitude, 'outlet longitude', { 'label_attr': {'class': 'col-lg-2 col-sm-2 control-label'} }) }} {{ form_errors(form.longitude) }} <div class="col-lg-10"> {{ form_widget(form.longitude, {'attr': {'class' : 'form-control'} }) }} <p class="help-block">enter outlet longitude.</p> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <div class="checkbox"> {{ form_errors(form.enabled) }} <label> {{ form_widget(form.enabled) }} {{ form_label(form.enabled, 'status') }} </label> </div> </div> </div> {{ form_rest(form) }} {{ form_end(form) }}
javascript code:
<script type="text/javascript"> $(document).ready(function () { // on récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse. var $container = $('div#mybook_adminbundle_outlet_vouchers'); // add together link in order add together new voucher var $lienajout = $('<a href="#" id="add_voucher" class="btn">add new voucher</a>'); $container.append($lienajout); // on ajoute united nations nouveau champ à chaque clic sur le lien d'ajout. $lienajout.click(function (e) { ajoutercategorie($container); e.preventdefault(); // évite qu'un # apparaisse dans l'url homecoming false; }); // on définit united nations compteur unique pour nommer les champs qu'on va ajouter dynamiquement var index = $container.find(':input').length; // on ajoute united nations premier champ directement s'il n'en existe pas déjà united nations (cas d'un nouvel article par exemple). if (index == 0) { ajoutercategorie($container); } else { // pour chaque catégorie déjà existante, on ajoute united nations lien de suppression $container.children('div').each(function () { ajouterliensuppression($(this)); }); } // la fonction qui ajoute united nations formulaire categorie function ajoutercategorie($container) { // dans le contenu de l'attribut « data-prototype », on remplace : // - le texte "__name__label__" qu'il contient par le label du champ // - le texte "__name__" qu'il contient par le numéro du champ var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'voucher n°' + (index + 1)) .replace(/__name__/g, index)); // on ajoute au prototype united nations lien pour pouvoir supprimer la catégorie ajouterliensuppression($prototype); // on ajoute le prototype modifié à la fin de la balise <div> $container.append($prototype); // enfin, on incrémente le compteur pour que le prochain ajout se fasse avec united nations autre numéro index++; } // function add together delete voucher link function ajouterliensuppression($prototype) { // création du lien $liensuppression = $('<a href="#" class="btn btn-danger">delete</a>'); // add together link $prototype.append($liensuppression); // ajout du listener sur le clic du lien $liensuppression.click(function (e) { $prototype.remove(); e.preventdefault(); // évite qu'un # apparaisse dans l'url homecoming false; }); } }); </script>
you need create vouchertype class , add together modify fields in there. in case garantiatype vouchertype class.
<?php namespace daci\contratosbundle\form\type; utilize symfony\component\form\abstracttype; utilize symfony\component\form\formbuilderinterface; utilize symfony\component\optionsresolver\optionsresolverinterface; class garantiatype extends abstracttype { public function buildform(formbuilderinterface $builder, array $options) { $builder->add('fecha_emision','date', array( 'required' => true, 'widget' => 'single_text', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('fecha_vencimiento','date', array( 'required' => true, 'widget' => 'single_text', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('fecha_entrega_estimada','date', array( 'required' => true, 'widget' => 'single_text', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('fecha_recibido_daci','date', array( 'label' => 'fecha de recibido daci', 'required' => true, 'widget' => 'single_text', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('fecha_entrega','date', array( 'label' => 'fecha de devolución al proveedor', 'required' => true, 'widget' => 'single_text', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('empresa_emite_garantia', 'text', array( 'required' => false, 'label' => 'empresa que emite la garantía', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('tiempo_de_garantia', 'text', array( 'label' => 'plazo de vigencia', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), ) ) ->add('estado', 'choice', array( 'empty_value' => 'elija una opción... ', 'choices' => array('0' => 'no vigente', '1' => 'vigente'), 'required' => true, 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), )) ->add('isrecibido', 'checkbox', array( 'required' => false, 'label' => 'recibido', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 25px;', ), ) ) ->add('porcentaje','integer', array( 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), 'attr' => array('help'=>'text help'), )) ->add('monto','integer', array( 'label' => 'monto de la garantía', 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 35px;', ), )) ->add('comentarios', 'textarea', array( 'required' => false, 'label_attr' => array( 'style' => 'vertical-align: top; padding-bottom: 0px;', ), 'attr' => array( 'style' => 'width: 485px;', ) ) ) ->add('archivo', new documenttype(), array( 'required' => false, 'label' => ' ', ) ); } public function setdefaultoptions(optionsresolverinterface $resolver) { $resolver->setdefaults(array( 'data_class' => 'daci\contratosbundle\entity\garantia', )); } public function getname() { homecoming 'garantia'; } }
hope helps!!
this javascript code. in case, have 3 embebed classes (like vouchertype 3 of them) had modify each 1 of them. here code , there suggested utilize code sorrounding divs , stuff need. in case utilize < h r > tag separete them.
javascript code:
// ul holds collection of tags var collectionholdergar = $('ul.garantias'); var collectionholderseg = $('ul.seguimientos'); var collectionholdervis = $('ul.visitas'); // setup "add tag" link var $addgarantialink = $('<a href="#" class="add_garantia_link">agregar garantia</a>'); var $addseguimientolink = $('<a href="#" class="add_seguimiento_link">agregar seguimiento</a>'); var $addvisitalink = $('<a href="#" class="add_visita_link">agregar visita</a>'); var $newlinkligar = $('<li></li>').append($addgarantialink); var $newlinkliseg = $('<li></li>').append($addseguimientolink); var $newlinklivis = $('<li></li>').append($addvisitalink); $(document).ready(function(){ // add together delete link of existing tag form li elements collectionholdergar.find('li').each(function() { addgarantiaformdeletelink($(this)); }); collectionholderseg.find('li').each(function() { addseguimientoformdeletelink($(this)); }); collectionholdervis.find('li').each(function() { addvisitaformdeletelink($(this)); }); // add together "add tag" anchor , li tags ul collectionholdergar.append($newlinkligar); collectionholderseg.append($newlinkliseg); collectionholdervis.append($newlinklivis); // count current form inputs have (e.g. 2), utilize new // index when inserting new item (e.g. 2) collectionholdergar.data('index', collectionholdergar.find(':input').length); collectionholderseg.data('index', collectionholderseg.find(':input').length); collectionholdervis.data('index', collectionholdervis.find(':input').length); $addgarantialink.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // add together new tag form (see next code block) addgarantiaform(collectionholdergar, $newlinkligar); }); $addseguimientolink.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // add together new tag form (see next code block) addseguimientoform(collectionholderseg, $newlinkliseg); }); $addvisitalink.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // add together new tag form (see next code block) addvisitaform(collectionholdervis, $newlinklivis); }); }); function addgarantiaform(collectionholdergar, $newlinkligar) { // data-prototype explained before var prototype = collectionholdergar.data('prototype'); // new index var index = collectionholdergar.data('index'); // replace '__name__' in prototype's html // instead number based on how many items have var newform = prototype.replace(/__name__/g, index); // increment index 1 next item collectionholdergar.data('index', index + 1); // display form in page in li, before "add tag" link li var $newformli = $('<li></li>').append(newform); $newlinkligar.before($newformli); // add together delete link new form addgarantiaformdeletelink($newformli); } function addseguimientoform(collectionholderseg, $newlinkliseg) { // data-prototype explained before var prototype = collectionholderseg.data('prototype'); // new index var index = collectionholderseg.data('index'); // replace '__name__' in prototype's html // instead number based on how many items have var newform = prototype.replace(/__name__/g, index); // increment index 1 next item collectionholderseg.data('index', index + 1); // display form in page in li, before "add tag" link li var $newformli = $('<li></li>').append(newform); $newlinkliseg.before($newformli); // add together delete link new form addseguimientoformdeletelink($newformli); } function addvisitaform(collectionholdervis, $newlinklivis) { // data-prototype explained before var prototype = collectionholdervis.data('prototype'); // new index var index = collectionholdervis.data('index'); // replace '__name__' in prototype's html // instead number based on how many items have var newform = prototype.replace(/__name__/g, index); // increment index 1 next item collectionholdervis.data('index', index + 1); // display form in page in li, before "add tag" link li var $newformli = $('<li></li>').append(newform); $newlinklivis.before($newformli); // add together delete link new form addvisitaformdeletelink($newformli); } function addgarantiaformdeletelink($tagformli) { var $removeforma = $('<br/><a href="#">borrar</a><hr/>'); $tagformli.append($removeforma); $removeforma.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // remove li tag form $tagformli.remove(); }); } function addseguimientoformdeletelink($tagformli) { var $removeforma = $('<br/><a href="#">borrar</a><hr/>'); $tagformli.append($removeforma); $removeforma.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // remove li tag form $tagformli.remove(); }); } function addvisitaformdeletelink($tagformli) { var $removeforma = $('<br/><a href="#">borrar</a><hr/>'); $tagformli.append($removeforma); $removeforma.on('click', function(e) { // prevent link creating "#" on url e.preventdefault(); // remove li tag form $tagformli.remove(); }); }
symfony2 twig
No comments:
Post a Comment