genemu / GenemuFormBundle

Extra Form : Captcha GD, Tinymce, Recaptcha, JQueryDate, JQueryAutocomplete, JQuerySlider, JQueryFile, JQueryImage
587 stars 265 forks source link

How to add form_javascript to the bottom of the parent layout ? #431

Open firestorm23 opened 7 years ago

firestorm23 commented 7 years ago

I have a customized form theme according to doc, to add refresh functionality to captcha widget

{% extends 'SonataDoctrineORMAdminBundle:Form:form_admin_fields.html.twig' %}

{#{% block form_widget_simple %}#}

{#{% endblock form_widget_simple %}#}

{%- block form_row -%}
    <div class="form-group">
    {#{{- form_label(form) -}}#}
    {{ form_label(form) }}
    {{- form_errors(form) -}}
        <div class="col-md-8 col-sm-9">
            {{- form_widget(form) -}}
        </div>
    </div>
{%- endblock form_row -%}

{% block genemu_captcha_widget %}
    <img id="{{ id }}_image" src="{{ src }}" width="{{ width }}" height="{{ height }}" title="{{ name|trans }}" />
    {# We're putting a link there #}
    <a id="{{ id }}_refresh">Получить другой код</a>
    {{ block("form_widget_simple") }}
    {#<script type="text/javascript">#}
        {#$(function () {#}
            {#&#123;&#35; Image will be refreshed when the link is clicked &#35;&#125;#}
            {#$('#{{ id }}_refresh').click(function() {#}
                {#$('#{{ id }}_image').attr('src', '{{ path('genemu_captcha_refresh') }}?' + Math.random());#}
            {#});#}
        {#});#}
    {#</script>#}
{% endblock %}

{% block genemu_captcha_javascript %}
    <script type="text/javascript">
        $(function () {
            {# Image will be refreshed when the link is clicked #}
            $('#{{ id }}_refresh').click(function() {
                $('#{{ id }}_image').attr('src', '{{ path('genemu_captcha_refresh') }}?' + Math.random());
            });
        });
    </script>

    {{ parent() }}
{% endblock %} 

This form theme imported in my view for the contactsAction

{% extends "SiteBundle::public.html.twig" %}
{% form_theme form 'SiteBundle::form_fields.html.twig' %}

{% block container_content %}
<div class="col-md-6 col-sm-12 contact-add-form">
    <div class="contact-form">
        <h2>Свяжитесь с нами</h2>
        <p>Все поля отмеченные * обязательны для заполнения</p>
        {{ form_start(form, {'action': form_action, 'attr' : {'class': 'form-horizontal'}}) }}
            {{ form_widget(form) }}
        {{ form_end(form) }}
        <div id="alert-msg" class="alert-msg"></div>
    </div>
</div>
{% endblock container_content %}

And then refresh button doesn't work, because GenemuBundle javascripts are not added to the layout. I need to add this to very bottom of my parent layout public.html.twig, which looks like this.

<!-- jQuery Include -->
<script src="/static/libraries/jquery.min.js"></script>
<script src="/static/libraries/jquery.easing.min.js"></script>
<script src="/static/libraries/bootstrap/bootstrap.min.js"></script>
<script src="/static/libraries/jquery.animateNumber.min.js"></script>
<script src="/static/libraries/jquery.appear.js"></script>
<script src="/static/libraries/audio/mediaelement-and-player.min.js"></script>
<script src="/static/libraries/flex-slider/jquery.flexslider-min.js"></script>
<script src="/static/libraries/owl-carousel/owl.carousel.min.js"></script>
<script src="/static/libraries/lightbox/lightbox.min.js"></script>
<script src="/static/libraries/jquery.magnific-popup.min.js"></script>
<script src="/static/libraries/uikit/js/uikit.min.js"></script>
<script src="/static/libraries/uikit/js/components/sticky.min.js"></script>
<script src="/static/libraries/select2/select2.full.min.js"></script>
<script src="/static/libraries/fotorama/fotorama.js"></script>

<!-- Customized Scripts -->
<script src="/static/js/functions.js"></script>
<script src="/static/js/custom.js"></script>

</body>
</html>

What should I do to add GenemuBundle javascripts to the boottom of the page ?

bamarni commented 7 years ago

You have to call form_javascript (https://github.com/genemu/GenemuFormBundle/blob/master/Resources/doc/template.md), then if you want to have it in the parent template you can use a twig block and inheritance.