bootstrap-select tooltip in ajax setup shows only once

Question

I have achieved adding & showing bootstrap tooltip on bootstrap select options using this source. How to add tooltip on each select option with bootstrap-select

on static setup all working fine

The problem is with ajax setup. I am able to get tooltip on first dropdown select. When I try to select for same select dropdown for second time it does not show tooltip and same behavior with next select dropdown

eg. 'imudetails' select and onwards.

I have 5 select dropdown select which gets activate one after another using on change methods given below and I have tired adding $('.selectpickerdrop').selectpicker('refresh');
at bottom of ajax success function but the behavior is still same. It only works for once.

I am using Bootstrap-select v-1.13.18 with bootstrap tooltip, bootstrap version - 4.x and popper.js-1.16.1 jquery 3.x and jquery-ui 1.12.1. Ready to connect if additional information required.

html

<select class="selectpickerdrop form-control" data-show-subtext="true" data-live-search="true" data-size="5" id="marketdetails" name="marketdetails"></select>

select on change functions

   //------------------------------------------------------------------------------------------
$("#marketdetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {
        portfolioTypeId = 'NT_ID_007';
        control = $('#mudetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#mudetails").val("0");
            $('#mudetails').attr('disabled', false);
            $("#budetails").val("0");
            $('#budetails').attr('disabled', true);
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', true);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#mudetails").val("0");
        $('#mudetails').attr('disabled', true);
        $("#budetails").val("0");
        $('#budetails').attr('disabled', true);
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
    $('.selectpickerdrop').selectpicker('refresh');
});


$("#mudetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {
        portfolioTypeId = 'NT_ID_001';
        control = $('#budetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#budetails").val("0");
            $('#budetails').attr('disabled', false);
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', true);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#budetails").val("0");
        $('#budetails').attr('disabled', true);
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

$("#budetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {

        portfolioTypeId = 'NT_ID_004';
        control = $('#sbudetails');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#sbudetails").val("0");
            $('#sbudetails').attr('disabled', false);
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', true);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#sbudetails").val("0");
        $('#sbudetails').attr('disabled', true);
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

$("#sbudetails").on('change', function () {
    parentAttributeValue = $(this).find('option:selected').attr('value');
    if (parentAttributeValue != 0) {

        portfolioTypeId = 'NT_ID_017';
        control = $('#sbu2details');
        control.html('');
        GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control);
        if (RecordCount > 0) {
            $("#sbu2details").val("0");
            $('#sbu2details').attr('disabled', false);
            $('.selectpickerdrop').selectpicker('refresh');
        }
    }
    else {
        $("#sbu2details").val("0");
        $('#sbu2details').attr('disabled', true);
        $('.selectpickerdrop').selectpicker('refresh');
    }
});

// ajax call function

function GetHierarchyDetails(portfolioTypeId, parentAttributeValue, control) {
//$('.tooltip-inner').remove();
//$('.tooltip-arrow').remove();
RecordCount = 0;
$.ajax({
    type: "POST",
    dataType: "json",
    url: "../../UserInterfaceV2/AL/Transaction.asmx/GetHierarchyDetails",
    data: JSON.stringify({ portfolioTypeId: portfolioTypeId, parentAttributeValue: parentAttributeValue }),
    async: false,
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        //GetToolTip();            
        data = $.parseJSON(data.d);
        if (data.length > 0) {
            control.empty();
            control.append($("<option></option>").val("0").html("Select"));
            for (var index = 0; index < data.length; index++) {
                {
                    if (data[index].PortfolioId && data[index].PortfolioId != '' && data[index].PortfolioName && data[index].PortfolioName != ''
                        && data[index].PortfolioName != null && data[index].PortfolioId != null)
                    {
                        control.append($('<option title="' + data[index].PortfolioName + ' [' + data[index].PortfolioId + ']'
                            + '">'+'</option>').val(data[index].PortfolioId).html(data[index].PortfolioName
                            + ' [' + data[index].PortfolioId + ']'));
                        RecordCount++;
                    }
                }
            }
            
        };
        $('.selectpickerdrop').selectpicker('refresh');  
    },
    error: function (data) {
        alert('Oops! Something went wrong, could you please try again!');
    }
});

}

// Bootstrap select tooltip enable

$('.selectpickerdrop').selectpicker({
    liveSearch: true
}).on('loaded.bs.select', function (e) {
    var $el = $(this);
    var $lis = $el.data('selectpicker').selectpicker.main.elements;

    $($lis).each(function (i) {

        var tooltip_title = $el.find('option').eq(i).attr('title');

        $(this).tooltip({
            'title': tooltip_title || '',
            'placement': 'top',
            //'selector': '.selectpicker',
            container: $(this)
        });

    });

});

score 1 · Accepted Answer · edited Aug 04 '21 at 08:48

1

Since the dropdowns are populated via ajax, using the loaded.bs.select event won't work, because when this event is triggered, the ajax request is not completed (or not yet started).

If you are already using .selectpicker('refresh'), we can take advantage of refreshed.bs.select event and attach the tooltips in the callback of this event:

$('.selectpickerdrop').selectpicker({
    liveSearch: true
}).on('loaded.bs.select', function (e) {
  // append static tooltips
})
.on('refreshed.bs.select', function(e) {
  // append dynamic tooltips
});

Fiddle: https://jsfiddle.net/wskm4edz/

edited Aug 04 '21 at 08:48

marc_s

732,580
175
1,330
1,459

answered Jul 24 '21 at 07:21

andreivictor

7,628
3
48
75

Thanks for your kind effort. Even if we use `shown.bs.select` works fine with Ajax. Discovered it on Friday. – amar ghodke Jul 26 '21 at 05:22
1

I'm glad I could help. Yeah, `shown.bs.select` works. But it is triggered very often - every time the drop-down menu was visible to the user - and in some cases the tooltips do not need to be updated. – andreivictor Jul 26 '21 at 05:39

bootstrap-select tooltip in ajax setup shows only once

1 Answers1