ajax 设置中的引导选择工具提示仅显示一次

Posted

技术标签:

【中文标题】ajax 设置中的引导选择工具提示仅显示一次【英文标题】：bootstrap-select tooltip in ajax setup shows only once 【发布时间】：2021-09-14 03:31:03 【问题描述】：

我已经使用此源在引导选择选项上添加和显示引导工具提示。 How to add tooltip on each select option with bootstrap-select

静态设置一切正常

问题在于 ajax 设置。我能够在第一个下拉选择中获得工具提示。 当我第二次尝试选择相同的选择下拉列表时，它不会显示工具提示和与下一个选择下拉列表相同的行为

例如。 'imudetails' 选择并继续。

我有 5 个选择下拉选择，使用下面给出的更改方法一个接一个地激活，我已经厌倦了添加 $('.selectpickerdrop').selectpicker('refresh'); 在 ajax 成功函数的底部，但行为仍然相同。它只工作一次。

我正在使用 Bootstrap-select v-1.13.18 和 bootstrap tooltip, bootstrap version - 4.x 和 popper.js-1.16.1 jquery 3.x 和 jquery-ui 1.12.1。如果需要其他信息，准备连接。

html

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

选择更改功能

   //------------------------------------------------------------------------------------------
$("#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调用函数

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 选择工具提示启用

$('.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)
        );

    );

);

【问题讨论】：

【参考方案1】：

由于下拉列表是通过 ajax 填充的，因此使用 loaded.bs.select 事件将不起作用，因为触发此事件时，ajax 请求尚未完成（或尚未开始）。

如果您已经在使用.selectpicker('refresh')，我们可以利用refreshed.bs.select事件，并在该事件的回调中附加工具提示：

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

小提琴： https://jsfiddle.net/wskm4edz/

【讨论】：

感谢您的努力。即使我们使用shown.bs.select 也可以在 Ajax 中正常工作。周五发现的。 很高兴能帮上忙。是的，shown.bs.select 有效。但它经常被触发 - 每次下拉菜单对用户可见时 - 并且在某些情况下不需要更新工具提示。

以上是关于ajax 设置中的引导选择工具提示仅显示一次的主要内容，如果未能解决你的问题，请参考以下文章

带有手动触发和选择器选项的引导工具提示

将引导工具提示设置为 AJAX 调用结果

嵌入式持久引导日期选择器

如何仅在标签中的特定单词上显示工具提示？

引导工具提示应在更改选择框上启用

引导选择中的选项值显示在下拉列表之外