WordPress + Carga de página Ajax + Formularios de gravedad + Salto de página de formularios de gravedad

3 minutos de lectura

Tengo esto configurado en este momento:

Un sitio de WordPress, estoy usando algo similar a http://barbajs.org/
Entonces, cada contenido de la página se carga a través de ajax en un <main></main> etiqueta.

En una de las páginas (página de contacto), tengo un formulario de gravedad y está usando un salto de página. El formulario se divide en pasos y cada paso se carga dentro de la página. Todo funciona si la primera página que cargo es esa página (página de contacto), pero tan pronto como voy a una página diferente y vuelvo, o si voy a la página de contacto desde una página anterior, el formulario ya no funciona. .

Alguna idea de cómo arreglarlo. Esta es la parte del código:

WordPress: WYSIWYG con shortcode

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

En carga, tengo esto:
jQuery('#gform_wrapper_2').show() (Esto es lo único que funciona), así que no obtengo una página negra.

Si hago clic en el siguiente paso (no carga el siguiente paso) y probé esto: Esto lo encontré en la documentación o en el siguiente botón debajo 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]); 

necesitaré algo como gform.init() idealmente: D o algo similar que me permita vincular el formulario nuevamente.

¡Muchas gracias!

  • ¿Es vivir en algún lugar?

    – Shramee

    19 de septiembre de 2017 a las 3:40

  • Su descripción es lo suficientemente decente, pero necesito ver esto en vivo para poder depurar el código y ver qué está mal. O, al menos, ¿puede publicar el fragmento de código de carga de JavaScript y cómo se activa?

    – Mohamed Chaawa

    24/09/2017 a las 20:41

  • También puede considerar verificar los conflictos de tema/complemento como se describe en sus documentos de formas de gravedad docs.gravityforms.com/testing-for-a-themeplugin-conflict

    – Mohamed Chaawa

    24/09/2017 a las 20:46

Después de profundizar un poco en el complemento de forma de gravedad, pude solucionar esto.

Así que esto es lo que hice… espero que ayude a alguien en el futuro (no estoy seguro de si es la mejor solución, pero funciona):

Entonces, la idea “principal” es que barba o lo que sea que esté usando (en mi caso, Biggie) está haciendo una llamada ajax para una nueva página y tendrá algo así como una función ready/newPageReady, aquí hace una nueva llamada ajax a obtener su formulario.

JS: (Dado que gform usa jquery, puedes usarlo)

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

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

No estoy seguro si es la solución correcta, pero logré hacer algo como gform.init() llamando etiquetas de secuencias de comandos en el formulario con un eval(). El complemento inserta estos scripts después de cada formulario.

Por ejemplo, después de cambiar su página con ajax, haga algo como esto:

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

Asegúrese de llamar a esto solo después de una llamada ajax.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad