javascript - 通过 Ajax 加载的重力表单在表单提交时重定向到 admin-ajax.php

Question

我目前正在通过点击弹出窗口中的 ajax 加载重力表单，但是我的问题是，当您填写表单时，它会重定向到 admin-ajax.php？

你能帮我解决这个问题或者解释什么是错的吗？我现在有点迷路了。

所以基本上，我有这个代码循环通过我的自定义帖子类型，这个自定义帖子有一个自定义字段，其中插入了重力表单短代码。单击包含帖子 ID 的按钮后，它会通过 ajax 拉出目标重力表单简码。

add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
function misha_my_load_more_scripts() {

global $wp_query; 

// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');

// register our main script but do not enqueue it yet
wp_register_script( 'ajax-pagination', get_stylesheet_directory_uri() . '/ajaxloadscript.js', array('jquery') );

// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'ajax-pagination', 'ajaxpagination', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
));

wp_enqueue_script( 'ajax-pagination' ); }

自定义柱式循环

add_shortcode('display-magnets', 'display_magnets' );
function display_magnets(){

$html = ''; 

$args = array(
    'post_type' => 'marketing_formulas',
    'post_status'=>'publish',
    'posts_per_page' => -1,
    'orderby' => 'date',
    'order'   => 'ASC',
);


// it is always better to use WP_Query but not here
$the_query = new WP_Query($args);

if( $the_query->have_posts() ):
    
    while( $the_query->have_posts() ) : $the_query->the_post();

        $post_ID = get_the_ID() ;
    
        $html .= '<p><a class="misha_loadmore" href="#" value="'.$post_ID.'">Click me</a></p>';
        
    endwhile;
    
endif;
wp_reset_postdata();

//MODAL POUP HERE

$html .= '<div id="myModal" class="modal">';
    $html .= '<div class="modal-content">';
        $html .= ' <span class="close">&times;</span>';
        $html .= '<div class="loader"><h4>Dynamic Content Here</h4></div>';
        $html .= '<div class="dynamic-content-wrapper"></div>';
    $html .= '</div>';
$html .= '</div>';

return $html;

}

AJAX 调用

    add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' );
add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' );

   function my_ajax_pagination() {
    
   $mfID = $_POST['postID'];
    
   echo get_the_title($mfID);
   echo do_shortcode( get_field( "marketing_formula_gravity_form_shortcode", $mfID ) );
   
   die();
    }

AJAX 脚本

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
    
    $('.misha_loadmore').click(function(){
        event.preventDefault();
        
        var postID = $(this).attr('value');
        //console.log(postID);
    
        $.ajax({
        url: ajaxpagination.ajaxurl,
        type: 'post',
        data: {
            action: 'ajax_pagination',
            'postID': postID
        },
        beforeSend : function () {
                    $('div.loader h4').text("Loading...");
                },
        success: function( result ) {
            $('.dynamic-content-wrapper .ajax').remove();
            $('.dynamic-content-wrapper').append("<div class='ajax'>"+result+"</div>");
            $('div.loader h4').text("Content Loaded");
        }
    })
    
    });
});

任何指针将不胜感激！谢谢！

标签： javascriptphpjqueryajax