Отправка Ajax не выводит результаты многоступенчатой ​​формы результатов на той же странице в Wordpress - PullRequest
0 голосов
/ 03 сентября 2018

Я пытаюсь сделать многошаговые формы с переключателями, которые будут использоваться для фильтрации некоторых пользовательских сообщений, используя ajax. Здесь вы можете увидеть пример. В настоящее время, когда пользователь заполняет и отправляет форму, страница перезаправляется, и, очевидно, форма отправляется, но она снова показывает форму и результатов нет.

Что у меня так далеко:

  1. Внешний (не встроенный) файл jQuery с кодом ajax

    jQuery(document).ready(function ($) {
    
     var current_fs, next_fs, previous_fs; 
                    var left, opacity, scale; 
                    var animating; 
    
                    $(".next").click(function () {
                        if (animating) return false;
                        animating = true;
    
                        current_fs = $(this).parent();
                        next_fs = $(this).parent().next();
    
    
                        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active")
                        $("#progressbar li").eq($("fieldset").index(current_fs)).addClass("done");
    
    
                        next_fs.show();
    
                        current_fs.animate({
                            opacity: 0
                        }, {
                            step: function (now, mx) {
    
                                scale = 1 - (1 - now) * 0.2;
                                left = (now * 50) + "%";
                                opacity = 1 - now;
                                current_fs.css({
                                    'transform': 'scale(' + scale + ')',
                                    'position': 'absolute'
                                });
                                next_fs.css({
                                    'left': left,
                                    'opacity': opacity
                                });
                            },
                            duration: 800,
                            complete: function () {
                                current_fs.hide();
                                animating = false;
                            },
    
                        });
                    });
    
    
    
                    $(".previous").click(function () {
                        if (animating) return false;
                        animating = true;
    
                        current_fs = $(this).parent();
                        previous_fs = $(this).parent().prev();
    
                        $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    
                        previous_fs.show();
    
                        current_fs.animate({
                            opacity: 0
                        }, {
                            step: function (now, mx) {
    
                                scale = 0.8 + (1 - now) * 0.2;
    
                                left = ((1 - now) * 50) + "%";
    
                                opacity = 1 - now;
                                current_fs.css({
                                    'left': left
                                });
                                previous_fs.css({
                                    'transform': 'scale(' + scale + ')',
                                    'opacity': opacity
                                });
                            },
                            duration: 800,
                            complete: function () {
                                current_fs.hide();
                                animating = false;
                            },
    
                        });
                    });
    
                    $('.del').hide();
                      $('.scelt-con').hide();
    
                    $("input[name='prodotto']").change(function () {
                        var strText = $("input[name='prodotto']:checked").val();
                        var result = strText;
                        $('#prodotto').text(result);
                        $('#uno').show(500);
                        $ ('.prod').show(500);
                        return false;
    
                    });
    
                    $("input[name='livello']").change(function () {
                        var strText = $("input[name='livello']:checked").val();
                        var result = strText;
                        $('#livello').text(result);
                        $('#due').show(500);
                        $ ('.liv').show(500);
                    });
    
                    $("input[name='ruolo']").change(function () {
                        var strText = $("input[name='ruolo']:checked").val();
                        var result = strText;
                        $('#ruolo').text(result);
                        $('#tre').show(500);
                        $ ('.role').show(500);
                    });
    
                    $("input[name='stato']").change(function () {
                        var strText = $("input[name='stato']:checked").val(); 
                        var result = strText;
                        $('#stato').text(result);
                        $('#qua').show(500);
                        $ ('.sta').show(500);
                    });
    
    $("#idForm").submit(function(e) {
    
    var form = $('#msform');
    var url = ajax_object.ajax_url;
    var fdata = {};
    fdata['action'] = 'process_form';
    fdata['prodotto'] = form.find('input[name="prodotto"]').val();
    fdata['livello'] = form.find('input[name="livello"]').val();
    fdata['ruolo'] = form.find('input[name="ruolo"]').val();
    fdata['stato'] = form.find('input[name="stato"]').val();
    
    $.ajax({
           type: "POST",
           url: url,
           data: fdata,
           success: function(resp)
           {
               var res_tab = $("#res-tab");
    
               res_tab.empty();
               res_tab.append(resp.data);
    
               $("fieldset").hide();
               res_tab.show();
           },
           error: function(error) {
               console.log(error);
           },
        });
    
        e.preventDefault(); // avoid to execute the actual submit of the form.
    });
      });
    
  2. Постановка в очередь файла js и вызов ajax в моем functions.php

      function enqueue_radio() {
            if (is_page_template('modello-2.php')){ 
      wp_enqueue_script( 'radio', get_stylesheet_directory_uri() . '/js/radio.js', array('jquery'), '', false );
              wp_localize_script( 'radio', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')) );
                   }
                 }
                add_action( 'wp_enqueue_scripts', 'enqueue_radio' );
    
    
    
    function process_form() { 
    
    global $wpdb;
    $prodotto = $_POST["prodotto"];       
    $livello = $_POST["livello"];       
    $ruolo = $_POST["ruolo"];       
    $stato = $_POST["stato"]; 
    ?>
    <div id="res-tab" class="row">
    <?php
    
        $args = array( 
                    'post_type' => 'corsi',
                    'posts_per_page' => -1,
                    'orderby' => 'title',
                    'order'   => 'ASC',
                    'tax_query' => array(
                            array(
                                'taxonomy' => 'prodotto',
                                'field' => 'name',
                                'terms' => $prodotto,
                                ),
                            array(
                                'taxonomy' => 'livello',
                                'field' => 'name',
                                'terms' => $livello,
                                ),
                            array(
                                'taxonomy' => 'ruolo',
                                'field' => 'name',
                                'terms' => $ruolo,
                                ),
                            array(
                                'taxonomy' => 'stato',
                                'field' => 'name',
                                'terms' => $stato,
                                ),        
                            ) 
                        );
        $soluzioni = new WP_Query($args);
            if ( $soluzioni->have_posts() ) {
                while ( $soluzioni->have_posts() ) {
                $soluzioni->the_post(); ?>
    
        <div class="col-md-6 largo">
            <div class="blocco">
                <h3 style="font-size:20px;line-height:23px;"><?php the_title();?><br/>
                <?php  
                $codice = get_post_meta($post->ID, '_corsi_codice', true);
                echo '( '.$codice .' )'; ?></h3>
                <p>
                    <?php the_content();?>
                </p>
                <div class="dettagli row">
                    <div class="col-md-6 no-pads">
                        <h5>PRODOTTO</h5>
                        <p>
                            <?php echo get_the_term_list( $post->ID, 'prodotto', '',', ', '' ); ?>
                        </p>
                        <h5>AUDIENCE</h5>
                        <p>
                            <?php echo get_the_term_list( $post->ID, 'ruolo',  '',', ', ''); ?>
                        </p>
                    </div>
                    <div class="col-md-6 no-pads">
                        <h5>MODALITà DI EROGAZIONE</h5>
                        <p>
                            <?php  $modalita = get_post_meta($post->ID, '_corsi_modalita', true);
                echo $modalita; ?>
                        </p>
                        <h5>DURATA</h5>
                        <p>
                            <?php  $durata = get_post_meta($post->ID, '_corsi_durata', true);
                echo $durata; ?>
                        </p>
                    </div>
                    <a href="<?php echo the_permalink()?>">
                        <button>DETTAGLI</button>
                    </a>
                </div>
    
            </div>
        </div>
        <?php   } 
    
        wp_reset_postdata(); } 
        else {
                echo '<br/>NO POST FOUND';
            }
    
    ?>
    </div>
    
    <?php         
    
      //  wp_send_json_success( $soluzioni);   
    
        wp_die();
     }
    
     add_action( 'wp_ajax_nopriv_process_form', 'process_form' );     
    
    1. Шаблонная часть для отображения формы

http://formazione -salesforce.enigen.it / Prova-2 /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...