Skip to content Skip to sidebar Skip to footer
Home / Ajax / Css / Javascript / Symfony / Twig

How To Pass A Javascript Variable To Twig In This Particular Example

Post a Comment
The following code is in my Twig template and it's for load a CSS file or another depending on the theme selected by the user. This works perfectly on a simple HTML page but when I

Solution 1:

To concat in javascript you have to use '+' operator

'~' operator is for twig concatenation

document.write('<link rel="stylesheet" id="theme-style" href="{{  asset('bundles/activos/css/app-' + themeName + '.css') }} ">');

Solution 2:

As you can't pass a javascript variable to twig you will need to fetch the theme uri by ajax.

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="stylesheet"id="theme-style"href="{{ asset('bundles/activos/css/app.css') }}"></head><body><script>
            $(function() {
                var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) 
                                                                            : {};
                var themeName = themeSettings.themeName || '';
                if (themeName) {                    
                    $.ajax({
                        url : "url/to/get/theme_uri.php",
                        type: "POST",
                        data : {
                            'themeName' : themeName,
                        },
                        success: function(data, textStatus, jqXHR)
                        {
                            $('#theme-style').attr('href', data.uri);
                        },
                    });
                }
            });
        </script></body>

<?php//... This would be a symfony controllerpublicfunctionthemeUriAction(Request $request){
        $path = 'bundles/activos/css/app-' . $request->request->get('themeName').'.css';
        returnnew JsonResponse(array('uri' => $this->container->get('templating.helper.assets')->getUrl($path)));
    }
    //...

If you know all the themes at front, you can add them into an array, then you don't need to use ajax

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkrel="stylesheet"id="theme-style"href="{{ asset('bundles/activos/css/app.css') }}"></head><body><script>var themes = {
                {% for theme in themes %}
                    '{{ theme }}': '{{ asset('bundles/activos/css/app-'~theme~'.css') }}',
                {% endfor %}
            };

            $(function() {
                var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings'))
                                                                            : {};
                var themeName = themeSettings.themeName || '';
                if (themeName in themes) {
                    $('#theme-style').attr('href', themes[themeName]);
                };
            });
        </script></body></html>

Post a Comment for "How To Pass A Javascript Variable To Twig In This Particular Example"