AJAX로 양식 처리, qTip2로 표시

Question

내 사이트의 사용자가 제출하기 전에 게시물을 미리 볼 수있게하고 싶습니다. 페이지에서 '.input_form'클래스를 사용하여 여러 가지 양식이 있습니다. 다음 코드는 click 함수를 '.preview_post'클래스의 버튼에 바인딩하여 해당 양식을 직렬화하고 처리합니다. 별도로 qTip2 인스턴스를 동일한 버튼에 바인딩합니다. 이 qtip은 AJAX 호출에 의해 동적으로 채워지는 div 인 '#preview_pop'을 표시합니다. 나는 AJAX 호출이 돌아올 수 있도록 qTip에 약간의 지연을 포함시켰다. 아래 코드는 정상적으로 작동하지만 첫 번째 클릭에는 항상 표시되는 것은 아닙니다. qtip API로이 작업을 수행하는 더 좋은 방법이 있어야합니다. 나는 노력의 많은 시간 후에 그것을 작동하게 할 수 없다. 어떤 도움이라도 대단히 감사하겠습니다!

Answer 1

다음은 qTip에서 Craig의 해결책입니다 - 감사합니다 !!! 바라기를 이것은 다른 사람들을 도울 것입니다.

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