AJAX 로드 후 Contact Form 7 Form에서의 AJAX의 이니블화

AJAX 로드 후 Contact Form 7 Form에서의 AJAX의 이니블화

검색을 시도했지만 AJAX 페이지/폼 로드 방법에 대한 결과만 반환됩니다.지금 하고 있는 것은 AJAX(Contact Form 7)를 통해 폼을 로드하는 것입니다.그 폼에서 AJAX 제출을 다시 유효하게 하는 방법을 알고 싶습니다.CF7에서는 가능합니까?

Contact Form 7은 페이지 로드 시 실행되는 init 함수를 호출합니다.AJAX를 사용하여 폼을 로드하는 경우 폼 로드 후 함수를 호출해야 합니다.

조사 내용:

plugins/contact-form-7/includes/js/scripts.js

함수의 정의를 위해wpcf7InitForm.

편집: 이 함수를 호출하면 매번 새로운 로딩 로고가 삽입됩니다.안타깝게도 jQuery를 사용하여 DOM에서 중복 로더를 삭제하는 것보다 더 좋은 솔루션을 찾을 수 없었습니다.

function initContactForm() {
    jQuery('div.wpcf7 > form').wpcf7InitForm();
    jQuery('form.wpcf7-form')
        .each(function() {
            $j(this).find('img.ajax-loader').last().remove();
        });
}

이 동작은 wpcf7 버전 4.8에서 변경되었습니다.그 이후 콜은

wpcf7.initForm( jQuery('.wpcf7-form') );

jQuery가 필요하지 않지만 노드를 전달할 수도 있습니다.이와 같은 것(복수 형식 가능)

var wpcf7_form = document.getElementsByClassName('wpcf7-form');
[].forEach.call(wpcf7_form, function( form ) {
  wpcf7.initForm( form );
});

아직 jQuery로 작성되어 있지만 기능에서 활성화(jQuery.ready())할 필요는 없습니다.jQuery.form을 삭제했습니다.

버전 5.4 이상에서는 다음 코드를 사용합니다.

document.querySelectorAll(".wpcf7 > form").forEach((
                function(e){
                    return wpcf7.init(e)
                }
            )
        );

아약스 응답에 이걸 넣어모든 양식이 다시 초기화됩니다.

저는 이 문제에 대한 해결책을 찾기 위해 지난 3시간을 보냈지만 답이 없는 질문만 발견했어요. 하지만 해결책을 찾은 것 같아요. 이것이 당신과 이 문제에 대해 다른 사람들에게 도움이 되기를 바랍니다.

저 같은 경우에는 프리티포토에서 인라인 라이트박스에 CF7 폼을 넣으려고 했습니다(Fancybox 등에서도 마찬가지라고 생각합니다).문제는 이러한 인라인 라이트박스가 라이트박스 내에서 AJAX를 통해 콘텐츠를 생성하며 그 전에 CF7 스크립트가 로드되어 폼의 AJAX 제출이 되지 않는다는 것입니다.

저는 jQuery.를 통해 CF7 스크립트를 받은 후 예쁜 사진 라이트박스를 열었을 때 트리거된 이벤트에 참여했습니다.당신의 경우 AJAX를 통해 콘텐츠를 생성한 직후에 다음과 같이 해야 한다고 생각합니다.

jQuery.get("/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20");
jQuery.get("/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.1");

경로와 버전이 동일한지 확인하고, 그렇지 않으면 변경합니다.

그러면 폼이 새로 고쳐지고 AJAX 제출이 다시 활성화됩니다.

도움이 됐으면 좋겠다!

아약스나는 그 제품을 사용해야만 했습니다.wpcf7.submit vs "vs" vs "vs" vswpcf7.init

사용 예:

wpcf7.submit(document.querySelector('.wpcf7-form'));

언급URL : https://stackoverflow.com/questions/28866152/enabling-ajax-on-contact-form-7-form-after-ajax-load