Tabbed multiple image-picker problem

[easytraxbd]

Here's the html

<div class="text-right"
                                             style="background-color: white; overflow-x: scroll;overflow:auto">
                                            <ul class="tab-group" id="tab-group">
                                                <li class="tab active"><a href="#recommended">Recommended</a></li>
                                                <li class="tab"><a href="#cards">Cards</a></li>
                                                <li class="tab"><a href="#mobileBanking">Mobile Banking</a></li>
                                                <li class="tab"><a href="#ib">Net Banking</a></li>
                                            </ul>
                                        </div>
                                        <div class="tab-content">
                                            <div id="recommended">
                                                <div class="image-picker-div">
                                                    <select class="image-picker show-html">
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/bkash.png"
                                                                data-img-class="first" data-img-alt="bKash"
                                                                value="bkash"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/visa.png"
                                                                data-img-alt="Visa Card"
                                                                value="visacard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/master.png"
                                                                data-img-class="" data-img-alt="Master Card"
                                                                value="mastercard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/amex.png"
                                                                data-img-class="" data-img-alt="Amex Card"
                                                                value="amexcard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/citytouch.png"
                                                                data-img-alt="City Touch" value="city"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/ipay.png"
                                                                data-img-alt="iPay" value="ipay"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/nexus.png"
                                                                data-img-alt="DBBL Nexus"
                                                                value="dbbl_nexus"></option>

                                                    </select>
                                                </div>
                                            </div>
                                            <div id="cards">
                                                <div class="image-picker-div">
                                                    <select class="image-picker show-html">
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/visa.png"
                                                                data-img-alt="Visa Card" data-img-class="first"
                                                                value="visacard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/master.png"
                                                                data-img-class="" data-img-alt="Master Card"
                                                                value="mastercard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/amex.png"
                                                                data-img-class="" data-img-alt="Amex Card"
                                                                value="amexcard"></option>
                                                        <option data-img-src="{{url('/')}}/images/payment_logos_2/nexus.png"
                                                                data-img-alt="DBBL Nexus"
                                                                value="dbbl_nexus"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div id="mobileBanking">
                                                <select class="image-picker show-html">
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/bkash.png"
                                                            data-img-alt="bKash" data-img-class="first"
                                                            value="bkash"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/rocket.png"
                                                            data-img-class="" data-img-alt="DBBL Rocker"
                                                            value="dbblmobilebanking"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/abbank.png"
                                                            data-img-class="" data-img-alt="AB Bank"
                                                            value="abbank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/nexus.png"
                                                            data-img-alt="DBBL Nexus" value="dbbl_nexus"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/mcash.png" data-img-alt="Islami Bank M-Cash"
                                                            value="mobilebank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/tcash.png"
                                                            data-img-alt="Trust Bank t-cash"
                                                            value="mobilebank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/surecash.png"
                                                            data-img-alt="Sure Cash"
                                                            value="mobilebank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/okwallet.png"
                                                            data-img-alt="OK Wallet"
                                                            value="mobilebank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/mycash.png" data-img-alt="My Cash"
                                                            value="mobilebank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/nagad.png" data-img-alt="Nagad"
                                                            value="nagad"></option>
                                                </select>
                                            </div>
                                            <div id="ib">
                                                <select class="image-picker show-html">
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/citytouch.png"
                                                            data-img-alt="City Touch" value="city"  data-img-class="first"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/islamibank.png"
                                                            data-img-alt="Islami Bank"
                                                            value="ibbl"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/mtbl.png"
                                                            data-img-class="" data-img-alt="Mutual Trust Bank IB"
                                                            value="mtbl"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/abbank.png"
                                                            data-img-class="" data-img-alt="AB Bank"
                                                            value="abbank"></option>
                                                    <option data-img-src="{{url('/')}}/images/payment_logos_2/bankasia.png"
                                                            data-img-alt="Bank Asia"
                                                            value="bankasia"></option>
                                                </select>
                                            </div>
                                        </div>

Here's the js:

$('.tab a').on('click', function (e) {
    console.log('Tabs Switched');
    // alert('tab switched Layer 1');
    e.preventDefault();

    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    target = $(this).attr('href');

    $('.tab-content > div').not(target).hide();
    // $('.tab-content > div').not(target).children('select').data('picker').destroy();
    $('.tab-content > div').not(target).each(function (e) {

        // alert('tab switched Layer 2');
        // $(this).find("div .thumbnail").removeClass('selected');
        // $(this).find("img .image_picker_image").removeClass('first');
        $(this).children().find("select").data('picker').destroy();
        // $("select").data('picker').sync_picker_with_select();

    });
    // $('.tab-content > div').filter(target).data('picker').destroy();
    $('.tab-content > div').filter(target).children().find("select").imagepicker({limit: 1});
    $('.tab-content > div').filter(target).children().find("select").data('picker').sync_picker_with_select();

    // $('.tab-content > div').find("select").imagepicker({limit: 1});
    // $("select").data('picker').sync_picker_with_select();
    $(target).fadeIn(600);

});

1st Problem: $("select").data('picker').selected_values(); always returning selection of first tab, ignoring other active tab content. 2nd Problem: I am trying to adjust image picker with tab click and make image picker pick from selected tab. But I am failing and also getting error Uncaught TypeError: Cannot read property 'sync_picker_with_select' of undefined and Uncaught TypeError: Cannot read property 'destroy' of undefined

Any Help?

[Humni]

@easytraxbd can you please provide a JS Fiddle with the error you've encountered?

[Humni]

Closing as inactive