Wordpress + загрузка страниц Ajax + Гравитационные формы + Гравитационные формы разрыв страницы

У меня это настроено на данный момент:

Сайт WordPress, я использую что-то похожее на http://barbajs.org/ Так что каждый контент страницы загружается через ajax в <main></main> тег.

На одной из страниц (страница контактов) у меня есть гравитационная форма, и я использую разрыв страницы. Форма состоит из шагов, и каждый шаг загружается внутри страницы. Все работает, если первая страница, которую я загружаю, это та страница (страница контактов), но как только я перехожу на другую страницу и возвращаюсь, или если я перехожу на страницу контактов с предыдущей страницы, форма больше не работает,

Любые идеи о том, как это исправить. Это часть кода:

Wordpress: WYSIWYG с коротким кодом

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

На нагрузке у меня есть это:jQuery('#gform_wrapper_2').show() (Это единственное, что работает), поэтому я не получаю черную страницу.

Если я нажимаю на следующий шаг (он не загружается на следующем шаге) и я пробую это: Это я нашел в документации или на следующей кнопке под 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]);

Мне понадобится что-то вроде gform.init() в идеале:D или что-то подобное, что позволяет мне снова связать форму.

Большое спасибо!

Источник

2 ответа

Решение

Немного покопавшись в плагине гравитационной формы, я смог это исправить.

Итак, вот что я сделал... надеюсь, это поможет кому-то в будущем (не уверен, что это лучшее решение, но оно работает):

Таким образом, "основная" идея заключается в том, что barba или то, что вы используете (в моем случае, biggie), делает вызов ajax для новой страницы, и у вас будет что-то вроде функции ready / newPageReady, здесь вы делаете новый вызов ajax для получить вашу форму.

JS: (Учитывая, что gform использует jquery, вы можете использовать его)

 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();
}
Источник

Не уверен, что это правильное решение, но мне удалось сделать что-то вроде gform.init() вызывая теги скрипта в форме с eval(), Тезисы скриптов вставляются после каждой формы плагином.

Например, после того, как вы измените свою страницу с помощью ajax, сделайте что-то вроде этого:

// 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
}

Обязательно вызывайте это только после вызова AJAX.

Источник
Другие вопросы по тегам