Cannot read property 'rippleEffect' of undefined

[Pratyush1197]

I have set up express.js for the application but when I try to open sunburst I am getting the error Uncaught TypeError: Cannot read property 'rippleEffect' of undefined.

[kelvinau]

can you post your code here or a live example of it?

[Pratyush1197]

Yeah here it is-
`

<div class="primary-nav">        
        <nav role="navigation" class="menu">
            <a href="#" class="logotype">LOGO<span>TYPE</span></a>
            <div class="overflow-container">
                    
                   
                   <%
                      for (var i = 0; i < items.length; i++){
                     var value = '';     
                      value = items[i].split('/')[6] %>
                    <li id="qw" onclick="wave.play();" data-val='<%= value %>'class="editField"><%= value %></li>
                    <% } %>
    </div>
        </nav>
    </div>
<div id="chart-container" style="width: 100%; top: 00px; height: 100vh; padding: none; position: absolute;">

<script>     
        let wave = new CircularAudioWave(document.getElementById('chart-container'), {mode: 'sunburst'});
     
            $( "li" ).click(function() { 
            
         var sel2 = 'audio/audio.mp3';  
         var sel1 =  ($(this).data('val'));     
         sel2 = 'audio/' + sel1; 
    wave.loadAudio(sel2);       
  
            });
     
        
</script>

` This is my template file. I am using express.js for server side scripting

[kelvinau]

Some places that I think may cause the error:

1. There are two click binding events - onclick on li and $( "li" ).click. I think you are planning to have a li for different audios? You will need different waves to store the audios and call waves[i].play() for li.

2. The audios should be loaded first before the click event, not during the click event, like the example:

circular-audio-wave/demo/sunburst.html

Lines 9 to 12 in 20189d0

	<script>
	let wave = new CircularAudioWave(document.getElementById('chart-container'), {mode: 'sunburst'});
	wave.loadAudio('audio/audio2.mp3');
	</script>

3. value of sel2 is expected to be something like audio/audio1.mp3? Better to check the logic if sel1 or express is getting the correct value

[Pratyush1197]

Thanku so much it is working now