preventDefault does not stop action

[randikabanura]

I have the following code:

$(document).on('cocoon:before-remove', function (event, insertedItem) {
     if ($('.nested-fields').length <= 1) {
           event.preventDefault();
       }
 });

If only one .nested-fields section is on the DOM, it should prevent the removal.
The code runs and reaches event.preventDefault() and execute it. But the the last .nested-fields section get removed.

Also I have following in the Gemfile:

gem 'cocoon', git: 'https://github.com/nathanvda/cocoon'

Ruby version: 2.7.1
Rails version: 6.0.3.2
Cocoon version: 1.2.14

[nathanvda]

Just to rule out the obvious (since you provide no view code, I have to guess), some questions/tests:

• are you sure the $('.nested-fields') gives the wanted result (you are counting over the complete page?)

So, if you write your code without the test, something like

$(document).on('cocoon:before-remove', function (event, insertedItem) {
     console.log("prevent the deletion!");
     event.preventDefault();
 });

That should block the deletion as expected and add a line in the javascript console: does that work?

[randikabanura]

I also removed the if block and check the result. But still the sections getting removed. Also console printing the sentence above as well.

[nathanvda]

Ah, you are using rails 6, how did you include the javascript-code? For now there is still no "official" way, and maybe some of the libraries available on npm did not support all original features?

[randikabanura]

require("cocoon")

#555 (comment)
I have put this on the application.js. All other features work such as html_options and render_options for add association links.

[randikabanura]

Found the solution. #555 (comment) is working fine. Thanks

[nathanvda]

Great you got it working. Nice. 👍 👍

Also I was myself also busy getting it to work in a rails 6 project, so I just released the js on npm, so now you also could just do something like

 yarn add @nathanvda/cocoon 

and then add require("@nathanvda/cocoon") in app/javascript/packs/application.js