event.preventDefault(); is not working.

[surenderrwt]

Gemfile

gem 'cocoon'

_form.html.erb

<%= form_with(model: local_question, local: true) do |f| %>     
                      <div class="form-group">
                        <%= f.text_field :questiontitle, id: :local_question_questiontitle , class: "form-control input-custom input-full", placeholder: "Question Title" %>
                      </div>
                    
                      <div class="form-group">
                        <%= f.hidden_field :city_id, id: :local_question_city_id, value: :current_city %>
                      </div>
                    
                      <div class="form-group">
                        <%= f.hidden_field :business_user_account_id, id: :local_question_business_user_account_id, Value: current_business_user_account %>
                      </div>
                      <div id='question_options'>
                      <%=f.fields_for :question_options do |qo| %>
                        <%= render 'question_option_fields', f: qo %>
                      <% end %>
                      </div>
                      <%#= link_to_add_question_options "Add Option", f, :question_options %>
                      <div class='links'>
                        <%= link_to_add_association 'Add Option', f, :question_options, class: 'btn btn-primary', data: {association_insertion_node: '#question_options', association_insertion_method: :append } %>
                      </div>

                      <div class="form-group">
                      <br/>
                      <input 
                      type="text" 
                      class="form-control input-custom input-full" name="local_question[expiredate]" id="local_question_expiredate" placeholder="Select End Date" onfocus="(this.type='date')" onblur="(this.value == '' ? this.type='text' : this.type='date')" >   
                        <%#= form.datetime_select :expiredate, id: :local_question_expiredate, placeholder: "End Date" %>
                      </div>
                    
                      <div class="actions">
                        <%= f.submit "submit",  class:"btn btn-primary btn-lg" %>
                      </div>
                    <% end %>
<!-- end form-->              

_question_options_fields.html.erb

<div class='nested-fields'>
    <div class="form-group">
        <%= f.text_field :Optiontitle, placeholder: "Enter Options here..."  %>
        <%= link_to_remove_association "remove option", f, class: 'btn btn primary' %>
    </div>
</div>

JS is

  $('#question_options')
     .on('cocoon:before-remove', function(e, task) {
       if($('#question_options').find('input[type="text"]').length <= 4)
       {
           e.preventDefault(); // This is not working as expecting
       }
     });

[nathanvda]

Ok, that is weird. Afaik this should work.

Did you verify what $('#question_options').find('input[type="text"]').length actually returns? (and it is what you expect?)

A suggestion: why not hide the "remove"-links (and only show them) if your threshold of minimally required questions is reached? UI/UX-wise it seems more user-friendly to hide buttons (or disable them) that you know will not work anyway.

Anyway: this suggestion does not take away the fact that the preventDefault should work.

[nathanvda]

And you are also sure the callback is actually triggered?

[surenderrwt]

yes.. the callback is working.

[nathanvda]

I had already tested this, but for demonstration purposes I have updated the demo project where this cancellation is demonstrated easily: when inserting a new task you got as in the documentation the confirmation question and on my machine this works correctly. See commit: nathanvda/cocoon_simple_form_demo@1a45d69

So options I can think of:

• if you are using the js from npm, which version are you using?
• you did not confirm the count gives the expected result?