Add translation in Twig template from Javascript/Jquery

Question

I am working on my form validation and I want to display different error message according to the error I get. I am using Silex and Twig with the translator component and balloon.css for the tooltip and it works so far.

Now I want to translate this error message according to the langage of my website and I have some trouble to do what I want.

Here is my code :

My form

<form class="my-form col-12 col-md-5">
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
        </label>
        <small>www.mywebsite.com/<span id="input_name_content">______________</span></small>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="mdp" name="mdp" placeholder="{{ 'input-password'|trans }}">
        </label>
    </div>
    <div class="form-group">
        <label for="name" class="col-12">
            <input type="password" class="form-control color-light-grey" id="confirm_mdp" name="confirm_mdp" placeholder="{{ 'input-confirm'|trans }}">
        </label>
    </div>
    <button id="create_new" type="button" class="btn bg-color-yellow hover-yellow-light">{{ 'create-pixers'|trans }}</button>
</form>

As you can see, I use {{ 'key'|trans }} to translate my content and it's ok.

My JS

I have a function that check my input value and create an error when I meet one, then at the end if my error obj is not empty I display my error. I use this function to do it, it adds some balloon.css attribute so I have what I want :

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

My problem

When I do this in my HTML, it works (I have my tooltip with the empty error message) :

<div class="form-group" data-balloon-visible data-balloon-pos="up" data-balloon="{{ 'empty'|trans }}">
    <label for="name" class="col-12">
        <input type="text" class="form-control color-light-grey" id="name" name="name" aria-describedby="name" placeholder="{{ 'input-name'|trans }}">
    </label>
</div>

But when I use displayFormError(error) with msg = "{{ 'empty'|trans }}" it doesn't works.

I know it's because I do it in JS, but is it possible to add my message as I want from my JS to my Twig template?

I saw this bundle that could help me maybe, but i'd like to find a solution I can do myself if possible: https://github.com/willdurand/BazingaJsTranslationBundle

Answer 1

No, it's impossible to pass your variable from Javascript to Twig(PHP).

I would use https://github.com/willdurand/BazingaJsTranslationBundle to avoid using 2 different system of translation in your application.

This way you will have your javascript and your message in a same file.

If you really want to do it yourself, you can re-invent the wheel : it's just some text being replaced by another. Or you can find a javascript library.

Answer 2

Well, in fact I manage to solve my problem by adding my Javascript in a Twig Block.

So this code in script.js won't work :

function displayFormError(error) {
    $.each(error, function(key, msg) {
        $("input[name='"+key+"']").parent().parent().attr({
            "data-balloon-visible": "",
            "data-balloon-pos" : "up",
            "data-balloon" : msg // msg = "{{ 'my-key'|trans }}"
        });
        $("input[name='"+key+"']").parent().addClass("is-wrong").removeClass("is-valid");
    });
}

But if you add it in a Twig Block in your "my_view.html.twig" file it will :

{% block ADD_JS_CODE %}
<script type="text/javascript">
     $(document).ready(function() {

         function displayFormError(error) {
             // same code than before
         }

     });
</script>
{% endblock %}

This way I can use my function that check my form and add message according to the error in the current langage in the page, without any other component, just Silex + Twig + Translator !