all the tags are displayed as one tag in the suggestion list of jquery tag-it

40
May 15, 2018, at 9:30 PM

In my CodeIgniter application I am using JavaScript tag-it library to display data in the form of tags. I am setting tag-it property of an input field when the page loads and I apply the tags on it when I receive the data in the AJAX response. But the problem is that, whole of the array containing several tags (in the form of objects) is displayed as one tag in the suggestion list instead of each tag (object) being displayed separately. Please tell what can be the issue?

Code on page load:

<link rel="stylesheet" href="<?php echo base_url()?>js/ui/jquery-ui-1.8.17.custom.css">
<link href="<?php echo base_url()?>js/tagit/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url()?>js/tagit/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
<script src="<?php echo $this->config->item('proto');?>://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo $this->config->item('proto');?>://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//var link_count = 1;
$.noConflict();
jQuery(document).ready(function($) {
    (function($) {
    $.widget('ui.tagit', {
        options: {
            itemName          : 'item',
            fieldName         : 'tags',
            availableTags     : [],
            tagSource         : null,
            removeConfirmation: true,
            caseSensitive     : true,
            placeholderText   : null,
            // When enabled, quotes are not neccesary
            // for inputting multi-word tags.
            allowSpaces: true,
            // Whether to animate tag removals or not.
            animate: true,
            // The below options are for using a single field instead of several
            // for our form values.
            //
            // When enabled, will use a single hidden field for the form,
            // rather than one per tag. It will delimit tags in the field
            // with singleFieldDelimiter.
            //
            // The easiest way to use singleField is to just instantiate tag-it
            // on an INPUT element, in which case singleField is automatically
            // set to true, and singleFieldNode is set to that element. This 
            // way, you don't need to fiddle with these options.
            singleField: false,
            singleFieldDelimiter: ',',
            // Set this to an input DOM node to use an existing form field.
            // Any text in it will be erased on init. But it will be
            // populated with the text of tags as they are created,
            // delimited by singleFieldDelimiter.
            //
            // If this is not set, we create an input node for it,
            // with the name given in settings.fieldName, 
            // ignoring settings.itemName.
            singleFieldNode: null,
            // Optionally set a tabindex attribute on the input that gets
            // created for tag-it.
            tabIndex: null,

            // Event callbacks.
            onTagAdded  : null,
            onTagRemoved: null,
            onTagClicked: null
        },      
        _create: function() {           
            // for handling static scoping inside callbacks
            var that = this;
            // There are 2 kinds of DOM nodes this widget can be instantiated on:
            //     1. UL, OL, or some element containing either of these.
            //     2. INPUT, in which case 'singleField' is overridden to true,
            //        a UL is created and the INPUT is hidden.
            if (this.element.is('input')) {
                this.tagList = $('<ul></ul>').insertAfter(this.element);
                this.options.singleField = true;
                this.options.singleFieldNode = this.element;
                this.element.css('display', 'none');
            } else {
                this.tagList = this.element.find('ul, ol').andSelf().last();
            }
            this._tagInput = $('<input type="text" />').addClass('ui-widget-content');
            if (this.options.tabIndex) {
                this._tagInput.attr('tabindex', this.options.tabIndex);
            }
            if (this.options.placeholderText) {
                this._tagInput.attr('placeholder', this.options.placeholderText);
            }
            this.options.tagSource = this.options.tagSource || function(search, showChoices) {
                var filter = search.term.toLowerCase();
                var choices = $.grep(this.options.availableTags, function(element) {
                    // Only match autocomplete options that begin with the search term.
                    // (Case insensitive.)
                    return (element.toLowerCase().indexOf(filter) === 0);
                });
                showChoices(this._subtractArray(choices, this.assignedTags()));
            };
            // Bind tagSource callback functions to this context.
            if ($.isFunction(this.options.tagSource)) {
                this.options.tagSource = $.proxy(this.options.tagSource, this);
            }
            this.tagList
                .addClass('tagit')
                .addClass('ui-widget ui-widget-content ui-corner-all')
                // Create the input field.
                .append($('<li class="tagit-new"></li>').append(this._tagInput))
                .click(function(e) {                    
                    var target = $(e.target);
                    if (target.hasClass('tagit-label')) {
                        that._trigger('onTagClicked', e, target.closest('.tagit-choice'));
                    } else {
                        // Sets the focus() to the input field, if the user
                        // clicks anywhere inside the UL. This is needed
                        // because the input field needs to be of a small size.
                        that._tagInput.focus();
                    }
                });
            // Add existing tags from the list, if any.
            this.tagList.children('li').each(function() {
                if (!$(this).hasClass('tagit-new')) {
                    that.createTag($(this).html(), $(this).attr('class'));
                    $(this).remove();
                }
            });
            // Single field support.
            if (this.options.singleField) {
                if (this.options.singleFieldNode) {
                    // Add existing tags from the input field.
                    var node = $(this.options.singleFieldNode);
                    var tags = node.val().split(this.options.singleFieldDelimiter);
                    node.val('');
                    $.each(tags, function(index, tag) {
                        that.createTag(tag);
                    });
                } else {
                    // Create our single field input after our list.
                    this.options.singleFieldNode = this.tagList.after('<input type="hidden" style="display:none;" value="" name="' + this.options.fieldName + '" />');
                }
            }
            // Events.
            this._tagInput
                .keydown(function(event) {                  
                    // Backspace is not detected within a keypress, so it must use keydown.
                    if (event.which == $.ui.keyCode.BACKSPACE && that._tagInput.val() === '') {
                        var tag = that._lastTag();
                        if (!that.options.removeConfirmation || tag.hasClass('remove')) {
                            // When backspace is pressed, the last tag is deleted.
                            that.removeTag(tag);
                        } else if (that.options.removeConfirmation) {
                            tag.addClass('remove ui-state-highlight');
                        }
                    } else if (that.options.removeConfirmation) {
                        that._lastTag().removeClass('remove ui-state-highlight');
                    }
                    // Comma/Space/Enter are all valid delimiters for new tags,
                    // except when there is an open quote or if setting allowSpaces = true.
                    // Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
                    if (
                        event.which == $.ui.keyCode.COMMA ||
                        event.which == $.ui.keyCode.ENTER ||
                        (
                            event.which == $.ui.keyCode.TAB &&
                            that._tagInput.val() !== ''
                        ) ||
                        (
                            event.which == $.ui.keyCode.SPACE &&
                            that.options.allowSpaces !== true &&
                            (
                                $.trim(that._tagInput.val()).replace( /^s*/, '' ).charAt(0) != '"' ||
                                (
                                    $.trim(that._tagInput.val()).charAt(0) == '"' &&
                                    $.trim(that._tagInput.val()).charAt($.trim(that._tagInput.val()).length - 1) == '"' &&
                                    $.trim(that._tagInput.val()).length - 1 !== 0
                                )
                            )
                        )
                    ) {
                        // Enter submits the form if there's no text in the input.
                          event.preventDefault();
                          that._tagInput.autocomplete('close');
                          that.createTag(that._cleanedInput());
                        // The autocomplete doesn't close automatically when TAB is pressed.
                        // So let's ensure that it closes.                         
                    }
                }).blur(function(e){
                    // Create a tag when the element loses focus (unless it's empty).
                    that.createTag(that._cleanedInput());
                });

            // Autocomplete.
            if (this.options.availableTags || this.options.tagSource) {
                this._tagInput.autocomplete({
                    source: this.options.tagSource,                 
                    select: function(event, ui) {                       
                        // Delete the last tag if we autocomplete something despite the input being empty
                        // This happens because the input's blur event causes the tag to be created when
                        // the user clicks an autocomplete item.
                        // The only artifact of this is that while the user holds down the mouse button
                        // on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
                        // and is changed to the autocompleted text upon mouseup.
                        if (that._tagInput.val() === '') {
                            that.removeTag(that._lastTag(), false);
                        }                        
                        that.createTag(ui.item.label,ui.item.value);
                        // Preventing the tag input to be updated with the chosen value.
                        return false;
                    },             
               focus: function(event, ui) {
                    event.preventDefault();                    
                }
                })
                }
        },
        _cleanedInput: function() {
            // Returns the contents of the tag input, cleaned and ready to be passed to createTag
            return $.trim(this._tagInput.val().replace(/^"(.*)"$/, '$1'));
        },
        _lastTag: function() {
            return this.tagList.children('.tagit-choice:last');
        },
        assignedTags: function() {
            // Returns an array of tag string values
            var that = this;
            var tags = [];
            if (this.options.singleField) {
                tags = $(this.options.singleFieldNode).val().split(this.options.singleFieldDelimiter);
                if (tags[0] === '') {
                    tags = [];
                }
            } else {
                this.tagList.children('.tagit-choice').each(function() {
                    tags.push(that.tagLabel(this));
                });
            }
            return tags;
        },
        _updateSingleTagsField: function(tags) {
            // Takes a list of tag string values, updates this.options.singleFieldNode.val to the tags delimited by this.options.singleFieldDelimiter
            $(this.options.singleFieldNode).val(tags.join(this.options.singleFieldDelimiter));
        },
        _subtractArray: function(a1, a2) {
            var result = [];
            for (var i = 0; i < a1.length; i++) {
                if ($.inArray(a1[i], a2) == -1) {
                    result.push(a1[i]);
                }
            }
            return result;
        },
        tagLabel: function(tag) {
            // Returns the tag's string label.
            if (this.options.singleField) {
                return $(tag).children('.tagit-label').text();
            } else {
                return $(tag).children('input').val();
            }
        },
        _isNew: function(value) {
            var that = this;
            var isNew = true;
            this.tagList.children('.tagit-choice').each(function(i) {
                if (that._formatStr(value) == that._formatStr(that.tagLabel(this))) {
                    isNew = false;
                    document.getElementById("tag_msg").innerHTML = "Tag Already Exist.";
                    return false;
                }
                document.getElementById("tag_msg").innerHTML = "";
            });
            return isNew;
        },
        _formatStr: function(str) {
            if (this.options.caseSensitive) {
                return str;
            }
            return $.trim(str.toLowerCase());
        },
        createTag: function(labelname, value, additionalClass) {
            var that = this;
            // Automatically trims the value of leading and trailing whitespace.
            value = $.trim(value);
            labelname= $.trim(labelname);
            if (!this._isNew(value) || value === '') {
                return false;
            }
            var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(labelname);
            // Create tag.
            var tag = $('<li></li>')
                .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable')
                .addClass(additionalClass)
                .append(label);
            // Button for removing the tag.
            var removeTagIcon = $('<span></span>')
                .addClass('ui-icon ui-icon-close');
            var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
                .addClass('tagit-close')
                .append(removeTagIcon)
                .click(function(e) {
                    // Removes a tag when the little 'x' is clicked.
                    that.removeTag(tag);
                });
            tag.append(removeTag);
            // Unless options.singleField is set, each tag has a hidden input field inline.
            if (this.options.singleField) {
                var tags = this.assignedTags();
                tags.push(value);
                this._updateSingleTagsField(tags);
            } else {
                var escapedValue = value;
                tag.append('<input type="hidden" style="display:none;" value="' + escapedValue + '" name="' + this.options.itemName + '[' + this.options.fieldName + '][]" />');
            }
            this._trigger('onTagAdded', null, tag);
            // Cleaning the input.
            this._tagInput.val('');
            // insert tag
            this._tagInput.parent().before(tag);
        },
        removeTag: function(tag, animate) {
            var mytags = document.getElementById("mytags");
            if ($('#mytags li').length-2 > 0){      
                mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all");
            } else {
                mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all validate[required]");
                $(".mytagsformError.formError").show();
            }
            animate = animate || this.options.animate;
            tag = $(tag);
            this._trigger('onTagRemoved', null, tag);
            if (this.options.singleField) {
                var tags = this.assignedTags();
                var removedTagLabel = this.tagLabel(tag);
                tags = $.grep(tags, function(el){
                    return el != removedTagLabel;
                });
                this._updateSingleTagsField(tags);
            }
            // Animate the removal.
            if (animate) {
                tag.fadeOut('fast').hide('blind', {direction: 'horizontal'}, 'fast', function(){
                    tag.remove();
                }).dequeue();
            } else {
                tag.remove();
            }
        },
        removeAll: function() {
            // Removes all tags.
            var that = this;
            this.tagList.children('.tagit-choice').each(function(index, tag) {
                that.removeTag(tag, false);
            });
        }
    });
})(jQuery);
});
</script>

Code on AJAX response:

$.ajax({
type: "POST",
async: true,
dataType: 'json',
url: url, 
data: "id_lp=0",
success: function(data){
        if (data.tagit_list!=''){
            alert('data received from ajax response!');

            //tags start
 var link_count = 1;

 var parent_chn = [data.tagit_list];


$("#mytags").tagit({
    tagSource: parent_chn,
    onTagAdded: function(event,ui) {
          var mytags = document.getElementById("mytags");
          if ($('#mytags li').length > 0){                
              mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all");
              $(".mytagsformError.formError").hide();
          } 
      }
});
<?php 
 $i=0;
 $exist_tags = array_filter($exist_tags,function($el) { return !empty($el[0]); });
 foreach($exist_tags as $tag){?>
 var li = document.createElement("li");
 li.setAttribute("class", "tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable");
 li.setAttribute("id","<?php echo $i;?>");
 var span1 = document.createElement("span");
 span1.setAttribute("class", "tagit-label");    
 span1.innerHTML = "<?php echo $tag[1];?>";
 li.appendChild(span1);
 var anc = document.createElement("a");
 anc.setAttribute("class", "tagit-close");
 anc.addEventListener("click",function(){
                   $("#<?php echo $i;?>").remove();
                   var mytags = document.getElementById("mytags");
                   if ($('#mytags li').length-1 > 0){       
                      mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all");
                   } else {
                      mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all validate[required]");
                   }
                   }, false);
 var span_anc_1 = document.createElement("span");
 span_anc_1.setAttribute("class", "text-icon");  
 span_anc_1.innerHTML = "×";
 anc.appendChild(span_anc_1);
 var span_anc_2 = document.createElement("span");
 span_anc_2.setAttribute("class", "ui-icon ui-icon-close");
 anc.appendChild(span_anc_2);
 li.appendChild(anc);
 var hid_input = document.createElement("input");
 hid_input.setAttribute("type","hidden");
 hid_input.setAttribute("name","item[tags][]");
 hid_input.setAttribute("value", "<?php echo $tag[0]?>");
 li.appendChild(hid_input);          
 $("#mytags").prepend(li);
 if ($('#mytags li').length-1 > 0){     
     mytags.setAttribute("class","tagit ui-widget ui-widget-content ui-corner-all");
 }                      
 <?php 
 $i++;
 }?>
  $("#link_count").val(link_count);    
READ ALSO
Return a value from a .done promise

Return a value from a .done promise

I am usingthis function to get an array of data from a signalr server I wanted to compare this data in another signalR function where I am getting the new updates

67
How do I use Screenfull.js to make a Google chart fullscreen?

How do I use Screenfull.js to make a Google chart fullscreen?

I am using screenfulljs to allow a Google chart to be viewed in fullscreen

94
Bootstrap table fix header with custom column width

Bootstrap table fix header with custom column width

I want to fix header in bootstrap table with tbody scrollI have search many result but not getting proper answer yet

61
Color on ColorPicker not being picked correctly

Color on ColorPicker not being picked correctly

I am trying to implement a jQuery colorPickerI found eyeCon color picker and I am encountering that for certain colors it just does not allow to set it so:

52