1

我想允许我网站上的用户在提交之前预览他们的帖子。我在页面上有几个不同的表单，类为“.input_form”。以下代码将单击函数绑定到具有类“.preview_post”的按钮，以序列化和处理相应的表单。另外，我将 qTip2 实例绑定到相同的按钮。此 qtip 显示由 AJAX 调用动态填充的 div '#preview_pop'。我在 qTip 中包含了一个轻微的延迟，以允许 AJAX 调用返回。下面的代码可以正常工作，但并不总是出现在第一次点击时。使用 qtip API 似乎应该有更好的方法来做到这一点。经过几个小时的尝试，我无法让它工作。任何帮助将不胜感激！

    $('.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);
        }   
    }); 
});
4

1 回答 1

0

以下是来自 qTip 的 Craig 的解决方案——谢谢！！！希望这会帮助其他人。

$('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
                }
            });
        }
    }
});

​</p>

于 2012-04-06T18:37:16.890 回答