Question

我有一个表格，列出了每个记录的名称，属性和注释。我希望能够在工具提示中显示注释，并且还能够通过Ajax更新这些注释。我想通过点击链接来显示工具提示或模态。这个模态将有一个带有预加载注释的textarea。用户可以修改注释并通过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();
                        });
                    }
                }
            })
        })

Answer 1

虽然这是一个老问题，但我认为有人会发现在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(); });
})

qTip2中的Ajax表单

1 个答案: