Symfony 4 - Is there a way to use a script function to set a twig variable?

Question

I would like to set a prompt box fromjavascript and pass the text entered to my twig attribute msg.

But I don't know how I can pass from my script to my twig.

There is my code for now.

<script type="text/javascript">
    function PromptMessage() {
        var saisie = prompt("Saisissez votre texte :", "Texte par défaut");
        console.log(saisie);

    }
</script>

{# It works with an hardcode value in twig #}
{% set msg = 'egaezrf' %}

    <button type="button" class="btn btn-success" onclick="window.location.href = '{{ path('email_index', {'iduser': onlineorder.iduser.iduser, 'msg': msg}) }}';">Send Email</button>

Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — DarkBee, May 24 '19 at 10:28
@DarkBee there's more to this question than just the confusion between when which bit of code runs, though that link is of course helpful. Thanks! — GKFX, May 24 '19 at 20:59

GKFX · Answer 1 · 2019-05-24T21:09:13.270

There seems to be a fundamental misunderstanding here. Twig code runs on the server, before the JS gets anywhere near being executed. Once the Twig code has been executed, then the resulting page goes to the browser and the JS is executed.

In effect, this question is "how can my code travel back in time"?

I recommend using the Javascript Routing system (https://symfony.com/doc/current/routing/generate_url_javascript.html) to generate the url you need in Javascript directly. This looks something like

// JAVASCRIPT
    var url = Routing.generate('email_index', {
        'iduser': iduser,
        'msg': saisie
    });

Okay, you've asked a follow-up question about how this should all be put together. I'd recommend not using the onclick attribute of the button element: it may be what you've done in class but it's considered outdated. Get a reference to your button:

var myButton = document.querySelector("button");

Pass the iduser value into Javascript (one of the two options):

var iduser = {{ onlineorder.iduser.iduser }}; // if it's an int
var iduser = "{{ onlineorder.iduser.iduser | e('js') }}"; // if it's a string. 
// the e('js') is a Twig function to safely generate Javascript strings, see
// https://twig.symfony.com/doc/2.x/filters/escape.html

Then use the first code block above to generate url.

Finally set the event handler on the button: (docs)

button.addEventListener("click", function(event) {
    window.location.href = url;
});

If you have any further issues I'd recommend asking your lecturer/supervisor.

Ok I understand the first problem. And ... infact this is my first exercice using javascript. I'm not sure of what to do next, do I have to call my function in the onClick? Does the function have to return the url or something like this ? Thanks for your help ! — Tonyto, May 24 '19 at 12:41
@Tonyto If an answer is helpful, it's appreciated if you accept it (tick mark on the left of the answer). Many thanks! — GKFX, Jun 01 '19 at 17:53

Symfony 4 - Is there a way to use a script function to set a twig variable?

1 Answers1