2

I am using jQuery TokenInput which calls the service written in node.js. The service is giving me a response. (I have logged it in onResult and resultsFormatter.) But the drop down of tokens doesn't show up.

My service response is as follows:

{
    "data": [
        {
            "name": "a",
            "key": 1023040,
            "subtext": "abc"
        },
        {
            "name": "b",
            "key": 1023040,
            "subtext": "pqr"
        }
    ]
}

JavaScript code is as follows.

       $("#myInputTextBox").tokenInput('http://myWebService', {
            crossDomain: true,
            theme: "facebook",
            minChars: 3,
            resultsFormatter: function(item) { 
                console.log("<li><p class='added' data-id='" + 
                            item.key + "' data-name='" + item.originalName + 
                            "'>" + item.name + "</p></li>");
                return "<li><p class='added-cities' data-id='" + 
                item.key + "' data-name='" + item.originalName + 
                "'>" + item.name + "</p></li>" 
            }, 
            onResult: function (results) {
                 results = results["data"];
                 $.each(results, function (index, value) {
                        value.originalName = value.name;
                        value.id = value.key;
                        value.name = value.name + " " + value.subtext;
                 });
                console.log(results);
                return results;
            },
            onAdd: function(item) {
                console.log("addrd");
            }
        });

The response is getting logged in onResult as well as resultsFormatter as expected. I tried to log it in onAdd it doesn't get logged. What's the issue here?

Chris
  • 5,882
  • 2
  • 32
  • 57
Chaitanya Wadekar
  • 253
  • 1
  • 3
  • 14
  • @Chris - added the service call in post. – Chaitanya Wadekar May 15 '14 at 11:44
  • I've ran the code with local data, with no problems. Does the token apply css to the input on the page correctly? Are you able to provide a link/jsfiddle - I can't see anything obviously wrong with the above. – Chris May 15 '14 at 11:56
  • I can see the css getting downloaded in networks. Css to my input box is getting applied(its color is changing and classes are getting applied). But when I click for typing. It should say "Type in a search term", I cant see that. I tried it on separate page, its working fine. Only difference here is my input box is on modal window. Can this cause problems? – Chaitanya Wadekar May 15 '14 at 12:17
  • Ah - yes, almost definitely! In the CSS, `div.token-input-dropdown ` has a z-index of 1, your modal window will almost undoubtedly be higher than that! – Chris May 15 '14 at 12:54
  • So, how should I resolve this issue? Any solution? – Chaitanya Wadekar May 15 '14 at 13:01
  • 1
    Find the z-index of your modal window, and set the z-index of the dropdown to be higher than it. – Chris May 15 '14 at 13:03
  • Yes ... it works. Modal window has z-index of more then 1000 by default. Added z-index of 2000 for testing to my drop down. Thank you. – Chaitanya Wadekar May 15 '14 at 13:33

1 Answers1

1

The issue here is likely due to the face that the TokenInput is being used in a modal window, and the z-index of the dropdown is 1, whereas the modal window will likely be higher.

To fix this the z-index value in token-input.css for div.token-input-dropdown should be modified to be higher than the modal value.

Chris
  • 5,882
  • 2
  • 32
  • 57