qTip2中的Ajax形式

Question

I have a table with a list of names, their attributes and comments for each record. I want to be able to display the comments in a tooltip, and also be able to update those comments via Ajax. I would like to show a tooltip or a modal by clicking on a link. This modal will have a textarea with the comments preloaded. The user can modify the comments and submit them to the action page via Ajax. On successful submission the existing tooltip content will also need to be updated.

Any help would be greatly appreciated.

I am using the qtip2 and tipsy plugins.

I am loading the form in the qTip2 tooltip, onclick, through ajax. The link to the form is brought over from the rel tag. Now when I submit the form, it doesn't submit through ajax but directly the action page. This is my JS code:

    $('.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

Although an old question, I think that someone will find useful the solution proposed to a similar problem in the qtip2 developer's site and specifically in
http://craigsworks.com/projects/forums/showthread.php?tid=3680

Edit: in response to a comment I reproduce the main part of the answer as a reference:

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