Agfdhyk

Hope you're doing fine :)

I am not very used to javascript/jQuery, I am trying to do Symfony CollectionType, where I can click the button to add or remove TextType boxes.

This is an example, so if I click "x" it will remove that and if I click "Add Another Time", it will add one more TextType box.

The issue is, these buttons do not work, I've tried multiple codes already, I would love to make this one to work.

My Twig template:

{% 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 %}

And this is jQuery, that I am using right now:

{{ 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>

Custom CSS (4-col-portfolio) contains:

body {

  padding-top: 54px;

}



@media (min-width: 992px) {

  body {

    padding-top: 56px;

  }

}



.portfolio-item {

  margin-bottom: 30px;

}



.pagination {

  margin-bottom: 30px;

}

I debugged my code in Chrome debugger javascript.info/debugging-chrome and found out what error I was getting, so I simply fixed that and everything started to work! :)