Как изменить шорткод на моем веб-сайте WordPress после того, как пользователь взаимодействует с кнопкой фронтальной кноп ⇐ Javascript

[Anonymous]

Я использую Royal Audio Player в качестве плагина для веб -сайта, который я создаю, и я хочу иметь что -то похожее на то, что этот парень создал для своего сайта за кадром. По сути, я хочу, чтобы текст над аудиоплеерной игрой с различными категориями, доступными для нажатия, и когда он нажимается пользователем, он изменит игрока в соответствующий список воспроизведения в зависимости от того, на какую нажмите. До сих пор у меня есть 2 шорты для аудиоплеере: < /p>
[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Narration" start_track_id="preset"]
< /code>
У аудиоплеера есть раскрывающийся список, который может использовать пользователь, который при нажатии на нажатие будет отображать другие категории, и они могут выбрать оттуда. Но я хочу, чтобы пользователь мог видеть все категории в определенное время с одним игроком. Насколько мне известно, изменение шорткода с использованием Ajax - единственный способ, которым я действительно могу достичь своей цели. /29746210 < /p>
Так что я получил код, как это: < /p>
add_action('wp_ajax_switch_audio_playlist', 'switch_audio_playlist');
add_action('wp_ajax_nopriv_switch_audio_playlist', 'switch_audio_playlist');

function switch_audio_playlist() {
if (isset($_POST['playlist'])) {
$playlist = sanitize_text_field($_POST['playlist']);

echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="' . $playlist . '" start_track_id="preset"]');
$html = ob_get_clean();

wp_send_json_success($html);
} else {
wp_send_json_error('No playlist provided.');
}
}
< /code>
function enqueue_custom_ajax_script() {
wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), null, true);

wp_localize_script('custom-ajax-script', 'ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');

< /code>
html/js:

Audiobooks |
Narration

[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]



jQuery(document).ready(function($) {
$('.switch-playlist').on('click', function() {
let playlist = $(this).data('playlist');
console.log('Switching to playlist:', playlist);

$.ajax({
url: ajax_object.ajax_url, // This comes from wp_localize_script
method: "POST",
data: {
action: 'fetch_shortcode',
playlist: playlist
},
success: function(response) {
console.log('AJAX response:', response);
$('#audio-player-container').html(response.data);
}
});
});
});



< /code>
After fixing a localization issue, i've come to this error:
When i load the page, the audio player is loading as intended:My inspector before I click on the Narration Button
But when I press on the narration button the page shows nothing and the inspector looks like this:
Inspector after I click on the narration button
Is there something wrong that i'm doing, and if so what could it be?

Подробнее здесь: https://stackoverflow.com/questions/794 ... ts-with-fr