Bonjour tout le monde,
Aidé moi svp, j'ai une entité professinalProfile en jointure OneToMany avec une entité Realization qui elle même à une jointure OneToMany avec illustration (des images)
dans ProfessionalProfileType

$builder
  ->add(
      'realizations',
      CollectionType::class,[
          'entry_type' => RealizationType::class,
          //'mapped' => false,
          'allow_add' => true,
      ]
  )
; 

pour afficher le formulaire realization de même
dans RealizationType

$builder
  ->add(
      'illustrations',
      CollectionType::class,[
          'entry_type' => IllustrationType::class,
          //'mapped' => false,
          'allow_add' => true,
      ]
  )
;

pour afficher le formulaire des illustrations et en fin
dans IllustrationType

$builder
->add(
    'url',
    FileType::class, [
        'label' => false,
        'multiple' => true,
        'mapped' => false,
        'required' => false,
        'attr' => [
            'class' => 'hidden file-input'
        ]
    ]
)
;

mon javaScript:

// Écouteur d'évènements pour le bouton d'ajout de réalisation
$('#add-realization').on('click', function () {
  // Récupère le numéro des futurs champs
  const index = $('#professional_profile_realizations div.form-group').length;

  // Récupère le prototype des entrées
  const tmpl = $('#professional_profile_realizations').data('prototype').replace(/__name__/g, index);

  // Injecte le code dans la div
  $('#professional_profile_realizations').append(tmpl);

  // Gère les boutons de suppression
  handleDeleteButtons();
});

// Fonction pour gérer les boutons de suppression
function handleDeleteButtons() {
  // Sélection de tous les éléments avec l'attribut data-action="delete"
  var action = document.querySelectorAll('[data-action="delete"]');

  // Ajoute un écouteur d'évènements pour supprimer les éléments
  $(action).on("click", function () {
    // Récupère la cible à supprimer
    const target = this.dataset.target;

    // Supprime la cible
    $(target).remove();
  });
};

// Appelle la fonction pour gérer les boutons de suppression
handleDeleteButtons();

dans ma vue twig:

{% form_theme form _self %}
{% block body %}
    <!-- form ProfessionalProfile -->
  {{form_start(form)}}
    <!-- form Realisation -->
    {{ form_widget(form.realizations)}}
    <!-- End form Realisation -->
  {{form_end(form)}}
    <!-- End form ProfessionalProfile -->
{% endblock %}

 <!--block form Realisation dans ProfessionalProfile -->
{% block _professional_profile_realizations_widget %}
    {{form_widget(form)}}
    <div class="form-group p-0 mt-3">
        <!--buttom type="button" id="add-image" class="btn btn-sm btn-info shadow-sm"><i class="far fa-file-upload mr-2"></i></buttom-->
        <div class="flex justify-center py-10">
            <button type="button" id="add-realization" class="bg-blue-500 text-white rounded-md py-2 px-8 transition-colors"> Ajouter une réalisation </button>
        </div>
    </div>

{% endblock %}

{% block _professional_profile_realizations_entry_row %}
    {{form_widget(form)}}
{% endblock %}

{% block _professional_profile_realizations_entry_widget %}
<div class="form-group" id="block_{{id}}">

  <div class="shadow-xl rounded-lg px-2.5 py-4 md:p-8 space-y-3 w-full bg-white dark:bg-slate-800 mb-6 ">
    <div class="md:flex items-center gap-14 justify-between pb-2">
        <p class="md:w-32"> Images </p>
        <div class="flex-1 max-md:mt-3">
            <div class="w-full">
                <div class="dropzone">
                    <label for="{{id}}_illustrations" class="cursor-pointer flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-green-400 bg-white p-4 text-center dark:bg-slate-700">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                        </svg>
                        <div class="text-gray-700  dark:text-white mb-1">(optionnelle)</div>
                        <div class="file-list mt-2 text-gray-500  dark:text-white/90 tracking-wide2 text-xs">
                            <p> Cliquez pour sélectionner </p>
                            <p> Ou faites glisser et déposez votre fichier PNG, JPG ou JPEG.</p>
                        </div>
                    </label>
                    <!-- ------important -------->
                    {{ form_widget(form.illustrations) }}
                    <!-- ------fin important -------->
                </div>
            </div> 
        </div>
    </div>
  </div>

  <div class="flex justify-center w-10">
      <buttom type="button" data-action="delete" data-target="#block_{{id}}" class="bg-red-600 text-white rounded-full p-2.5 transition-colors">
          <span>
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
              </svg>
          </span>
      </buttom>
  </div>

</div>
{% endblock %}
 <!--End block form Realisation dans ProfessionalProfile -->

Objectf: lorsque je clique sur le bouton "Ajouter une réalisation" que dans la partie ou j'ai commté important qu'il soit directement charger par défaut un seul champs url de illustrationType sans qu'on ai besoin de cliquer un bouton pour le faire apparaitre

Actuellement lorsque je clique sur Ajouter une réalisation mon formulaire de réalisation apparaît normalement même sa suppression mais je n'arrive pas à faire fontionné celui de illustration

Merci d'avance pour vos réponses.

Aucune réponse