xoxco / jQuery-Tags-Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.
http://xoxco.com/projects/code/tagsinput/
2.29k stars 826 forks source link

jQuery-Tags-Input being blocked by crystal ad blocker on Safari iOS #366

Open DigitalLeaves opened 5 years ago

DigitalLeaves commented 5 years ago

I observed that jQuery-Tags-Input was not working on Safari for iOS. The following error is thrown:

TypeError: $('#phone').importTags is not a function. (In '$('#phone').importTags('')', '$('#phone').importTags' is undefined)

"phone" is the field when I'm applying them.

The code works flawlessly on Chrome and Firefox for iOS. Also, it works flawlessly on every desktop browser I've tried, including Safari (for Mac), Chrome, and Firefox. The problem was that safari for iOS with the ad block crystal is blocking the jquery.input.tags.js from loading.

Any idea why this is happening? I contacted the team of Crystal App.

Html:

<div class="col-sm-12">
   <div class="input-group m-b tooltip-demo">
      <span class="input-group-btn top-align">
         <a type="button" class="btn btn-letusgo" href=""  data-toggle="tooltip" data-placement="top" title="frontend_make_call" id="phonebutton">frontend_phone</a>
      </span>
      <input type="text" class="tags form-control" id="phone" name="phone">
   </div>
</div>

JS:

function prepareTags() {
    // Email, phone and tags
    $('#phone').importTags(''); // ======> Code fails right here, just when initializing 
    $('#phone').tagsInput(updateMultiFieldForCustomer('phone'))
}

function updateMultiFieldForCustomer(fieldName) {
    return {
        width:'100%',
        height:'auto',
        defaultText:'add ' + fieldName,
        onAddTag: function (tag) { multiFieldAddedTagAction(fieldName, tag) },
        onRemoveTag: function (tag) { multiFieldRemovedTagAction(fieldName, tag) }
    }
}

$(document).ready(function() {
    customerid = $.urlParam("id")
    customerAlias = $.urlParam("alias")
    prepareTags()
}

Message from Web Inspector:

Content blocker prevented frame displaying https://app.thetask.ninja/customer.html?id=xxxxxxxxxxxx from loading a resource from https://app.thetask.ninja/js/plugins/tagsinput/jquery.tagsinput.min.js

Steps to reproduce: