(Wiki página de Backend Frontend Template Pro: the WordPress Plugin Template)
De una respuesta AJAX a un formulario sólo hay algunos pasos a considerar:
- Shortcode inicial
- Explicación En los datos HTML estará el formulario con el dato ‘action’, los datos se leerán con jQuery(“”).serializeArray() var form_data = jQuery(“#bft_shortcode_form_test_response”).serializeArray(); Además, los datos del formulario tendrán un nonce si el usuario está logueado, para seguridad adicional $script_push_nonce = “”; if(is_user_logged_in()) { $script_push_nonce = ‘form_data.push( { “name” : “‘.$this->plugin_slug.’_security”, “value” : ‘.$this->plugin_slug.’_ajax_nonce } );’; }
- Ejemplo completo public function bft_shortcode_form_test( $atts = [], $content = null, $tag = ” ) { $script_push_nonce = “”; if(is_user_logged_in()) { $script_push_nonce = ‘form_data.push( { “name” : “‘.$this->plugin_slug.’_security”, “value” : ‘.$this->plugin_slug.’_ajax_nonce } );’; } ob_start(); require plugin_dir_path( dirname( __FILE__ ) ) . “public/partials/bft-shortcode-form-test-static.php”; $html = ob_get_clean(); return $html; } HTML <form method=”post” action=”#” name=”bft_shortcode_form_test_response” class=”bft_shortcode_form_test_response” id=”bft_shortcode_form_test_response”> <input type=”hidden” name=”action” value=”bft_shortcode_form_test_response”> <div> <label><?=$this->__(“Name”)?></label> <input type=”text” name=”bft_shortcode_form_test_response_name” id=”bft_shortcode_form_test_response_name” value=””> </div> <div> <label><?=$this->__(“Surname”)?></label> <input type=”text” name=”bft_shortcode_form_test_response_surname” id=”bft_shortcode_form_test_response_surname” value=””> </div> <div> <input type=”submit” value=”<?=$this->__(“Test form”)?>” id=”bft_shortcode_form_test_response_submit”> </div> </form> <div id=”bft_shortcode_form_test_response_container”></div> <div id=”bft_shortcode_form_test_response_error_container”></div> <script> (function( $ ) { “use strict”; $(document).on(“submit”, “.bft_shortcode_form_test_response”, function(e) { e.preventDefault(); var form_data = jQuery(“#bft_shortcode_form_test_response”).serializeArray(); <?=$script_push_nonce?> $(“#bft_shortcode_form_test_response_container”).html(“”); $(“#bft_shortcode_form_test_response_error_container”).text(“”); jQuery.ajax({ url : your_plugin_ajax_url, type : “post”, data : form_data, success : function( response ) { console.log(“<?=$this->__(“AJAX successful”)?>”) if (typeof response.success !== “undefined” && false === false) { console.log(“<?=$this->__(“AJAX failed”)?>”); <?=$this->plugin_slug?>_error_wordpress_show(response, “bft_shortcode_form_test_response_error_container”, “bft_shortcode_form_test_response_container”); } else { $(“#bft_shortcode_form_test_response_container”).html(response.data.html); } }, fail : function( jqXHR, textStatus, errorThrown) { console.log(“<?=$this->__(“AJAX failed”)?>”); <?=$this->plugin_slug?>_error_conection_show(jqXHR, textStatus, errorThrown, “bft_shortcode_form_test_response_error_container”, “bft_shortcode_form_test_response_container”); } }); }); <?=$this->bft_ajax_functions()?> })( jQuery ); </script>
- respuesta AJAX
- Explicación Un formulario AJAX comprobará el nonce para usuario logeados antes de usar los datos con check_ajax_referer(), si el nonce falla la ejecución parará if(is_user_logged_in()) { check_ajax_referer($this->plugin_slug.”_form_public_nonce”, $this->plugin_slug.”_security” ); } unset($_POST[“action”]); unset($_POST[$this->plugin_slug.”_security”]);
- Ejemplo completo private function define_public_hooks() { //bft_shortcode_form_test_response $this->loader->add_action( ‘wp_ajax_bft_shortcode_form_test_response’, $plugin_public, ‘bft_shortcode_form_test_response’ ); $this->loader->add_action( ‘wp_ajax_nopriv_bft_shortcode_form_test_response’, $plugin_public, ‘bft_shortcode_form_test_response’ ); } public function bft_shortcode_form_test_response( ) { if(is_user_logged_in()) { check_ajax_referer($this->plugin_slug.”_form_public_nonce”, $this->plugin_slug.”_security” ); } unset($_POST[“action”]); unset($_POST[$this->plugin_slug.”_security”]); if ( !isset($_POST[“bft_shortcode_form_test_response_name”]) || !isset($_POST[“bft_shortcode_form_test_response_surname”])) { $this->error_send_json($this->__(“An error of validation ocurred, contact the admin of the site”)); } ob_start(); require plugin_dir_path( dirname( __FILE__ ) ) . “public/partials/bft-shortcode-form-test-response.php”; $html = ob_get_clean(); $data = array(); $data[“html”] = $html; $return = [ “error” => [], “data” => $data, ]; wp_send_json($return); wp_die(); return $html; }
- Pruébalo tu mismo Crea una page, inserta un bloque de shortcode y pon [bft-shortcode-form-test]
0 comentarios