sample.twig.html

{% extends "::layout.html.twig" %}

{% block content %}
    {% block activity_title %}
        <h1>{{ activity.name | title }}</h1>
    {% endblock activity_title %}

    {% if isNotIncentiviseActivity %}
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                                    class="sr-only">Close</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        {{ reason }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="alert {{ alertType }}">
            {{ reason }}
        </div>
    {% else %}
        <div class="alert alert-info">
            <strong>NOTE:</strong> Only 2 self-report Berries will count towards your $100 incentive.
        </div>
    {% endif %}

    {% block activity_description %}{{ activity.description | raw }}{% endblock activity_description %}

    {{ form_errors(form) }}
    <form id="self-report" action="{{ path('save_berry_report', { category: category.slug, activity: activity.slug }) }}" method="post" enctype="{{ form_enctype(form) }}">
        {{ form_widget(form) }}
        <input class="btn btn-danger" type="submit" name="save" id=""/>
    </form>
{% endblock %}

{% block javascript %}
    <script type="text/javascript" src="{{ asset('/js/jquery.validate.min.js') }}"></script>
    <script type="text/javascript">
        var formRules = (function() {
            var onlyIfAll = function(questionSelector, questions) {

                var $subjectQuestion = $(questionSelector);

                if ($subjectQuestion.length > 0) {
                    var checkValues = function() {
                        var allowed = true;

                        $.each(questions, function(question, values){
                            var currentValue =$('#'+question).val();

                            if (allowed === true) {
                                allowed = $.inArray(currentValue, values) > -1;
                            }
                        });

                        if (allowed) {
                            $subjectQuestion.closest('.form-group').slideDown();
                            $subjectQuestion.rules('add', { required:true });
                        } else {
                            $subjectQuestion.closest('.form-group').slideUp();
                            $subjectQuestion.rules('add', { required:false });
                            // when hiding questions, clear the value or selection so that on submit, existing answers will be deleted
                            $subjectQuestion.val('');
                        }
                    };

                    $.each(questions, function(question){
                        $('#'+question).change(function(){
                            checkValues();
                        });
                    });

                    checkValues();
                }
            };

            return {
                onlyIfAll: onlyIfAll
            };
        })();

        $(document).ready(function () {

            $("#self-report").validate({
                errorClass: "help-block",
                errorElement: "em",
                errorPlacement: function(error, element) {
                    error.appendTo( element.closest('.form-group div') );
                },
                submitHandler: function(form) {
                    // disable submit button after form validated
                    $(form).find('input[type="submit"]').button('loading');
                    // actually submit the form
                    form.submit();
                }
            });

            formRules.onlyIfAll('#questions_provider', {
                'questions_associated': ['Yes']
            });
        });
    </script>
    {% if isNotIncentiviseActivity %}
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal').modal()
            });
        </script>
    {% endif %}
{% endblock %}