0

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

ページをロードするたびに、プレイリスト.php ファイルをロードします。

<?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 );
?>

私は何を間違っていますか？

4

1 に答える 1

0

わかりました、それで私は最終的にそれを理解しました、そして私はそれを行う方法が非常に間違っているように見えました. これは、他の人が同様のソリューションを探している場合に jPlayer で使用するためのものです。

新しい情報を取得するには、ajax 呼び出しを使用する必要があることがわかりました。いろいろ編集しましたが、こんな感じになりました、今後の参考になれば幸いです。

クリックした 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/は私を大いに助けてくれました!

于 2013-08-18T08:23:42.070 に答える