Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
firestorm23 opened this issue Jul 10, 2016 · 1 comment
Open

Comments

@firestorm23
Copy link

firestorm23 commented Jul 10, 2016

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
Copy link
Collaborator

bamarni commented Jul 12, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants