Alerts on trying to change the form

[MtnBiker]

Starting over as I had added areYouSure via `yarn add areyousure" and that is not the same as this code.

Apologies to @leo-rp who tried to help.

So now I've got yet another version. I'm trying to use a version moded by @mohideen as he's added something to deal with Turbolinks. Partially described in a Pull request and downloaded from here.

Downloaded and put in /app/webpack/src/are-you-sure.js (renamed without jquery.)

Added import areYouSure from "../src/are-you-sure.js";'; to application.jsand have Turbolinks andimport 'jquery';`

Added to layouts/application.html.erb

<script>
  $(function() {
    jQuery('are_you_sure > form').areYouSure(
      {'softPageUnloadEvent':'turbolinks:before-visit'}
    );
   console.log('In $(function in application.html.erb');
  });
</script>

/_form.html.erb:

<div class="col-lg-4" id="are_you_sure"> 
   <%= simple_form_for(@year, html: { class: 'form-inputs' }) do |form| %>
     ...

I added console.log("Modideen. src/are-you-sure settings: ", settings); to are_you_sure.js and the Chrome console shows

Mohideen. src/are-you-sure settings:  
{message: "You have unsaved changes!", dirtyClass: "dirty", change: null, silent: false, addRemoveFieldsMarksDirty: false, …}
addRemoveFieldsMarksDirty: false
change: null
dirtyClass: "dirty"
fieldEvents: "change keyup propertychange input"
fieldSelector: ":input:not(input[type=submit]):not(input[type=button])"
message: "You have unsaved changes!"
silent: false
softPageUnloadEvent: "turbolinks:before-visit"

But when I close the edit page, I do not get any alerts. Probably not understanding mohideen's changes

Thank you

PS: Old comments need to be removed as they are irrelevant now.

[leo-rp]

@MtnBiker

• You are selecting the div container not the form.
• I see a typo error, you wrote: $('#are_you_sure').areyousure(... should be : $('#are_you_sure').areYouSure();
• this is a jQuery plugin , try : jQuery('#are_you_sure').areYouSure();

[MtnBiker]

@leo-rp Thank you for your comments. Why would I get any response if there is a typo? I think it was correct because I implemented with yarn add areyousure and in application.js import 'areyousure/areyousure.js';.

In any case I'm now trying just data-areyousure in the div without the script, but how do I add to the form?
<%= simple_form_for(@year, html: { class: 'form-inputs' }) do |form| %>

I don't think I want to add an id because an id is created by Rails as shown in the html

<form class="simple_form form-inputs" id="edit_year_1361" novalidate="novalidate" action="/years/1361" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="…">

[leo-rp]

Ok, if You can't change the Id , try this, select the form inside the div with : jQuery('#are_you_sure > form');

 <script>
  $(function() {
    jQuery('#are_you_sure > form ').areyousure(
      {
        message: 'It looks like you have been editing something. '
               + 'If you leave before saving, your changes will be lost.'
      }
    );
  });
</script>

[MtnBiker]

I left the id as it was but changed the script as you suggested jQuery('#are_you_sure > form ').areyousure( and still can't edit without the page "reloading" with content Are you sure? Yes | No.
OOPS. yarn installed a different areyousure by S Loria. I'll start over tomorrow with codeance version.