jQuery qTip callback not working

Question

I have qTip being called on items within a table..

$('#orders_table a[rel]').each(function (){
            $(this).click(function(){
                return false;
            }); 
            $(this).qtip({
                content: {
                    // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                    text: 'Loading...',
                    url: $(this).attr('rel'),
                    // Use the rel attribute of each element for the url to load
                    title: {
                        text: 'Order Number ' + $(this).text(),
                        // Give the tooltip a title using each elements text
                        button: 'Close' // Show a close link in the title
                    }
                },
                position: {
                    corner: {
                        target: 'bottomMiddle',
                        // Position the tooltip above the link
                        tooltip: 'topMiddle'
                    },
                    adjust: {
                        screen: true // Keep the tooltip on-screen at all times
                    }
                },
                show: {
                    when: 'click',
                    solo: true // Only show one tooltip at a time
                },
                hide: 'unfocus',
                style: {
                    tip: true,
                    // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                    border: {
                        width: 0,
                        radius: 4
                    },
                    name: 'light',
                    // Use the default light style
                    width: 570 // Set the tooltip width
                }
            })
        });

I then have the following callback function:

$('#orders_table a[rel]').each(function (){

            $(this).qtip({
            api: {
                onContentLoad:function() {
                        $('#select').change(function(){

                                alert('test');
                        });    
                }
            }                         
            })
        });

The qTip is loading dynamic content. That dynamic content has a select box with the id 'select'.

For some reason though, it doesn't seem to be calling the function AFTER the qTip has loaded the dynamic content.

Any ideas? I've tried onRender and onContentUpdate, which don't seem to be appropriate.

Thank you!

Answer 1

I'm not 100% sure if this is the same problem we had but when you set the anchor for the qTip to an ajax link, and that ajax link triggers a re-render of itself, qTip ends up getting un-rooted in DOM and callbacks and timers just stop working.

We solved this by anchoring qTip to a near-by element instead. Hope that helps.

Answer 2

The problem isn't the callback running, it's loading content with a specific ID. IDs are meant to be unique within a page, so instead use a class here, so that when more than one qTip loads, it won't invalidate the unique ID rule (causing #select to return the first of these elements, no all of them).

You can do that by changing your select to have a class (or not if it's the only <select> in the content), like this:

<select class="mySelect">

Then when binding, search for that element in the callback, like this:

$('#orders_table a[rel]').each(function (){
  $(this).qtip({
    api: {
      onContentLoad:function() {
        this.elements.content.find('select.mySelect').change(function() {
          alert('test');
        });    
      }
    }                         
  });
});

Also if you don't need the .each() loop for another reason, you can shorten it down to:

$('#orders_table a[rel]').qtip({
  api: {
    onContentLoad:function() {
      this.elements.content.find('select.mySelect').change(function() {
        alert('test');
      });    
    }
  }
});

Answer 3

Actually It needs a specific means different ID for different Control. So Try with different ID means pass some argument and make the Id different when You are creating the control dynamically.

It may solve you problem.