$(this).qtip is not a function

Question

I've following code in my page which applies qtip on images. It displays dynamic content for each image through ajax post. But It doesn't display qtip after Thickbox/Jquery UI dialog closes and throws error : $(this).qtip is not a function

<script src="<%= Config.VirtualDir %>js/jquery.js?v=2" type="text/javascript"></script>
<script src="<%= Config.VirtualDir %>js/jquery.qtip-1.0.0-rc3.min.js?v=2" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function() {
     BindQtip();
});
 function BindQtip()
 {
$('image').each(function(){
                        $(this).live('click',function() {
                            var $img = $(this);
                            if('<%= objAdminAuth.GetUserID() %>' == $img.attr('data-uid').split('|')[0])
                            {                                        
                                return false;
                            }
                           if ($img.data('qtip')) {return false;} 
                            $(this).qtip({
                                content: 'Loading...',
                                style: {
                                    border: {
                                        width: 5,
                                        radius: 10
                                    },
                                    padding: 0,
                                    textAlign: 'center',
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'dark' // Style it according to the preset 'cream' style
                                },
                                hide: 'unfocus',
                                show: {
                                    when: 'click', // Don't specify a show event
                                    ready: true, // Show the tooltip when ready
                                    solo: true
                                },
                                position: {
                                    corner: {
                                        tooltip: 'rightMiddle', // Use the corner...
                                        target: 'bottomLeft' // ...and opposite corner
                                    }
                                },
                                api: {
                                    // Retrieve the content when tooltip is first rendered
                                    onRender: function() {

                                        var self = this;
                                        self.content = '';
                                        $.ajax({
                                            url: window.location.href,
                                            type: 'POST',
                                            data: 'call=ajax&uid=' + $img.attr('data-uid'),
                                            success: function(resp) {
                                                self.updateContent(resp);
                                            }
                                        });

                                    },
                                    onContentUpdate: function() {
                                        var self = this;
                                    }
                                }
                            });
                        });
                        });
}
</script>

All path are correct and other things work perfectly. Am I missing anything?

Any help would be appreciated.

Answer 1

It looks like you are using AJAX to insert HTML in the current document, and this HTML is generated by the script that displays the initial page as well. This means there's a high chance that <script> tags such as those for jQuery and qTip are included not only in your initial page but also inside your AJAX responses. If this is true, these "later" scripts will overwrite stuff inside window.$ with results identical to what you describe.

So, check if your AJAX includes the scripts and if it does, remove them. Everything should then work correctly.

Answer 2

I think this is likely the suspect line:

$(this).live('click',function() {

Have another look at live in the documentation, the idea is that you give it a selector, rather than an element, and it then matches that selector against all events of the given type that reach the document.

This odd and confusing syntax is one of the reasons live is deprecated in favor of on in v1.7 or later (or my preference, delegate, which was available as of v1.4.2). With both on and delegate, you specify the actual element you want to watch for events on, and then a selector to match against descendants for the delegation bit.

Answer 3

Your selector $('image') will select all HTML elements tagged <image> and I don't believe there are any ...