Question

I’d like to allow users on my site to preview their posts before submitting them. I have several different forms on the page with class ‘.input_form’. The following code binds a click function to the buttons with class ‘.preview_post’ to serialize and process the respective form. Separately, I’m binding a qTip2 instance to the same buttons. This qtip displays a div, ‘#preview_pop’ that is populated dynamically by the AJAX call. I’ve included a slight delay in the qTip to allow for the AJAX call to return. The code below works okay, but doesn’t always appear on the first click. It seems there should be a better way of doing this with the qtip API. I just can’t get it to work after many hours of trying. Any help would be greatly appreciated!

    $('.preview_post').qtip( 
{
    content: {
        text: $('#preview_pop'),
        title: {
            text: 'Post Preview',
            button: 'Close'
            }
        },
    position: {
        my: 'bottom left',
        at: 'top left',
        viewport: $(window) // Keep it on screen if possible
    },
    show: { 
        event: 'click',
        modal: {
            on: true,
            blur: false
            },
        delay: 400
        },
    //hide: 'unfocus', // Hide the tooltip when it loses focus  
    style: {
           classes: 'ui-tooltip-light'
         }
});

$('.preview_post').click(function(){
    var preview_post =  $(this).parents('.input_form').serialize();
    //alert (preview_post);
    $.ajax({
        type:   'POST',
        url:    'get_preview.php',
        data: preview_post,
        success: function(data){
            //alert (data);
            $('#preview_pop').html(data);
        }   
    }); 
});  

Answer 1

The following is the solution from Craig at qTip– thanks!!! Hopefully this will help others out.

$('a').qtip({
    content: {
        text: $('#preview_pop'),
        title: {
            text: 'Post Preview',
            button: 'Close'
        }
    },
    position: {
        my: 'bottom left',
        at: 'top left',
        viewport: $(window) // Keep it on screen if possible
    },
    show: {
        event: 'click',
        modal: {
            on: true,
            blur: false
        },
        delay: 400
    },
    //hide: 'unfocus', // Hide the tooltip when it loses focus  
    style: {
        classes: 'ui-tooltip-light'
    },
    events: {
        show: function(event, api) {
            var preview_post = api.elements.target
                .parents('.input_form').serialize();

            api.set({
                'content.ajax': {
                    type: 'POST',
                    url: 'get_preview.php',
                    data: preview_post
                }
            });
        }
    }
});

​