Rails Simple Form Bootstrap Javascript

Question

I have a rails 4 app with bootstrap and simple form.

I have a simple form for datum.

It has a primary question, which if answered true, requires a follow up question. I want to hide the follow up question until the first question is answered as true.

I have defined a separate CSS class for the label above the follow up question (survey-link-data) so that the label is hidden and shown with the input field. This JS is incorrect - it doesn't hide at then show as I had hoped.

Please can you see what I've done wrong? Thank you.

These are my two simple form for (@datum) questions:

<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?'  %>
<br><br>


    <%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'data-survey-link' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px',  class: 'response-project'} %>

This is my JS script:

<script>
$(function() {
    // Hide the survey_link input

    $('input[name="datum[survey_link]"]').hide();
    $('.data-survey-link').hide();
    // When the survey checkbox changes
    $('input[name="datum[survey]"]').change(function() {
         // If the survey checkbox is ticked
         if(this.checked) {
              // Survey checkbox was ticked - show the survey_link input
              $('input[name="datum[survey_link]"]')toggle(this.checked);
              $('.data-survey-link').show();

         } else {
              // Survey checkbox was unticked - hide the survey_link input
              $('input[name="datum[survey_link]"]').hide();
              $('.data-survey-link').hide();

         }
    });
});
</script>

Answer to my own question:<script> $(function() { // Hide the survey_link input $('.datum_survey_link').hide(); // When the survey checkbox changes $(document).on('change', 'input[name="datum[survey]"]', function(){ $('.datum_survey_link').toggle(this.checked); }); }); </script> — Mel
– Mel, Commented Sep 30, 2014 at 9:28
this won't be smooth as css is loaded first and then javascript , there are chances the your hidden form might just give a glimpse . Use Css first to hide and then javascript . (Just a suggestion) — igauravsehrawat
– igauravsehrawat, Commented Sep 30, 2014 at 9:36
I think that is complicated where the CSS comes from simple form and bootstrap — Mel
– Mel, Commented Sep 30, 2014 at 11:23

Ernest · Accepted Answer · 2014-09-30 09:12:27Z

1

+50

First of all, you are selecting, and hiding two elements (label and input), which is less efficient than just hiding/showing a wrapper (by default simple_form wraps input and label inside a special div tag). Let's give this wrapper a class:

<%= f.input :survey_link, wrapper_html: { class: 'survey-link-wrapper' } %>

I stripped the rest of the options for the simplicity of example.

You can initially hide it with CSS:

.survey-link-wrapper {
  display:  none;
}

Second, create a more efficient selector for first input:

<%= f.input :survey, input_html: { class: 'survey-checkbox' } %>

Then your javascript code becomes this:

<script>
$(function() {
    var $surveyLinkWrapper = $('.survey-link-wrapper');
    $('.survey-checkbox').change(function(e) {
         // If the survey checkbox is ticked
         if ( $(this).is(":checked") )  {
              // Survey checkbox was ticked - show the survey_link input
              $surveyLinkWrapper.show();
         } else {
              $surveyLinkWrapper.hide();
         }
    });
});
</script>

9 Comments

igauravsehrawat Over a year ago

aptly handled using CSS first and then javascript .

Mel Over a year ago

Please can you show me how to do it to hide the label that has been stripped out of your example as well? Is there a problem with the bits of the input field that were stripped out of your example? Thank you

Ernest Over a year ago

@user2860931 But when you hide a div that wraps label and checkbox, they both won't get to be seen. Is this not OK for you?

Mel Over a year ago

Your proposal does work to hide and show the survey_link. I wonder if its because the other content of the fields was stripped out of your example that it's now all messed up. The survey question has lost it's label, the placeholders and styling are gone. When I add the wrapper_html to my input field I get an error saying I have the wrong number of arguments.

Mel Over a year ago

I received another solution yesterday - which is a separate JS common file with this: $ -> $(document).on 'change', 'input.toggle_div', ()-> $($(this).attr('target')).toggle this.checked

|

Collectives™ on Stack Overflow

Rails Simple Form Bootstrap Javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related