Сериализация формы, обработка с помощью AJAX, отображение в qTip2 - PullRequest
Новая
       18

Сериализация формы, обработка с помощью AJAX, отображение в qTip2

1 голос
/ 30 марта 2012

Я бы хотел, чтобы пользователи на моем сайте могли просматривать свои сообщения перед их отправкой.У меня есть несколько различных форм на странице с классом .input_form.Следующий код связывает функцию щелчка с кнопками с классом .preview_post для сериализации и обработки соответствующей формы.Отдельно я связываю экземпляр qTip2 с теми же кнопками.Этот qtip отображает div, #preview_pop, который динамически заполняется вызовом AJAX.Я включил небольшую задержку в qTip, чтобы позволить возврат вызова AJAX.Код ниже работает хорошо, но не всегда появляется при первом клике.Кажется, должен быть лучший способ сделать это с помощью API qtip.Я просто не могу заставить его работать после многих часов попыток.Любая помощь будет принята с благодарностью! 

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

1 Ответ

0 голосов
/ 06 апреля 2012

Ниже приведено решение от Крейга из 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
                }
            });
        }
    }
});

1004 *

...