Search code examples
javascriptphpjqueryqtip

qTip has no method 'qtip' for dynamic content

I have this interface in my system. enter image description here

I assign class mailListBtn for all Successful-[] Failed-[] link. When then user click at Successful-[] Failed-[] it will call this js code

$(".mailListBtn").click(function(){

var currentId = $(this).attr('id');
    currentId = currentId.split("_"); //Need to split because ID like MCBTN_13
    var actualId = currentId[1];

if($("#C_"+actualId).is(":visible"))
    $("#C_"+actualId).hide("slow","swing");

$("img#LOADER_"+actualId).show();

var dataString ="action=getMailListByID"+
        "&mailID="+actualId;

            $.ajax({
            type: "POST",
            url: "include/get.php",
            data: dataString,
            cache: false,
            async: true,
            success: function(html)
            {   
                $("#SPAN_"+actualId).empty();
                $("#SPAN_"+actualId).append(html);

                $("#C_"+actualId).show("slow","swing");
                $("img#LOADER_"+actualId).hide();

                if($("#C_"+actualId).is(":visible"))
                    $("#CC_"+actualId).show();
                else
                    $("#CC_"+actualId).hide();

                reQtip();

            }   
        });

    });

reQtip() code

function reQtip()
{
    $("img[rel*='template/qTipUpdateContact.php?refID=']").each(function()
{
    $(this).qtip({
        content: {
                            text: '<img class="throbber" src="images/loader.gif" alt="Loading..." />',
        ajax: {
            url: $(this).attr('rel'), 
            once: false
             },
        title: {
            text: 'UPDATE CONTACT INFO FOR NEWSSID - ' + $(this).attr('title'),
            button: true
            }
        },position: {
            at: 'middle left', // Position the tooltip above the link
                my: 'right middle',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
        },
        show: {
            event: 'click mouseenter',
            solo: true // Only show one tooltip at a time
            },
        hide: {
            event: 'click'
              },
        style: {
            classes: 'qtip-dark'
            }
        });
});
}

If you can see, after the content load successful, I call reQtip() function so that the content that have qTip is activate the qTip for each element. The content look like below:-

enter image description here

As you can see, mouse hover at the green button will popup the qTip like below:-

enter image description here

The problem is, for the first time when I click on Successful-[0] Failed-[4] the content display and the qTip function normally. Than I click on Successful-[4] Failed-[9] the content display but qTip error. The error from inspect code in google chrome is Uncaught TypeError: Object [object Object] has no method 'qtip' . For your info, I already include qTip js file inside <head> in my php page. Why the qTip only can run for the first content but error on the second content.

I try to detect if the qTip function exist or not. For that, I add this piece of code on top of my reQtip() function.

if($.fn.qtip)
    alert("Function exist");
else
    alert("Function not exist");

The result is for the first content it alert "Function exist" than I hover to the icon and the qTip displayed. Than I click another Successful-[] Failed-[] to retrieve another content, than I got alert "Function not exist". My question, is qTip remove their function after we use it?

Solution

  • Found solution for my problem in this post

    The problem is with my qTip page. I have js script and include js file inside my qTip page. Remove this or place it inside initial page will solve the problem.

    Thank you.