Symfony 2.8 affichage du formulaire

Version imprimable

Bonjour à tous !

Voilà quelque jours que je m’attelle à créer un site en Symfony 2.8 et je rencontre un problème d'affichage de formulaire (je sais, je me répète :p). J'ai déjà cherché dans la doc afin de créer un formulaire adapté à mon besoin mais quelque chose cloche et je n'arrive pas à mettre le doigt dessus.

Voici mon code pour le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<form id="form_ouvrage" action="" method="post" {{ form_enctype(form) }}>
{{ form_widget(form._token) }}
    <div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.titreOuvrage)}}</span>
{{ form_errors(form.titreOuvrage) }}
            {{ form_widget(form.titreOuvrage) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.resumeOuvrage)}}</span>
{{ form_errors(form.resumeOuvrage) }}
            {{ form_widget(form.resumeOuvrage) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.auteur) }}</span>
{{ form_errors(form.auteur) }}
            {{ form_widget(form.auteur) }}
            <ul id="auteurs_list" data-prototype="{{ form_widget(form.auteur.vars.prototype)|e }}">
{% for auteur in form.auteur %}
                    <li>
{{ form_errors(auteur) }}
                        {{ form_widget(auteur) }}
                    </li>
{% endfor %}
            </ul>
 <a id="add_new_auteur" class="btn" href="#">Ajouter un auteur</a>
 </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.editeur)}}</span>
{{ form_errors(form.editeur) }}
            {{ form_widget(form.editeur) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.etat)}}</span>
{{ form_errors(form.etat) }}
            {{ form_widget(form.etat) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.categorie)}}</span>
{{ form_errors(form.categorie) }}
            {{ form_widget(form.categorie) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.genre)}}</span>
{{ form_errors(form.genre) }}
            {{ form_widget(form.genre) }}
        </div>
 <div class="form-group">
 <span class="label-lg">{{ form_label(form.photosOuvrageFile)}}</span>
{{ form_errors(form.photosOuvrageFile) }}
            {{ form_widget(form.photosOuvrageFile) }}
        </div>
 </div>
 <input class="btn btn_valide_ajout_ouvrage pull-right" type="submit" value="Valider">
</form>
 
<script>
var auteurCount = {{ form.auteur | length }}
 
    $(function(){
        $('#auteurs_list').find('li').each(function() {
            addAuteurFormDeleteLink($(this));
});
 
$("#add_new_auteur").click(function(e){
            e.preventDefault();
var AuteurList = $('#auteurs_list');
 
// Parcourt le template prototype
var newWidget = AuteurList.attr('data-prototype');
newWidget = newWidget.replace(/__name__/g,tagCount);
auteurCount++;
var newLi = $('<li></li>').html(newWidget);
newLi.appendTo($('#auteurs_list'));
return false;
})
 
    });
 
function addAuteurFormDeleteLink($auteurFormLi) {
        var $removeFormA = $('<a class="btn" href=#">Supprimer cet auteur</a>');
$auteurFormLi.append($removeFormA);
$removeFormA.on('click',function (e) {
            e.preventDefault();
$auteurFormLi.remove();
})
    }
</script>

Voici mon code pour le formulaire ouvrageEchange :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
class OuvragesEchangesType extends AbstractType
{
/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
 {
$builder->add('titreOuvrage',TextType::class,array('label'=>'Nom de l\'ouvrage','attr'=>array('class'=>'form-control')))
 ->add('resumeOuvrage',TextareaType::class,array('label'=>'Résumé de l\'ouvrage','attr'=>array('class'=>'form-control')))
 ->add('auteur',CollectionType::class,array('entry_type'=>AuteursType::class,'allow_add'=>true,'allow_delete'=>true))
 ->add('editeur',EntityType::class,array('label'=>'Sélectionnez l\'éditeur','attr'=>array('class'=>'form-control'),'class'=>'SB\MainBundle\Entity\Editeurs','choice_label'=>'libelle_editeur'))
 ->add('etat',EntityType::class,array('label'=>'Cochez l\'état dans lequel se trouve votre ouvrage','class'=>'SB\MainBundle\Entity\EtatsOuvrages','choice_label'=>'libelle_etat','expanded'=>true))
 ->add('categorie',EntityType::class,array('label'=>'Selectionnez une catégorie','attr'=>array('class'=>'form-control'),'class'=>'SB\MainBundle\Entity\Categories','choice_label'=>'libelle_categorie'))
 ->add('genre',EntityType::class,array('label'=>'Cochez un ou plusieurs genre','class'=>'SB\MainBundle\Entity\Genres','choice_label'=>'libelle_genre','multiple'=>true,'expanded'=>true))
//->add('photosOuvragePath')
->add('photosOuvrageFile',FileType::class,array('label'=>'Ajouter des photos'))
;
}

Le code pour le formulaire Auteurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
class AuteursType extends AbstractType
{
/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
 {
$builder
->add('nomAuteur',TextType::class,array('label'=>'Entrez le nom du ou des auteurs','attr'=>array('class'=>'form-control')));
}

Et le code du contrôleur pour l'affichage du formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
public function createNewOuvrageEchangeAction(Request $request){
$user = $this->get('security.token_storage')->getToken()->getUser();
$ouvrage = new OuvragesEchanges($user);
 
$em = $this->getDoctrine()->getManager();
$form = $this->createForm(OuvragesEchangesType::class,$ouvrage);
$formHandler = new FormHandler($request,$em,$form);
//si validation du formulaire et données >> ok !
if ($formHandler->process()){
return $this->redirect($this->generateUrl('sb_main_ouvrage_echange_show',['id'=>$ouvrage->getId()]));
}
 
$datas = array('form'=>$form->createView());
return $this->render('SBMainBundle:Main:createEchange.html.twig',$datas);
}

Merci de votre aide :) !!!

08/01/2017, 13h42
dukoid

houlalalala ça fait mal à la tête ! :weird::weird::weird::weird:

utilise les balises CODE STP
09/01/2017, 08h48
MehrezLabidi

Bonjour,
le problème n'est pas clair , le code non plus
09/01/2017, 13h59
Tirkal

1 pièce(s) jointe(s)

Balises utilisées !

Pour ce qui est du code, je rencontre le problème suivant :

Je devrais avoir un champ input avant le bouton d'ajout d'auteur. Et malheureusement là je ne l'ai pas :(.

Pièce jointe 233083

(J'ai mis une image de mon problème mais elle n'apparaît pas...)
09/01/2017, 14h29
dukoid
je crois qu'il faut ajouter :
Code:

1 2 'prototype' => true,
ensuite qu'est ce que ça donne si tu fais ?
Code:

1 2 {{ form_row(form.auteur.vars.prototype) }}

J'ai bien le champ input qui s'affiche, mais je n'ai pas le label et je n'arrive pas à ajouter un auteur par la suite.

Edit :

J'ai fait ça en suivant ton conseil et en regardant dans la doc.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
        <div class="form-group">
            {% set auteurs = form.auteur.vars.prototype %}
            {#{{ form_row(form.auteur.vars.prototype) }}#}
            {#<span class="label-lg">{{ form_label(auteur) }}</span>#}
            {{ form_errors(auteurs) }}
            {{ form_widget(auteurs) }}
            <ul id="auteurs_list" data-prototype="{{ form_widget(auteurs)|e }}">
                {% for auteur in form.auteur %}
                    <li>
                        {{ form_errors(auteur) }}
                        {{ form_widget(auteur) }}
                    </li>
                {% endfor %}
            </ul>
            <a id="add_new_auteur" class="btn" href="#">Ajouter un auteur</a>
        </div>

Cependant je n'arrive toujours pas à ajouter un auteur à ma liste. Une idée ?

09/01/2017, 16h44
dukoid

quand tu dis que tu n'arrives pas à ajouter ? pourquoi tu n'y arrives pas ? c'est quoi qui coince ?
est ce que vous pouvez etre plus précis histoire qu'on a pas a deviné à chaque fois vos problèmes ?

il y a la vue et le controller, c'est la vue qui bloque(si oui , quoi exactement) ou c'est au niveau du controller ?

Désolé, il m'arrive d'avoir du mal à m'expliquer :(.

Je n'arrive pas à ajouter un auteur dans une liste qui est censé apparaître après le bouton "ajouter un auteur". Je pense qu'il manque quelque chose à mon script, mais je n'arrive pas à savoir quoi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
    var auteurCount = {{ form.auteur | length }}
 
    $(function(){
        $('#auteurs_list').find('li').each(function() {
            addAuteurFormDeleteLink($(this));
        });
 
        $("#add_new_auteur").click(function(e){
            e.preventDefault();
            var AuteurList = $('#auteurs_list');
 
            // Parcourt le template prototype
            var newWidget = AuteurList.attr('data-prototype');
            newWidget = newWidget.replace(/__name__/g,tagCount);
            auteurCount++;
            var newLi = $('<li></li>').html(newWidget);
            newLi.appendTo($('#auteurs_list'));
            return false;
        })
 
    });
 
    function addAuteurFormDeleteLink($auteurFormLi) {
        var $removeFormA = $('<a class="btn" href=#">Supprimer cet auteur</a>');
        $auteurFormLi.append($removeFormA);
        $removeFormA.on('click',function (e) {
            e.preventDefault();
            $auteurFormLi.remove();
        })
    }

J'ai résolu mon problème.

Voici ce que j'ai mis dans mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<div class="form-group">
            <ul class="auteurs" data-prototype="{{ form_widget(form.auteur.vars.prototype) |e }}">
                {% for a in form.auteur %}
                    <li>
                        {{ form_errors(a) }}
                        {{ form_widget(a) }}
                    </li>
                {% endfor %}
            </ul>
        </div>

Et dans mon fichier script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 var $addAuteurLink = $('<a href="#" class="add_tag_link">Ajouter un auteur</a>');
    var $newLinkLi = $('<li></li>').append($addAuteurLink);
    // Get the ul that holds the collection of tags
    var $collectionHolder = $('ul.auteurs');
 
    // add a delete link to all of the existing tag form li elements
    $collectionHolder.find('li').each(function() {
        addAuteurFormDeleteLink($(this));
    });
 
    // add the "add a tag" anchor and li to the tags ul
    $collectionHolder.append($newLinkLi);
 
    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $collectionHolder.data('index', $collectionHolder.find(':input').length);
 
    $addAuteurLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();
 
        // add a new tag form (see code block below)
        addAuteurForm($collectionHolder, $newLinkLi);
    });
 
    function addAuteurForm($collectionHolder, $newLinkLi) {
        // addTagFormDeleteLink($newFormLi);
        // Get the data-prototype explained earlier
        var prototype = $collectionHolder.data('prototype');
 
        // get the new index
        var index = $collectionHolder.data('index');
 
        // Replace '$$name$$' in the prototype's HTML to
        // instead be a number based on how many items we have
        var newForm = prototype.replace(/__name__/g, index);
 
        // increase the index with one for the next item
        $collectionHolder.data('index', index + 1);
 
        // Display the form in the page in an li, before the "Add a tag" link li
        var $newFormLi = $('<li></li>').append(newForm);
 
        // also add a remove button, just for this example
        $newFormLi.append('<a href="#" class="remove-tag">Supprimer cet auteur</a>');
 
        $newLinkLi.before($newFormLi);
 
        // handle the removal, just for this example
        $('.remove-tag').click(function(e) {
            e.preventDefault();
 
            $(this).parent().remove();
 
            return false;
        });
    }
 
    function addAuteurFormDeleteLink($auteurFormLi) {
        var $removeFormA = $('<a href="#">Supprimer cet auteur</a>');
        $auteurFormLi.append($removeFormA);
 
        $removeFormA.on('click', function (e) {
            // prevent the link from creating a "#" on the URL
            e.preventDefault();
 
            // remove the li for the tag form
            $auteurFormLi.remove();
        });
    }