CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-tags-input
Munez NS
Munez NS

Reputation: 1011

How to bind Bootstrap Tags to dynamically created elements?

I'm having problems binding Bootstrap Tags to an input field an I think its because input field is dynamically created with ajax. Simply nothing is firing.

echo " <div class='tags-cont'>
    <input value='".$tags."' class='tags' type='text' name='tags' data-role='tagsinput' placeholder='Add tags' />
</div>";

Scrtipts are embeded before body closing tag:

<script src='scripts/plugins/bootstrap_tags/bootstrap-tagsinput.js' type='text/javascript'></script>
<link href='scripts/plugins/bootstrap_tags/bootstrap-tagsinput.css' rel='stylesheet' type='text/css' />

Upvotes: 2

Views: 4156

Answers (2)

Santosh Kp
Santosh Kp

Reputation: 105

I think I'm a bit late to answer for this but I had the same issue I just added the following:

Step 1: Removed the data-role="tagsinput" from my input field.

Step 2: Add the following code after where you are creating the dynamic element.

var tags = $('#tags'); 
tags.tagsinput({}); 
tags.tagsinput('removeAll');
tags.tagsinput('add', 'tag1,tag2,tag3');

Upvotes: 0

Munez NS
Munez NS

Reputation: 1011

I got it. For anyone who will stumble on this in the future:

Remove:

data-role="tagsinput"

And instantiate tagsinput on ajaxComplete:

$(document).ajaxComplete(function(){
        $('.tags').tagsinput({
            maxTags: 3
        });
    });

Upvotes: 9

Related Questions