1

各レコードの名前、属性、およびコメントのリストを含むテーブルがあります。コメントをツールチップに表示したり、Ajax を介してそれらのコメントを更新したりしたいと考えています。リンクをクリックしてツールチップまたはモーダルを表示したいと思います。このモーダルには、コメントがプリロードされたテキストエリアがあります。ユーザーはコメントを変更し、Ajax を介してアクション ページに送信できます。送信が成功したら、既存のツールチップ コンテンツも更新する必要があります。

どんな助けでも大歓迎です。

私はqtip2とほろ酔いプラグインを使用しています。

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 に答える