1

我有一张表，其中列出了每条记录的名称、属性和注释。我希望能够在工具提示中显示评论，并且还能够通过 Ajax 更新这些评论。我想通过单击链接来显示工具提示或模式。此模式将有一个预加载评论的文本区域。用户可以修改评论并通过 Ajax 将它们提交到操作页面。成功提交后，现有的工具提示内容也需要更新。

任何帮助将不胜感激。

我正在使用 qtip2 和 Tipsy 插件。

我正在通过 ajax 在 qTip2 工具提示、onclick 中加载表单。表单的链接是从 rel 标签中获得的。现在，当我提交表单时，它不是通过 ajax 提交，而是直接通过操作页面提交。这是我的 JS 代码：

    $('.commentsedit').each(function()
        {
            // We make use of the .each() loop to gain access to each element via the "this" keyword...
            $(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: '<img class="throbber" src="images/throbber.gif" alt="Loading..." />',
                    ajax: {
                        url: $(this).attr('rel') // Use the rel attribute of each element for the url to load
                    },
                    title: {
                        text: $(this).attr('title'), // Give the tooltip a title using each elements text
                        button: true
                    }
                },
                position: {
                    at: 'bottom center', // Position the tooltip above the link
                    my: 'top right',
                    viewport: $(window), // Keep the tooltip on-screen at all times
                    effect: false // Disable positioning animation
                },
                show: {
                    event: 'click',
                    solo: true // Only show one tooltip at a time
                },
                hide: 'unfocus',            
                style: {
                    classes: 'my_width_setting_class qtip-wiki qtip-light qtip-shadow'
                },
                events: {
                    render: function(event, api) {
                        // Capture the form submission
                        $('form', this).bind('submit', function(event) {
                            // Grab and store input elements
                            var inputs = $(':textarea', this);

                            // Common ajax error handler
                            function errorHandler(jqXHR, message) {
                                // Set the error and show/hide it
                                $('.error', api.elements.tooltip).html(message || '').toggle(!!message);
                            }

                            // Setup AJAX request
                            $.ajax({
                                url: 'commentsform.cfm',
                                data: $(this).serialize(),
                                type: 'post',
                                dataType: 'json',
                                success: function(data, status, jqXHR) {
                                    // On success, show message and refresh after 2 seconds
                                    if(data.status === 'success'){
                                        api.set('content.text', data.message + ' Redirecting...');
                                        setTimeout(function(){ window.location.reload() }, 2000);
                                    }

                                    // Call error handler on error status too.
                                    else { errorHandler(jqXHR, data.message); }
                                },
                                error: errorHandler,

                                // Disable/Enable input elements
                                beforeSend: function() { inputs.attr('disabled', 'disabled'); },
                                complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
                            });

                            // Prevent normal form submission
                            event.preventDefault();
                        });
                    }
                }
            })
        })
4

1 回答 1

0

虽然是一个老问题，但我认为有人会发现在 qtip2 开发人员站点中提出的类似问题的解决方案很有用，特别是在
http://craigsworks.com/projects/forums/showthread.php?tid=3680

编辑：作为对评论的回应，我复制了答案的主要部分作为参考： 

$('a[class=qTipForm][rel]').each(function(){
    var formName = $(this).attr('name');

    $(this).qtip({
        content: {
            //text: '<iframe src="'+$(this).attr('rel')+'" height="400px" width="700px" frameborder="0"></iframe>',
            text: 'Loading...',
            ajax: {
                url: $(this).attr('rel'),
                success: function(data) {
                    // Set the tooltip contents
                    this.set('content.text', data);

                    // Bind the form submit event
                    $('#' + formName).bind('submit', function(event) {
                        // Grab and store input elements
                        var inputs = $(':input','#' + formName);

                        // Common ajax error handler
                        function errorHandler(jqXHR, message) {
                            // Set the error and show/hide it
                            $('.error', api.elements.tooltip).html(message || '').toggle(!!message);
                        }

                        // Setup AJAX request
                        $.ajax({
                            url: $('#' + formName).attr('action'),
                            data: $('#' + formName).serialize(),
                            type: 'post',
                            dataType: 'json',
                            success: function(data, status, jqXHR) {
                                // On success, show message and refresh after 2 seconds
                                if(data.status === 'success'){
                                    api.set('content.text', ' Redirecting...');
                                    setTimeout(function(){ window.location.reload() }, 2000);
                                }

                                // Call error handler on error status too.
                                else { errorHandler(jqXHR, data.message); }
                            },
                            error: errorHandler,

                            // Disable/Enable input elements
                            beforeSend: function() { inputs.attr('disabled', 'disabled'); },
                            complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
                        });

                        // Prevent normal form submission
                        event.preventDefault();
                    })
                }
            },
            title: {
                text: $(this).attr('title'),
                button: true
            }
        },
        position: {
            my: 'center',
            at: 'center', // Position the tooltip above the link
            target:$(window),
            effect: false // Disable positioning animation
        },
        show: {
            event: 'click',
            solo: true, // Only show one tooltip at a time
            modal: true
        },
        hide: false,
        style: {
            classes: 'viewTipForm ui-tooltip-rounded ui-tooltip-light',
            tip: false
        }
    })

    .click(function(event) { event.preventDefault(); });
})
于 2014-05-06T13:47:10.183 回答