Qtip2 show twice on fnDrawCallBack

Question

JavaScript and MVC.Net 4**

I got my table, with pagination. The qtip get data via Ajax On first load, the qtip show's one time, with the correct data. When i change a value (via ajax to BD), and redraw the table, the tooltop show twice , in the back, the old (with old data) ,and in front , new the (with correct data)

"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";    
        });
    }

And show this after edit the data: Image with the problem, red font show new and old qtip

Answer 1

This may seem like a very bad solution but it may work.

What happens if you "timeout" qtip?

Maybe the Call Stack is kinda messy with qtip.

I would do this:

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);

Then maybe is re-stacked in the Javascript Call Stack.

Let me know if it works!

Hope it helps.