У меня есть графическая проблема с прототипом формы symfony. Мой объект "CompetenceGroupe" может иметь множество объектов объекта "CompetenceItem". Все работает нормально, но рендеринг не идеален.
Когда я создаю новую CompetenceGroupe, в моей форме я могу добавлять и удалять подформы Form CompetenceItems. Форма компетенции имеет текстовый ввод, вход для выбора и кнопку "удалить" (красным, сгенерированным javascript).
Я пытаюсь выровнять эти три элемента, но кнопка удаления всегда идет под двумя другими элементами.
Что я хочу сделать в представлении:
И то, что у меня есть сейчас:
В моем инструменте разработки от Google Chrome я вижу, что кнопка удаления (с классом "btn-danger") находится не в том же div, что и два других элемента моего прототипа (с классом "компетенция_groupe_competence_items_0"):
Я даю вам код моего представления прототипа (expert_item_prototype.html.twig)
{% block competence_item_widget %}
<div id="{{ form.vars.id }}" class="row">
<div class="col-md-7">
{{ form_label(form.libelle, "Libelle", {'label_attr': {'class': 'sr-only control-label'}}) }}
{{ form_errors(form.libelle) }}
{{ form_widget(form.libelle, {'attr': {'class': 'form-control', 'placeholder': 'Libellé'}}) }}
</div>
<div class="col-md-3">
{{ form_label(form.niveau, "Niveau", {'label_attr': {'class': 'sr-only control-label'}}) }}
{{ form_errors(form.niveau) }}
{{ form_widget(form.niveau, {'attr': {'class': 'form-control selectModal'}}) }}
</div>
</div>
{% endblock %}
И мой основной взгляд (с формой CompetenceGroupe) и Javascript-код для создания кнопок "delete" на каждом прототипе форм:
{% form_theme formAddCompetence 'espaceUtilisateur/forms/prototypes/competence_item_prototype.html.twig' %}
{{ form_start(formAddCompetence, { 'attr': {'class': 'formCompetenceAdd'} }) }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{ libelleCategorie }}</h4>
</div>
<div class="modal-body">
<h4><span class="label label-default">Les champs marqués d'un astérisque sont obligatoires.</span></h4>
{{ form_row(formAddCompetence.titre) }}
{{ form_row(formAddCompetence.competence_items) }}
{{ form_widget(formAddCompetence._token) }}
<br>
<a href="#" id="add_category" class="btn btn-default">Ajouter une catégorie</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
{% if objectCompetence.idCompetenceGroupe is not empty %}
{{ form_widget(formAddCompetence.edit) }}
<input type="hidden" name="idCompetenceGroupe" id="idCompetenceGroupe" value="{{ objectCompetence.idCompetenceGroupe }}">
{% else %}
{{ form_widget(formAddCompetence.save) }}
{% endif %}
</div>
</form>
<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#competence_groupe_competence_items');
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$('#add_category').click(function(e) {
addCategory($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On ajoute un premier champ automatiquement s'il n'en existe pas déjà un (cas d'une nouvelle annonce par exemple).
if (index == 0) {
addCategory($container);
} else {
// S'il existe déjà des catégories, on ajoute un lien de suppression pour chacune d'entre elles
$container.children('div').each(function() {
addDeleteLink($(this));
});
}
// La fonction qui ajoute un formulaire CategoryType
function addCategory($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 template = $container.attr('data-prototype')
.replace(/__name__label__/g, 'Catégorie n°' + (index+1))
.replace(/__name__/g, index)
;
// On crée un objet jquery qui contient ce template
var $prototype = $(template);
// On ajoute au prototype un lien pour pouvoir supprimer la catégorie
addDeleteLink($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 un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une catégorie
function addDeleteLink($prototype) {
// Création du lien
//var $deleteLink = $('<div><a href="#" class="btn btn-danger">Supprimero</a></div>'); // OLD
var $deleteLink = $('<div class="col-md-1"><button class="btn btn-danger"><i class="fa fa-trash-o"></i></button></div>');
// Ajout du lien
$prototype.last().append($deleteLink); // OLD
// Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
$deleteLink.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
Спасибо, что каждый может потратить время на помощь.
Не можете ли вы просто добавить его в .row
?
function addDeleteLink($prototype) {
// Création du lien
//var $deleteLink = $('<div><a href="#" class="btn btn-danger">Supprimero</a></div>'); // OLD
var $deleteLink = $('<div class="col-md-1"><button class="btn btn-danger"><i class="fa fa-trash-o"></i></button></div>');
// Ajout du lien
$prototype.find('.row').append($deleteLink); // OLD
// Ajout du listener sur le clic du lien pour effectivement supprimer la catégorie
$deleteLink.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}