Halnex Halnex - 5 months ago 25
jQuery Question

jQuery Chosen: display multiple select fields on the same page

I am using https://harvesthq.github.io/chosen/ to allow user to search for values in a dropdown list.

I also have 2 tabs on the

post/create
page: Link & Text

Both tabs have the same "subreddit_id" field that is using
$(selector).chosen();
however, jquery chosen only displays on the first tab but not the second. If I remove the class name from the second tab, a normal dropdown will appear populated by my data, if I add the class
chosen-select
, the fields doesn't load at all.

I am using the same field on both tabs.

enter image description here

Not sure why this is happening. I have tried using the example code supplied with the plugin but it didn't work either

for (var selector in config) {
$(selector).chosen(config[selector]);
}


Here is my code

<script type="text/javascript">
$(document).ready(function(){
$('.chosen-select').chosen();
$('.chosen-select1').chosen();
});
</script>

<div class="bs-posts bs-posts-tabs" data-posts-id="togglable-tabs">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Link</a></li>
<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Text</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">

{!! Form::open(['url' => 'posts', 'method' => 'POST']) !!}
<p>
{!! Form::label('title', 'Title:') !!}
{!! Form::text('title', null, ['class' => 'form-control', 'id' => 'title']) !!}
</p>

<p>
{!! Form::label('link', 'Link:') !!}
{!! Form::text('link', null, ['class' => 'form-control', 'id' => 'link']) !!}
</p>

<p>
{!! Form::label('subreddit', 'Subreddit:') !!}
{!! Form::select('subreddit_id', $subreddits, null, ['class' => 'chosen-select']) !!}
</p>

<p>
{!! Form::submit('Submit Post', ['id' => 'submit', 'class' => 'btn btn-primary']) !!}
</p>

{!! Form::close() !!}
</div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
{!! Form::open(['url' => 'posts', 'method' => 'POST']) !!}
<p>
{!! Form::label('title', 'Title:') !!}
{!! Form::text('title', null, ['class' => 'form-control', 'id' => 'title']) !!}
</p>

<p>
{!! Form::label('text', 'Text:') !!}
{!! Form::textarea('text', null, ['class' => 'form-control', 'id' => 'text']) !!}
</p>

<p>
{!! Form::label('subreddit', 'Subreddit:') !!}
{!! Form::select('subreddit_id', $subreddits, null, ['class' => 'chosen-select1']) !!}
</p>

<p>
{!! Form::submit('Submit Post', ['id' => 'submit', 'class' => 'btn btn-primary']) !!}
</p>

{!! Form::close() !!}
</div>
</div>
</div><!-- /tabs -->

Answer

You have to trigger the plugin in the tab change you can use the event shown.bs.tab event.

Code:

$(document).ready(function () {

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href") // activated tab
        debugger
        if (target == '#home') {
            $('.chosen-select').chosen();
        }
        if (target == '#profile') {
            $('.chosen-select1').chosen();
        }
    });

    $('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
});

Demo: http://jsfiddle.net/IrvinDominin/o9xp6zcd/