Question

我想在我的网站上允许用户在提交之前预览他们的帖子。我在页面上有几种不同的表单，其中包含类＆＃39; .input_form＆＃39;。以下代码将点击功能绑定到具有类＆＃39; .preview_post＆＃39;的按钮。序列化和处理相应的表格。另外，我将qTip2实例绑定到相同的按钮。这个qtip会显示一个div，＆＃39;＃preview_pop＆＃39;这是由AJAX调用动态填充的。我在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);
        }   
    }); 
});

Answer 1

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

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

使用AJAX序列化表单，进程，在qTip2中显示

1 个答案: