Tagging system with dynamic input

Question

Right now I'm trying to combine the bootstraps tagging-system with a dynamic input field code. I want for every dynamic generated field/div a tag-inputfield.

like this way:

Topic1: Title
Description: it's about a title
Tags: hello, boring, title

Topic2: it's a title again
Description: it's a description again
Tags: idk, help

(...) and so on.

My jquery file for adding additional fields looks like this:

    $(document).ready(function () {
        var maxGroup = 10;       
          $(".addMore2").click(function() {
          $(".tagging").css("display", "none"); 
           if ($('feld2').find('.fieldGroup').length < maxGroup) {
              var fieldHTML = '<div class="form-group fieldGroup">' + 
              $(".fieldGroupCopy").html() + '</div>';
              $('feld2').find('.fieldGroup:last').after(fieldHTML);
                } else {
                    alert('Maximum ' + maxGroup + ' groups are allowed.');
                }
            });
            //remove fields group
                $("feld2").on("click", ".remove", function () {
                $(this).parents(".fieldGroup").remove();
            });
        });

The not working part is this one: When I click on my "add" button: see here it makes a copy of the this part:

<div class="form-group fieldGroupCopy" style="display: none;">     
     <table>
        <tr> 
        <td class='first_td'><label for="titel"><b>Titel:</b></label></td>
       <td><input  type="text" name="description[]" class="form-control" placeholder="Title"/></td>
    <td><a href="javascript:void(0)" class="btn btn-danger remove">-</a></td>
    </tr>
    <tr>
        <td><b>Beschreibung:</b></td>
         <td><textarea type="text" name="description[]" class="form-control" placeholder="Beschreibung des Themas"/></textarea></td>
       </tr>
            <tr>
             <td><label for="Tags"><b>Tags</b></label></td>
                <td colspan='2'>
                    div class="form-group">
                            <input type="text" name='tags_WiBe[]' placeholder='Add Tags' data-role="tagsinput" class="form-control" />
                        </div>
                        </td>
                        </tr>
               </table>
              </div>

But the tagging-system does not work within the copied fields. Its only working outside of the div "form-group fieldGroup".

see here Everytime I enter a tag the form wants to submit, but thats not what I want.

Please help me...

edit:

Here is a jsfiddle to show the problem more clearly. https://jsfiddle.net/t5vrLsur/#&togetherjs=pbAhjTR1t1 I know it's not the most beautiful structure. Don't be too hard on me. :(

Hi and welcome to StackOverflow. It will much easier for us to help you if you could add a [runnable code](https://meta.stackoverflow.com/q/358992/863110). You don't have to do it for all the code, you can simplify the case. — Mosh Feu, May 29 '18 at 12:33
Here is ja jsfiddle with the important parts. It also shows the problem, when you use the add-function and try to put some tags in the shown up tag-field. https://jsfiddle.net/t5vrLsur/#&togetherjs=pbAhjTR1t1 — Chrissy Mint, May 29 '18 at 12:59
You can start [here](https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/issues/271) — Mosh Feu, May 29 '18 at 13:33
uff... doesn't help me much tbh. but I'm grateful for your help! — Chrissy Mint, May 29 '18 at 14:06

score 0 · Accepted Answer · answered May 29 '18 at 16:28

The thing is that the plugin itself take care about the first initialisation on DOM ready. In your case, you want to run it after each adding card.

You can do this by simple run the plugin initialisation in the new card context.

Also, you have to remove the data-role attribute from the input in the template because, as we said, this attribute meant to initialise the plugin automatically but in the template's case we will do it manually after we will load the card.

So here are the relevant lines:

// wrap the html with jQuery so you could delete the inputtags wrapper later
var fieldHTML = $('<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>');
$('feld2').find('.fieldGroup:last').after(fieldHTML);
// initialise again
fieldHTML.find('input').tagsinput();

Working demo

http://output.jsbin.com/dabijac/

Also, you have couple of jQuery references in your code which cause problem. You have either remove it or using use $.noConflict to keep them.

I'm speechless! Thank you so much for your help! I will try harder to become better and understand things better. Thanks! — Chrissy Mint, May 29 '18 at 16:48

Tagging system with dynamic input

1 Answers1