Loading by Ajax a plugin that also uses Ajax

Question

I'm having problems with some "contact form" plugins whose use Ajax. The problem is that I use Ajax to call the plugin. Then the plugin is loaded, but when I try to submit the form, I'm redirected to this URL: SITE/wp-admin/admin-ajax.php, when it should send the Ajax request, and only a 0 is printed on the window.

I think I'm using Ajax correctly:

functions.php:

function theme_name_scripts() {

    wp_enqueue_script( 'mi-script-ajax',get_bloginfo('stylesheet_directory') . '/js/ajax-search.js', array( 'jquery' ) );
    wp_localize_script( 'mi-script-ajax', 'MyAjax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}


function llamadaAjax_callback() {
    $pageId = 0;
    $newSlug = '';
    $reviewSlug = '';
    $sPostType = 'any';
    $sTemplatePart = '';
    $sTaxonomy= false;

    //Busqueda
    if( isset(  $_POST['search'] ) ) {
        $sTemplatePart = 'search-ajax';
        $sPostType = 'any';
    }
    //Links
    elseif( isset(  $_POST['href'] ) ) {
        $pageId = preg_match( '/^http:\/\/.+\/\?page_id=\d+$/', $_POST['href'] ) ? substr( strrchr( $_POST['href'], '=' ), 1 ) : 'no-page' ;
        if( $pageId === 'no-page' && preg_match( '/^http:\/\/.+\/\?(news|reviews|entrevistas|radio_shows|podcasts|cat|tag)=[a-zA-Z0-9\-]+$/', $_POST['href'] ) ) {
            $newSlug = substr( strrchr( $_POST['href'], '=' ), 1 );
        } elseif( $pageId === 'no-page' && preg_match( '/^http:\/\/.+\/\?(artistas|sellos|generos)=[a-zA-Z0-9\-]+$/', $_POST['href'] ) ) {
            $sTaxonomy = true;
        }
        //$pageName = get_page_template_slug( intval( $pageId ) );
        if( $pageId !== 'no-page' ) {
            if( $pageId === '8' ) {
                $sPostType = 'any';
                $sTemplatePart = 'home-ajax';
            } elseif( $pageId === '22' ) { 
                $sPostType = 'reviews';
                $sTemplatePart = 'reviews-rvw-ajax';
            } elseif( $pageId === '6' ) {
                $sPostType = 'news';
                $sTemplatePart = 'noticias-news-ajax';
            } elseif( $pageId === '109' ) {
                $sPostType = 'entrevistas';
                $sTemplatePart = 'entrevistas-ajax';
            } elseif( $pageId === '112' ) {
                $sPostType = 'radio-shows';
                $sTemplatePart = 'radio-shows-ajax';
            } elseif( $pageId === '412' ) {
                $sTemplatePart = 'podcasts-ajax';
            } elseif( $pageId === '415' ) {
                $sTemplatePart = 'contacto-ajax';
            }

        } elseif( $sTaxonomy === true ) {
            $sTemplatePart = 'reviews-rvw-ajax';
            $sPostType = 'reviews'; 
        } elseif( $newSlug !== '' ) {
            $sTemplatePart = 'single-ajax';
            $sPostType = 'any';
            if( preg_match( '/^http:\/\/.+\/\?cat=\d+$/', $_POST['href'] ) ) {
                 $sTemplatePart = 'category-ajax';  
                 $sPostType = 'category';       
            } elseif( preg_match( '/^http:\/\/.+\/\?tag=[A-Za-z0-9\-]+$/', $_POST['href'] ) ) {
                 $sTemplatePart = 'tags-ajax';  
                 $sPostType = 'tag';        
            }

            //get_template_part( 'single-ajax' );
        }

    //Siguiente y Anterior
    } elseif( isset( $_POST['cadenaAll'] ) && ( isset( $_POST['cadenaPrev'] ) || isset( $_POST['cadenaNext'] ) ) ) {
        if( isset(  $_POST['pageName'] ) ) {
            if( $_POST['pageName'] === 'reviews' ) {
                $sPostType = 'reviews';
                $sTemplatePart = 'next_reviews-rvw-ajax';
            }
            elseif( $_POST['pageName'] === 'news' ) {
                $sPostType = 'news';
                $sTemplatePart = 'next_noticias-news-ajax';
            }
            elseif( $_POST['pageName'] === 'entrevistas' ) {
                $sPostType = 'entrevistas';
                $sTemplatePart = 'next_entrevistas-ajax';
            }
            elseif( $_POST['pageName'] === 'radio-shows' ) {
                $sPostType = 'radio-shows';
                $sTemplatePart = 'next_radio-shows-ajax';
            }
            elseif( $_POST['pageName'] === 'podcasts' ) {
                $sPostType = 'podcasts';
                $sTemplatePart = 'next_podcasts-ajax';
            }
            elseif( $_POST['pageName'] === 'categories' ) {
                $sPostType = 'category';
                $sTemplatePart = 'next_categories-ajax';
            }
            elseif( $_POST['pageName'] === 'tags' ) {
                $sPostType = 'tag';
                $sTemplatePart = 'next_tags-ajax';
            }
            elseif( $_POST['pageName'] === 'search' ) {
                $sPostType = 'any';
                $sTemplatePart = 'next_search-ajax';
            }
        }
    }


    //Submenu
    echo '<div id="submenu"><ul>';
    if( $sPostType !== '' ) {
        if( $sPostType == 'any' || $sPostType == 'category' || $sPostType == 'tag' ) {
            $allCategories = get_categories();
            foreach( $allCategories as $cat ) {
                echo '<li class="type-category"><a href="' . get_category_link( $cat->cat_ID ) . '">' . $cat->name . '</a></li>'; 
            }
        } else {

            global $wpdb;
            // set the target relationship here
            $post_type = $sPostType;
            $taxonomy = 'category';

            $terms_ids = $wpdb->get_col( $wpdb->prepare( "
                SELECT
                    tt.term_id
                FROM
                    {$wpdb->term_relationships} tr,
                    {$wpdb->term_taxonomy} tt,
                    {$wpdb->posts} p
                WHERE 1=1
                    AND tr.object_id = p.id
                    AND p.post_type = '%s'
                    AND p.post_status = 'publish'
                    AND tr.term_taxonomy_id = tt.term_taxonomy_id
                    AND tt.taxonomy ='%s'
                ", $post_type, $taxonomy ) );

            $terms = get_terms( $taxonomy, array(
                'include' => $terms_ids,
                'orderby' => 'name',
                'order' => 'ASC'
            ) );


             //$aTypeCategories = get_categories( array( 'post_type' => $type, 'number' => '10'  ) );
             foreach( $terms as $cat ) {
                echo '<li class="type-category"><a href="' . get_category_link( $cat->term_id ) . '">' . $cat->name . '</a></li>'; 
             }
        }
    } else {
        echo '<li class="type-category" style="color: transparent">Sin categorías</li>'; 
    }
    echo '</ul></div>';
    if( $sTemplatePart ) get_template_part($sTemplatePart);
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
add_action('wp_ajax_llamadaAjax', 'llamadaAjax_callback');
add_action('wp_ajax_nopriv_llamadaAjax', 'llamadaAjax_callback');

and in the /js/ajax-search.js file:

jQuery(document).ready(function($) {

    var linksPages = $('.menu-menu-container a');

    linksPages.on('click',function(e){
                e.preventDefault();
                $('#content').addClass('cortinaOut');
                if( !$(this).attr('href').match(/=8$/) ) {
                    $('#slider').fadeOut(800);
                }
                jQuery.post(MyAjax.url, {action : 'llamadaAjax' ,href : $(this).attr('href') }, function(response) {
                setTimeout(function() {
                    $('#content').html(response).fadeIn();
                    $('#content').removeClass('cortinaOut');
                }, 500);
            });
    });
});

I'm trying to found out the problem since two days ago. Any idea of how to solve it?

Answer 1

Your javascript is heavily reliant on inline attributes for event handling, rather than jQuery based event handling, and you're making AJAX calls to a different domain than the one you're currently on

Answer 2

A number of problems are present here.

First and foremost, it appears that the first code block you posted is present in your functions.php file, or another theme file. If this is true, I urge you to consider WordPress's loading routine - themes are completely irrelevant to AJAX requests, and therefore WordPress will never touch any theme file of its own accord when processing an AJAX requests. What I'm getting at is that if that code is indeed in a theme file, then the ajax_callback() function is not available to WordPress when it's processing AJAX requests.

The next problem is that ajax_callback() never seems to get registered as an AJAX handler. In order to do so, you need to register the function with a custom action prefixed with wp_ajax_ and/or wp_ajax_nopriv as described in the Codex, with the complete action format wp_ajax_{custom action name} and/or wp_ajax_nopriv_{custom action name}. Doing so would look similar to the following (if not present in a plugin class):

function ajax_callback() {
  ...
}

add_action( 'wp_ajax_my_custom_action', 'ajax_callback' );        // For registered users
add_action( 'wp_ajax_nopriv_my_custom_action', 'ajax_callback' ); // For unregistered users

If this code is not in a plugin class or PHP namespace, I highly recommend that you use a more descriptive name than ajax_callback in order to remove the possibility of naming collisions.

If this code is in a plugin class or PHP namespace, the second argument of add_action needs to be modified to fit the appropriate PHP callback format.

Finally, in your posted JavaScript the action key is set to ajax. This key is what tells WordPress which registered AJAX handler to execute. As it stands, your JavaScript function would invoke WordPress to attempt to execute any handlers registered to the wp_ajax_ajax action. If your AJAX callback is indeed registered to this action, I recommend you change it as wp_ajax_ajax is excessively generic and has a high probability of resulting in naming collisions (if not general confusion).

The action key should be set to the {custom action name} portion of the action(s) referenced above. In order to call the ajax_callback() function as registered to the wp_ajax_my_custom_action/wp_ajax_nopriv_my_custom_action actions as done above, the action key in your AJAX request should be my_custom_action.

I recommend that you read the Codex entry on AJAX in Plugins for a better understanding of how AJAX works in WordPress.