Select2启动引导程序弹出窗口

时间:2018-09-01 18:19:08

标签: jquery html bootstrap-4 jquery-select2

我正在将select2与Ajax和Bootstrap PopOver一起使用。 当用户位数超过x char时,我希望从select2启动一个弹出窗口。我已经做到了,但是浏览器总是出现错误。

来自浏览器的错误是:

computeAutoPlacement.js:24 Uncaught TypeError: Cannot read property 'indexOf' of undefined
at O (computeAutoPlacement.js:24)
at Object.onLoad (applyStyle.js:57)
at index.js:69
at Array.forEach (<anonymous>)
at new t (index.js:67)
at i.t.show (tooltip.js:286)
at HTMLDivElement.<anonymous> (popover.js:166)
at Function.each (jquery.min.js:3)
at init.each (jquery.min.js:3)
at init.i._jQueryInterface [as popover] (popover.js:149)

我的代码是:

$("#idSelectPacketName").select2({
    cache: true,
    tags: true,
    placeholder: "Insert name of packet",
    tokenSeparators: [','],
    ajax: {
        url: '.getName.php',
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params)
        {
            return {
                searchTerm: params.term, // search term
                actionId: "getSelector",
                jsonField: "idSelectPacketName"
            };
        },
        processResults: function (response)
        {
            return {
                results: response,
                id: response.term,
                text: response.term + " (new)",
                newOption: true
            };
        },
    },
    createTag: function (params)
    {
        var term = $.trim(params.term);

        if (term === '')
        {
            return null;
        }
        console.log(term.length);
        if(term.length>50)
        {
            launchGenericPopOver("idShowWherePutVolumeInput", errorTitle, "max 50 char" , "up");
            return null;
        }
        return {
            id: term,
            text: term + ' (new)'
        };
    },
});

The function that launch the popover is 

launchGenericPopOver("idX", errorTitle, "max 50 char" , "up");

函数是:

   function launchGenericPopOver(idPopOver, title, content, placement)
{
    $("#" + idPopOver).popover({
        html: true,
        trigger: 'manual',
        title:   "<div class='container' style='margin: 0px; padding: 0px;'>"+
        "<div class='row'  style='margin: 0px; padding: 0px;'>" +
        "<div class='col-sm-9' style='margin-top: 0.2rem; padding: 0px;'>"+
        title +
        "</div>" +
        "<div class='col-sm-3' style='margin: 0px; padding: 0px;'>"+
        "<button type='button' id='close' class='close' onclick='$(&quot;#" + idPopOver + "&quot;).popover(&quot;hide&quot;);'>&times;</button>" +
        "</div>" +
        "</div>" +
        "</div>",
        //These field are into the input but for one day ;)
        content: content,
        placement: placement,
        delay: {show: 200, hide: 0}
    }).popover('show');

    setTimeout(function ()
    {
        $("#" + idPopOver).popover('hide');
    }, 4000);
}

您有一些解决办法吗? 如果我不启动弹出窗口,它将正常工作。如果我在另一个区域(select2之外)启动弹出器,则弹出器效果很好。

此外,如果我使用sweet alert(实际上是弹出窗口),它也可以使用普通警报alert("Max char 50);

您有一些想法可以解决吗?谢谢!

0 个答案:

没有答案