0

I have a javascript on a website page that populates a dropdown menu in a (contact 7) form with track names from an audio playlist generated using the generic wordpress playlist generator.

It was working well for 6 months but has now stopped working! The only thing that has changed on the website are the regular wordpress & plugin updates so I'm thinking it may be due to those (not sure)? I've spent the day trying to learn about debugging javascripts but am no nearer to understanding how to locate what is causing the script to stop working.

The part of the javascript relating to the populating of the dropdown form field (who's id is reactionForm_strongestTrack) is:

document.addEventListener('DOMContentLoaded', () => {
    var field_to_update = document.getElementById('reactionForm_strongestTrack');
    field_to_update.innerHTML = '';
  
    var elOptNew = document.createElement('option');
    elOptNew.text = '---'
    elOptNew.value = '';
    field_to_update.add(elOptNew);
    field_to_update.options[0].selected = true;

    // Search for all playlist-captions inside the playlist-tracks list.
    // 'Currently playing' has a playlist-caption too, 
    // limiting to the tracklist excludes it
    document.querySelectorAll('.wp-playlist-tracks .wp-playlist-caption')
    .forEach( // The following arrow function will be called for each element
      track => {
        // There are nested elements but we just want the plaintext    
        let track_name = track.innerText;
        // Create a new element and append to the select as before
        let elOptNew = document.createElement('option');
        elOptNew.text = track_name.replace("&", "&");
        elOptNew.value = track_name;

        field_to_update.add(elOptNew);
      })
    


    field_to_update.options[0].selected = true;

The javascript is called up and inserted in the page footer using the following code placed in the website's funtions.php file:

function theme_enqueue_scripts() {
    if (in_category ('28') ) {
    wp_enqueue_script( 'reactionform_js', get_theme_file_uri() . '/wp-includes/js/reactionform_js.js', array(), false, true ); }

The live website page where this can be seen in action is https://www.futureproofpromotions.com/three-minute-heroes-vol-2-various-artists-album/

Can anybody explain why this javascript has stopped successfully populating the dropdown menu in the form?

I am very new to javascript but have a limited knowledge of php.

Any help with the above issue would be most appreciated.

Many thanks

Phil

Phil Legg
  • 53
  • 1
  • 9
  • [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – RiggsFolly Jan 30 '21 at 18:30
  • `wp_enqueue_script()` is PHP, you cannot run PHP from JS in a browser – RiggsFolly Jan 30 '21 at 18:34
  • Did you look for errors in the browser's Console? – ADyson Jan 30 '21 at 18:35
  • Are you using a browser with JavaScript enabled ? – mister_cool_beans Jan 30 '21 at 20:57
  • @ADyson yes I am using a JavaScript enabled browser. I have also tried looking at the page on multiple browsers, computer and phones. When you click on the field “favourite track” on the page https://www.futureproofpromotions.com/three-minute-heroes-vol-2-various-artists-album/ do you see a list of tracks - or do you just see a ’- - -‘? Let me know – Phil Legg Jan 30 '21 at 21:14
  • @RiggsFolly ??? - it was working and now it’s not. How do you look for errors in the console? – Phil Legg Jan 30 '21 at 21:19
  • You open the browser's Developer Tools (press F12 in most browsers) and there is a section called Console. Errors and warnings may appear there while the page is loading and running – ADyson Jan 30 '21 at 23:55
  • @PhilLegg, if you mean the list of songs under the player - it works. I see the list of songs there. – Maxim Dyuzhinov Jan 31 '21 at 09:51
  • No, I'm referring to the list of songs that should show in the "Strongest track" field of the form. This used to happen via the javascript shown in my original question but has stopped working? As for earlier questions about errors showing in the Dev Tools / Console: No I can't see any errors relating to this script - any ideas? The only thing I can think that's changed on the website are the various wordpress & plugin updates – Phil Legg Jan 31 '21 at 10:55

0 Answers0