Wordpress + Ajax tải trang + Trọng lực hình thức + Trọng lực trang hình thức phá vỡ

Question

Tôi đã này thiết lập tại thời điểm này:

Một trang web WordPress, Tôi đang sử dụng một cái gì đó tương tự như http://barbajs.org/ Vì vậy, mỗi nội dung trang được tải thông qua ajax vào thẻ <main></main>.

Trong một trong các trang (trang liên hệ), tôi có biểu mẫu trọng lực và đang sử dụng ngắt trang. Biểu mẫu được thực hiện thành các bước và mỗi bước được tải bên trong trang. Mọi thứ đều hoạt động nếu trang đầu tiên tôi tải là trang (trang liên hệ), nhưng ngay sau khi tôi truy cập một trang khác và quay lại hoặc nếu tôi truy cập trang liên hệ từ trang trước, biểu mẫu sẽ không hoạt động nữa .

Bất kỳ ý tưởng nào về cách khắc phục. Đây là phần mã:

Wordpress: WYSIWYG với shortcode

[gravityform id="2" title="false" description="false" ajax="true"] 

On tải, tôi có điều này: jQuery('#gform_wrapper_2').show() (Đây là điều duy nhất mà hoạt động), vì vậy tôi không có được một màu đen trang.

Nếu tôi bấm vào bước tiếp theo (nó không load bước tiếp theo) và tôi đã cố gắng này: này tôi tìm thấy trên các tài liệu hoặc trong nút bên cạnh dưới onclick = "..."

jQuery(document).trigger('gform_post_conditional_logic', [2, null, true]) 
jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){}) 
jQuery(document).trigger('gform_post_render', [2, 1]) 
jQuery("#gform_target_page_number_2").val("2"); 
jQuery("#gform_2").trigger("submit",[true]); 

tôi sẽ cần một cái gì đó như gform.init() lý tưởng: D hoặc một cái gì đó tương tự cho phép tôi liên kết các hình thức một lần nữa.

Cảm ơn rất nhiều!

Answer 1

Sau khi đào một chút vào plugin hình thức trọng lực, tôi đã có thể sửa lỗi này.

Vì vậy, đây là những gì tôi đã làm .. hy vọng nó sẽ giúp ai đó trong tương lai (không chắc chắn nếu giải pháp tốt nhất nhưng nó hoạt động):

Vì vậy, các "chính" ý tưởng là Barba hoặc bất cứ điều gì bạn đang sử dụng (trong trường hợp của tôi biggie) đang thực hiện một cuộc gọi ajax cho một trang mới và bạn sẽ có một cái gì đó giống như một hàm ready/newPageReady, ở đây bạn thực hiện một cuộc gọi ajax mới để lấy biểu mẫu của bạn.

JS: (Với gform sử dụng jquery bạn có thể sử dụng nó)

ready(done) { 

    ajax.get(APP.AJAX_URL + '?action=get_form', { 

     success: (object) => { 

     //console.log(object.data) 

     jQuery('.main-content-wrapper').append(object.data) 
     jQuery('body #gform_wrapper_2').show() 

    } 
    }) 
} 


addEvents() { 

    // this will check everytime a form is loaded 

    jQuery(document).bind('gform_page_loaded', this.gform) 

} 


gform(event, form_id, current_page) { 

    //Here the form is loaded but not showed.. you can do something like this 

    TweenMax.fromTo('.gform_wrapper', 1.2, {autoAlpha: 0}, {autoAlpha:1}) 
} 

functions.php

add_action('wp_ajax_nopriv_get_form', 'get_form'); 
add_action('wp_ajax_get_form', 'get_form'); 

function get_form() { 

    gravity_form(id_of_your_form,false, false, false, false, true); 

    die(); 
} 

Answer 2

Không chắc chắn nếu đó là giải pháp đúng nhưng tôi cố gắng làm điều gì đó như gform.init() bởi gọi thẻ tập lệnh dưới biểu mẫu với số eval(). Các kịch bản lệnh được chèn sau mỗi biểu mẫu bằng plugin.

Ví dụ, sau khi bạn thay đổi trang của bạn với ajax, làm một cái gì đó như thế này:

// After changing page with ajax : 

var scripts = myNewForm.querySelectorAll('script'); // where "myNewForm" is the container including the new form added after an ajax call 

for (var i = 0; i < scripts.length; i++) { // "For" loop in case there is more than one script added by the plugin 

    eval(scripts[i].innerHTML); // --> this will init the new form 
} 

Hãy chắc chắn để gọi đây là chỉ sau khi một cuộc gọi ajax.