0

I'm submitting a form via Ajax:

    <form id="ajax-form-next" method="post" action="">
        <input type="hidden" name="nextPosts" id="nextPosts" value="<?php echo $postIDs; ?>"/>
        <input type="hidden" name="actualPosts" id="actualPosts" value="<?php echo $actualPostIDs; ?>"/>
        <input type="submit" name="next" value="=>"/>
    </form>

In 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' ) ) );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
add_action('wp_ajax_next_posts', 'next_posts_callback');
add_action('wp_ajax_nopriv_next_posts', 'next_posts_callback');

function next_posts_callback() {

    global $post;
    $nextPostIDs = array_map('intval', explode(',', $_POST['cadenaNext']));
    $prevPostIDs = preg_match( '/[0-9,]/', $_POST['cadenaPrev'] ) ? $_POST['cadenaPrev'] : '';
    $actualPostIDs = '';
    $counter = 0;
    $postIDs = '';
    foreach ( $nextPostIDs as $key => $value ) {
        $mypost = get_post( $value );
        $counter++;
        if( $counter <= 8 ) {
            $actualPostIDs .= $mypost->ID.',';
            // Page thumbnail and title.
            ?>
            <article id="post-<?php echo $mypost->ID; ?>" <?php echo $mypost->post_class; ?> style="display: inline-block; width: 20%; margin: 3px; padding: 0px; vertical-align: text-top;">
            <?php
            echo '<div class="thumbnail-review" style="width: 100%; height: 100%;"><a href="'.get_permalink( $mypost->ID ).'">'.get_the_post_thumbnail( $mypost->ID, 'thumbnail' ).'</a></div>';
            $audioFiles = get_post_meta($mypost->ID, "pistas-de-audio-mp3", array('output' => 'html'));
            echo '<div class="mp3-audio-files" style="display: none;">'.$audioFiles.'</div>';
            $audioFiles = get_post_meta($mypost->ID, "pistas-de-audio-ogg", array('output' => 'html'));
            echo '<div class="ogg-audio-files" style="display: none;">'.$audioFiles.'</div>';

            add_filter( 'the_title', 'max_title_length', 30);
            echo '<header class="entry-header" style=" padding: 10px 5px 5px 5px ; margin: 2px;"><h1 class="entry-title" style="font-size: 0.7em; margin: 5px;">';
            echo get_the_title( $mypost->ID );
            echo '</h1></header><!-- .entry-header -->';

            //max longitud artistas
            $max = 20; //define your max characters here    
            $terms = get_the_terms( $mypost->ID, 'Artistas' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
              echo '<div class="artista" style="font-size: 0.7em; margin-left: 15px; margin-top: 0px; padding: 3px;">';
              foreach ( $terms as $term ) {
                $term_name = $term->name;
                if( strlen( $term_name ) > $max ) {
                  $term_name = substr( $term_name, 0, $max ). " &hellip;";
                }
                echo '<a href="'.get_term_link( $term->slug, 'Artistas' ).'" title="'.$term->name.'">'.$term_name.'</a>';
              }
              echo '</div>';
            endif;
            echo '</article>';
            remove_filter( 'restrict_manage_posts', 'max_taxonomy_length');
            remove_filter( 'the_title', 'max_title_length');

        } else {
            $postIDs .= $mypost->ID.',';
        }
    }

        echo '</div>';

        //botones de siguientes y anteriores reviews
        $actualPostIDs = substr( $actualPostIDs, 0, strlen( $actualPostIDs ) - 1 );

        if( $postIDs ) {
            $postIDs = substr( $postIDs, 0, strlen( $postIDs ) - 1 );
        }
        if( $prevPostIDs ) {
            $prevPostIDs = substr( $prevPostIDs, 0, strlen( $prevPostIDs ) - 1 );
        }
        if( $postIDs || $prevPostIDs ) {

            if( $postIDs ) {
                echo '<form id="ajax-form-next" method="post" action="">';
                echo '<input type="hidden" name="actualPosts" id="actualPosts" value="' . $actualPostIDs . '"/>';
                echo '<input type="hidden" name="nextPosts" id="nextPosts" value="' . $postIDs .'"/>';
                echo '<input type="submit" name="next" value="=>"/>';
                echo '</form>';
            }
            if( $prevPostIDs )  {
                echo '<form id="ajax-form-prev" method="post" action="">';
                echo '<input type="hidden" name="actualPosts" id="actualPosts" value="' . $actualPostIDs . '"/>';
                echo '<input type="hidden" name="prevPosts" id="prevPosts" value="' . $prevPostIDs .'"/>';
                echo '<input type="submit" name="prev" value="<="/>';
                echo '</form>';
            }

        }

        die(); 
}

And it works just the first time. The second time I submit the form, it is not sending an Ajax request. The original page is loaded. Any idea of what is going on? (I know I have to use nonces, but first I want to make it work)

This is the ajax-search.js file:

jQuery(document).ready(function($) {
    var cadenaNext='';
    var cadenaPrev='';
    $('#ajax-form-next').submit(function(e){
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : 'next_posts' ,cadenaNext : $('#nextPosts').val(), cadenaPrev : $('#actualPosts').val() }, function(response) {
                $('#posts_container').hide(1000);
                setTimeout(function() {$('#posts_container').html(response).show(1000);}, 1000);
            });
    });

    $('#ajax-form-prev').submit(function(e){
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : 'next_posts' ,cadenaNext : $('#prevPosts').val(), cadenaPrev : $('#actualPosts').val() }, function(response) {
                $('#posts_container').hide(1000);
                setTimeout(function() {$('#posts_container').html(response).show(1000);}, 1000);
            });
    });

});
1

As the "Next", "Prev" links are the part of AJAX responded content, you need to use either 'live' or 'on' based upon the jQuery version you are using.

jQuery(document).ready(function($) {
    var cadenaNext='';
    var cadenaPrev='';
    $('#ajax-form-next').live("submit", function(e) { 
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : 'next_posts' ,cadenaNext : $('#nextPosts').val(), cadenaPrev : $('#actualPosts').val() }, function(response) {
                $('#posts_container').hide(1000);
                setTimeout(function() {$('#posts_container').html(response).show(1000);}, 1000);
            });
    });

    $('#ajax-form-prev').live("submit", function(e) { 
                e.preventDefault();
                jQuery.post(MyAjax.url, {action : 'next_posts' ,cadenaNext : $('#prevPosts').val(), cadenaPrev : $('#actualPosts').val() }, function(response) {
                $('#posts_container').hide(1000);
                setTimeout(function() {$('#posts_container').html(response).show(1000);}, 1000);
            });
    });

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.