Qtip2在fnDrawCallBack上顯示兩次

Question

JavaScript和MVC.Net 4 **

我有桌子，有分頁。 qtip通過Ajax獲取數據首次加載時，qtip會顯示一次帶有正確數據的數據。 當我更改一個值（通過Ajax轉換為BD）並重新繪制表格時，工具欄顯示兩次，在后面顯示舊的（帶有舊數據），在前面顯示新的（帶有正確數據）

"fnDrawCallback": function () {  //Al volver a dibujar (pintar) la tabla, tambien reinvoca al script de ToolTip
        $('#divTablaTurnos .tooltip-etiqueta').each(function () {
            var idturno = $(this).attr('id');
            $("#divTablaTurnos .tooltip-etiqueta #" + idturno).qtip({
                content: {
                    overwrite: true,
                    text: function (event, api) {
                        api.set('content.text', "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\"></ul>");
                        $.ajax({
                            type: 'GET',
                            url: '/Turnos/TraerListaEtiquetas',
                            dataType: "json",
                            data: { todas: todas, idturno: idturno }
                        })
                            .done(function (data) {
                                var contenido = "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\">";
                                for (i = 0; i < data.length; i++) {
                                    contenido += "<li>" + data[i].toString() + "</li>";
                                };
                                contenido += "</ul>";
                                api.set('content.text', contenido);
                            });
                        //return "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\"></ul>";
                    }
                },
                show: { effect: function () { $(this).fadeTo(500, 1); } },
                hide: { effect: function () { $(this).slideUp(); } },
                position: { target: 'mouse', adjust: { x: 5, y: 5 }, viewport: $(window) }
            });
            //$("#divTablaTurnos .tooltip-etiqueta #" + idturno).qtip('api').options.content.title.text = "asdf";    
        });
    }

並在編輯數據后顯示： 帶問題的圖像，紅色字體顯示新舊qtip

Answer 1

這似乎是一個非常糟糕的解決方案，但它可能會起作用。

如果您“超時” qtip，會發生什么？

也許調用棧有點與qtip雜亂無章。

我會這樣做：

setTimeout(function(){
   $("#divTablaTurnos .tooltip-etiqueta #" + idturno).qtip({
            content: {
                overwrite: true,
                text: function (event, api) {
                    api.set('content.text', "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\"></ul>");
                    $.ajax({
                        type: 'GET',
                        url: '/Turnos/TraerListaEtiquetas',
                        dataType: "json",
                        data: { todas: todas, idturno: idturno }
                    })
                        .done(function (data) {
                            var contenido = "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\">";
                            for (i = 0; i < data.length; i++) {
                                contenido += "<li>" + data[i].toString() + "</li>";
                            };
                            contenido += "</ul>";
                            api.set('content.text', contenido);
                        });
                    //return "Etiquetas: <ul class=\"tooltip-basic\" type=\"square\"></ul>";
                }
            },
            show: { effect: function () { $(this).fadeTo(500, 1); } },
            hide: { effect: function () { $(this).slideUp(); } },
            position: { target: 'mouse', adjust: { x: 5, y: 5 }, viewport: $(window) }
        });
}, 0);

然后，也許將其重新堆疊在Javascript Call Stack中。

讓我知道它是否有效！

希望能幫助到你。