Question

希望你做得很好：）

我不太习惯javascript / jQuery，我正在尝试做Symfony CollectionType，可以在其中单击按钮添加或删除TextType框。

这是一个示例，因此，如果我单击“ x”，它将删除该行；如果单击“添加另一个时间”，它将添加另一个TextType框。

问题是，这些按钮不起作用，我已经尝试了多种代码，我希望使这一按钮能够工作。

我的树枝模板：

{% 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-col-portfolio）包含：

body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

.portfolio-item {
  margin-bottom: 30px;
}

.pagination {
  margin-bottom: 30px;
}

Answer 1

我在Chrome调试器javascript.info/debugging-chrome中调试了我的代码，发现我遇到了什么错误，因此我简单地修复了该错误，一切开始正常！：）

jQuery脚本不适用于Symfony4 Twig

1 个答案: