TokenInput stops working when loaded in bootstrap modal

Question

(im still learning about js / jquery) so pls bear with me - I have the following code in a page - If i echo $data, it works perfectly - the words load correctly. But when I echo the modal (containing the same $data) the functionality stops and i just have text typing in the box.

The page has the same includes (its a test page I use for standalone code). Do I need to reload the token js and css files into the modal (tried that but not working) - what am i missing?

There is no extra js for the token input, it just loads the js and css files.

$data='<span class="font-heavy" id="">To:</span> 
             <input type="text" id="users" name="blah" placeholder="Add friends"/>
            <input type="hidden"  id="tags"/>


  <script type="text/javascript">
    $(document).ready(function() {

        $("#users").tokenInput([
            {id: 7, name: "Ruby"},
            {id: 11, name: "Python"},
            {id: 47, name: "Java"}

        ],{
            prePopulate: [

                /*{id: 123, name: "Pri User"},
                {id: 555, name: "Bob Hoskins"}*/
            ],theme: "facebook",preventDuplicates: true, hintText: "Add friends"
        });
    });
    </script>
    ';



$modal = '<a href="#" id="NewRatingsLink">Load Modal</a>

<script type="text/javascript">
    $(document).ready(function(){
        $("#NewRatingsLink").click(function(){
            $("#newRatingsModal").modal("show");
      });
  });
</script> 

<style>.modal {
      overflow-y: hidden;
  }</style>


<div id="newRatingsModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Overall Rating: '.@RatingStars($ave).'</h4>
            </div>
            <div class="modal-body">

        <div id="listratings">
        '.$data.'
      </div>

            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-green" data-dismiss="modal">Cancel</button>'.@$submit.'
                <div class="message"></div>
            </div>
        </div>
    </div>
</div><!-- END of Modal HTML -->';

Thanks!

possible duplicate of [jQuery TokenInput : Tokens are not getting added](http://stackoverflow.com/questions/23677002/jquery-tokeninput-tokens-are-not-getting-added) — Chris, Apr 17 '15 at 21:00

score 0 · Answer 1 · answered Apr 17 '15 at 21:00

0

This is probably a z-index problem. Set the z-index of the TokenInput to be higher than the modal pop-up, using the parameter in the TokenInput set up.

   $("#users").tokenInput([
        {id: 7, name: "Ruby"},
        {id: 11, name: "Python"},
        {id: 47, name: "Java"}

    ],{
        prePopulate: [

            /*{id: 123, name: "Pri User"},
            {id: 555, name: "Bob Hoskins"}*/
        ],theme: "facebook",
preventDuplicates: true, 
hintText: "Add friends",
z-index: 9999
    });

answered Apr 17 '15 at 21:00

Chris

5,882
2
32
57

hi - thanks for that. still no, ill keep trying to figure out why tho - very odd.. – Francois Brand Apr 18 '15 at 10:22
@FrancoisBrand really? Odd- Are you able to knock up a demo on jfiddle or something? – Chris Apr 18 '15 at 10:24

score 0 · Answer 2 · answered Apr 18 '15 at 10:31

I changed ALL my z-index values across all the css files and now its FIXED, as per previous questions a single line did not fix my problem. Also - as for the duplicate questions, I was not even aware they were loading in the background, my text box did not even show up so I had no clue it was a possible z-index thing.

Anyway - thanks for all the input, it works now!

TokenInput stops working when loaded in bootstrap modal

2 Answers2