Надеюсь, у вас все хорошо:)
Я не очень привык к javascript / jQuery, я пытаюсь сделать Symfony CollectionType, где я могу нажать кнопку, чтобы добавить или удалить поля TextType.
Это пример, поэтому, если я нажму «х», он удалит это, а если я нажму «Добавить еще раз», он добавит еще одинПоле TextType.
Проблема в том, что эти кнопки не работают, я уже пробовал несколько кодов, я бы хотел, чтобы этот код работал.
Мой шаблон Twig:
{% extends 'base.html.twig' %}
{% block body %}
<div class="container">
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{{ form_start(form) }}
<br>
Name {{ form_widget(form.name) }}
Price {{ form_widget(form.price) }}
Available {{ form_widget(form.available) }}
Date {{ form_widget(form.date) }}
<div class="row js-ticket-time-wrapper"
data-prototype="{{ form_widget(form.ticketTimes.vars.prototype)|e('html_attr') }}"
data-index="{{ form.ticketTimes|length }}">
{% for t in form.ticketTimes %}
<div class="col-xs-4 js-ticket-time-item">
<a href="#" class="js-remove-time pull-right">
<span class="fa fa-times"></span>
</a>
{{ form_row(t) }}
{{ form_row(t.name) }}
</div>
{% endfor %}
<a href="#" class="js-ticket-time-add">
<span class="fa fa-plus-circle"></span>
Add Another time
</a>
</div>
<button type="submit" class="btn btn-primary" formnovalidate>Save</button>
{{ form_end(form) }}
{% endblock %}
И это jQuery, который я сейчас использую:
{{ parent() }}
<script>
jQuery(document).ready(function() {
var $wrapper = $('.js-ticket-time-wrapper');
$wrapper.on('click', '.js-remove-time', function(e) {
e.preventDefault();
$(this).closest('.js-ticket-time-item')
.fadeOut()
.remove();
});
$wrapper.on('click', '.js-ticket-time-add', function(e) {
e.preventDefault();
// Get the data-prototype explained earlier
var prototype = $wrapper.data('prototype');
// get the new index
var index = $wrapper.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
$wrapper.data('index', index + 1);
// Display the form in the page before the "new" link
$(this).before(newForm);
});
});
</script>
Base.html.twig CSS:
<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{{ asset('css/4-col-portfolio.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Base.html.twig Javascript:
<script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
Пользовательский CSS (портфолио на 4 кола) содержит:
body {
padding-top: 54px;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
.portfolio-item {
margin-bottom: 30px;
}
.pagination {
margin-bottom: 30px;
}