All threads / Javascript function firing on page load
Ask A Question

Notifications

You’re not receiving notifications from this thread.

Javascript function firing on page load

benjaminhouy asked in Javascript

Hi,

I'm building my first web app using Jumpstart and I'm running into a weird issue with the Javascript in one of my show views.

The issue I have is that instead of firing on click, the toggleCompleted function fires every time the page is loaded/refreshed. What I don't understand is that this issue doesn't seem to affect the other functions such as loadNormal and loadSlow.

I spent hours looking for a solution and trying various things but nothing worked. I suspect this may be an issue with Turbo and how Rails 6 handles javascript but I'm not sure how to solve it.

Any idea?

Thanks


<div class="container px-4 mx-auto my-8">
  <div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-4">
      <h1 class="h3"><%= link_to "Conversations", conversations_path %> >
        <%= @conversation.title %>
      </h1>
      <div class="inline-flex">
          <% if @conversation.completed == false %>
            <button class="btn-tertiary btn-small mr-3", 
            onclick="toggleCompleted()" 
          >Mark As Completed</button>
          <% else %>
            <button class="btn-tertiary btn-small mr-3",
            onclick="toggleCompleted()">Completed</button>
          <% end %>
           <%= @conversation.level %>
        </h5>
      </div>
    </div>
<div id="waveform"></div>
<script>
  wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'blue',
      progressColor: 'purple',
      backend: 'MediaElementWebAudio',
  });

  wavesurfer.empty();

  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>")

</script>


<div class="flex justify-evenly mb-4">
  <div>
    <button class="ml-2 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.skipBackward(); wavesurfer.play()">Rewind</button>

    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 
    rounded" onclick="wavesurfer.playPause()">Play/Pause</button>
  </div>
  <div>

    <button class="ml-2 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadSlow()">Slow</button>

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadNormal()">Normal</button>

    <button class="ml-2 bg-red-500 hover:bg-green-700 text-white font-bold py-2 px-4 
    rounded" onclick="loadPractice()">Practice</button>
  </div>
</div>
    <div class="p-8 bg-white rounded shadow">
      <div class="flex space-x-8 justify-between text-2xl mt-10">
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.french_text %><p>
            <br>
          <% end %>
        </div>
        <div>
          <% @conversation.phrases.each do |phrase| %> 
            <p><%= phrase.english_text %></p>
            <br>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>

function loadNormal() {
  wavesurfer.load("<%= url_for(@conversation.normal_audio) %>");
  wavesurfer.setWaveColor('blue');
};

function loadSlow() {
  wavesurfer.load("<%= url_for(@conversation.slow_audio) %>")
  wavesurfer.setWaveColor('green');
};

function loadPractice() {
  wavesurfer.load("<%= url_for(@conversation.conversation_practice) %>")
  wavesurfer.setWaveColor('red');
};

wavesurfer.on('seek', function () {
  wavesurfer.play();
});

function toggleCompleted() {
  <% if @conversation.completed == true %>
    <% @conversation.update(completed: false) %>
  <% else %>
    <% @conversation.update(completed: true) %>
  <% end %>
  }
</script>

Ok so it seems like the issue is that I need to export the functions from the file and then import them in application.js.

import * as myModule from "./peaks-setup";

window.myModule = myModule

After doing this, I can now call myModule.functionName() in the view and it works. Not sure it's the best way but it seems to work.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 64,614+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.