Question

I am trying to enter certain roles in a text area and have it highlighted in a popup block using bootstrap.

The expected behavior is that the selected roles must be highlighted, the code works when I use the id selector to the jquery, but the same code does not work with class selector

<textarea name="options" id="options" cols="30" rows="10">admin user</textarea>


<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide fade" id="myModal" class="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <div>
            <ul>
                <li class="mlist">admin</li>
                <li class="mlist">user</li>
                <li class="mlist">guest</li>
                <li class="mlist">blank</li>
            </ul>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function (){
        console.log('Inside onready');
        $('.myModal').on('show', function () {
            console.log('Inside show');
            var option = $('#options').val();
            var options = option.split(" ");
            console.log('Selected roles: ' + options);

            for (var index = 0; index < options.length; index++) {
                highlight(options[index]);
            };
        });
        $('.myModal').on('hide', function () {
            console.log('Inside onhide');
            $('.mlist').removeClass('btn-primary');
        });
    });

    function highlight(parOptions) {
        $('.mlist:contains("' + parOptions +'")').addClass('btn-primary');
    }

</script>

Answer 1

I guess it’s something to do with your div having two class tags.

<div class="modal hide fade" id="myModal" class="myModal">

Change to

<div class="modal hide fade myModal" id="myModal">