Embed a Collection of Forms : Add a Tag jQuery

Question

I'm trying to reproduce the Symfony 2 Cookbook Tutorial Add a new Tag

I'm using exactly the same code like in the tutorial but I have some problems with the jQuery include.

new.html.twig :

<form action="..." method="POST" {{ form_enctype(form) }}>
    {# render the task's only field: description #}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e }}">
        {# iterate over each existing tag and render its only field: name #}
        {% for tag in form.tags %}
            <li>{{ form_row(tag.name) }}</li>
        {% endfor %}
    </ul>
    <a href="#" class="add_tag_link">Add a tag</a>
    {{ form_rest(form) }}
    {# ... #}
</form>

This is how i include the jquery in the base.html.twig: <script src="http://code.jquery.com/jquery.js"></script>

Next Step: Add a script tag somewhere on your page so you can start writing some JavaScript.

So I copy pasted this in the base.html.twig ,too.

// Get the ul that holds the collection of tags
var collectionHolder = $('ul.tags');

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function () {
    // add the "add a tag" anchor and li to the tags ul
    collectionHolder.append($newLinkLi);

    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    collectionHolder.data('index', collectionHolder.find(':input').length);

    $addTagLink.on('click', function (e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // add a new tag form (see next code block)
        addTagForm(collectionHolder, $newLinkLi);
    });
});

function addTagForm(collectionHolder, $newLinkLi) {
    // Get the data-prototype explained earlier
    var prototype = collectionHolder.data('prototype');

    // get the new index
    var index = collectionHolder.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
    collectionHolder.data('index', index + 1);

    // Display the form in the page in an li, before the "Add a tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

At the end I wrote Add a tag after the list.

But when I click on the Add a Tag Link, no new Tag input field appears.

If you mean when your click on the add tag link you added after your list it's normal. The click event is listenning on your `$addTagLink` object so it'll only work if you click on the add tag link in your list. — Snroki, Mar 15 '13 at 14:30
I made you a fiddle for example : http://jsfiddle.net/GXy6g/ — Snroki, Mar 15 '13 at 14:47
hey thanks really much Coussinsky , but how comes that Symfony uses a $addTagLink variable and how do i uses this variable? — ChrisS, Mar 15 '13 at 14:58
The Tutorial says: "add a link to the bottom of the "tags" list via JavaScript" and i don't know what they mean with add a link via javascript — ChrisS, Mar 15 '13 at 15:07
in the cookbook their addtaglink is automatic, it's added to the new line everytime you click on the same button see : http://jsfiddle.net/GXy6g/1/ so it depend how you want to implement it you can do both methods — Snroki, Mar 18 '13 at 09:10

score 0 · Answer 1 · answered Apr 12 '13 at 15:26

0

See browser debugger. Is there any errors? Maybe you use old jquery version? Make sure that jquery is enabled and support 'on' event (since 1.9 version).

answered Apr 12 '13 at 15:26

Alex

1,073
9
20

Embed a Collection of Forms : Add a Tag jQuery

1 Answers1