Question

我正在尝试使用Ajax加载新页面时更新jQuery变量。但由于某种原因，jQuery变量仅在第一次调用时更新。

在我的functions.php中我有

function middleman_jquery() {
wp_enqueue_script( 'middleman', get_bloginfo( 'template_directory' ) . '/js/middleman.js', array( 'jquery' ), null, true );
global $my_playlist;
$m_data = array( 'playlist' => 'something' );
wp_localize_script( 'middleman', 'm_post_info', $m_data );
}

add_action( 'wp_enqueue_scripts', 'middleman_jquery' );

......我有我的middleman.js

jQuery('#button').click(function() {
var msg = 'playlist: ' + m_post_info.playlist;
alert(msg);
});

在每个页面加载时，我加载了我的playlist.php文件，如果我print_r（$ m_data），它似乎工作正常。

<?php
global $playlist;
global $my_playlist;
global $wp_scripts;
?>


<?php while ( $playlist->have_posts() ) : $playlist->the_post(); 
$title = '"' . get_the_title() . '"';
$artist = '"' . rwmb_meta( 'artist_meta_artist' ) . '"';
$mp3_file = rwmb_meta( 'artist_meta_mp3', 'type=file' );
foreach ( $mp3_file as $mp3_array ) {
    $mp3 = substr(var_export($mp3_array['url'], true), 1, -1);
}
$oga_file = rwmb_meta( 'artist_meta_oga', 'type=file' );
foreach ( $oga_file as $oga_array ) {
    $oga = substr(var_export($oga_array['url'], true), 1, -1);
}

$my_playlist = $my_playlist . 
    '{' . 
        'title: ' . $title . ',' .
        'artist: ' . $artist . ',' .
        'mp3: "' . $mp3 . '",' .
        'oga: "' . $oga . '",' .
        'free: false, ' .
    '},';

endwhile; ?>


<?php
$m_data = array( 'playlist' => $my_playlist );
wp_localize_script( 'middleman', 'm_post_info', $m_data );
?>

我做错了什么？

Answer 1

好的，所以我最终弄明白了，我觉得怎么做错了。如果其他人正在寻找类似的解决方案，这适用于jPlayer。

原来我应该使用ajax调用来获取新信息。我编辑了很多东西，但是如果有人可以将它用于将来的参考，这就是最终的结果。

我应该注意，我使用clicked div的title属性来获取有关该曲目所在的专辑的信息。

在 functions.php 中，我写了以下内容：

function add_my_ajax_playlist() {
    wp_enqueue_script( 'my-ajax-playlist.js', get_bloginfo( 'template_directory' ) . "/js/my-ajax-playlist.js", array( 'jquery' ) );
}

add_action( 'wp_enqueue_scripts', 'add_my_ajax_playlist' );

function behave_ajax() { 
    // The $_REQUEST contains all the data sent via ajax
    if ( isset($_REQUEST) ) {

        $album = $_REQUEST['album'];

        // Prepare new query for selected album
        $playlist_args = array(
            'post_type' => 'tracks',
            'meta_key'  => 'artist_meta_track',
            'orderby'   => 'meta_value_num',
            'order'     => 'ASC',
            'tax_query' => array(
                array(
                    'taxonomy' => 'album',
                    'field' => 'slug',
                    'terms' => $album
                )
            )
        );

        $playlist = new WP_Query( $playlist_args );

        $my_playlist = "[";

        // Do the loop
        while ( $playlist->have_posts() ) : $playlist->the_post(); 
            $title = '"' . get_the_title() . '"';
            $artist = '"' . rwmb_meta( 'artist_meta_artist' ) . '"';
            $mp3_file = rwmb_meta( 'artist_meta_mp3', 'type=file' );
            foreach ( $mp3_file as $mp3_array ) {
                $mp3 = substr(var_export($mp3_array['url'], true), 1, -1);
            }
            $oga_file = rwmb_meta( 'artist_meta_oga', 'type=file' );
            foreach ( $oga_file as $oga_array ) {
                $oga = substr(var_export($oga_array['url'], true), 1, -1);
            }

            $my_playlist = $my_playlist . 
                '{' . 
                    'title: ' . $title . ',' .
                    'artist: ' . $artist . ',' .
                    'mp3: "' . $mp3 . '",' .
                    'oga: "' . $oga . '",' .
                    'free: false, ' .
                '},';
        endwhile;

        $my_playlist = $my_playlist . "]";

        // Assign the data from the loop to our $album variable
        $album = $my_playlist;

        // Now we'll return it to the javascript function
        // Anything outputted will be returned in the response
        echo $album;
    }

    // Always die in functions echoing ajax content
   die();
}

add_action( 'wp_ajax_nopriv_behave_ajax', 'behave_ajax' );
add_action( 'wp_ajax_behave_ajax', 'behave_ajax' );

然后我编写了我的jQuery脚本 my-ajax-playlist.js 并输入 / js / 子文件夹

var album = 'latest';
var slug = 'latest';

jQuery(document).ready(function($) {
    $('body').on('click', '.track-header', function() {

        var trackID = $(this).attr('id');
        var toInt = trackID.split("artist-"); // Passes an array [null,id]
        var value = parseInt(toInt[1]);

        // Check if we need to call a new playlist
        if (slug == $(this).attr('title')) {

            // Play the selected track
            myPlaylist.select(value);
            myPlaylist.play();

        } else {

            // Call new playlist through ajax

            slug = $(this).attr('title');
            album = slug;

            // This does the ajax request
            $.ajax({
                url: ajaxurl,
                data: {
                    'action':'behave_ajax',
                    'album' : album
                },
                contentType: "application/json",
                dataType: "text",
                success:function(data) {
                    // setPlaylist
                    console.log(data);
                    $my_data = eval(data);
                    myPlaylist.setPlaylist($my_data);
                },
                error: function(errorThrown){
                    console.log(errorThrown);
                },
                complete:function() {
                    setTimeout(function() {
                        myPlaylist.select(value);
                        myPlaylist.play();
                    }, 1500);
                }
            });  
        }       
    });
});

Devin的例子http://wptheming.com/2013/07/simple-ajax-example/帮助了我很多！

Wordpress：在Ajax调用上使用PHP更新jQuery变量

1 个答案: