Javascript into Controller with symfony 2

Question

I'm trying to code some java script into a controller with symfony 2. This code works :

    public function indexAction() {
    echo "<script  type=\"text/javascript\">"
    . "alert(\" test message! \");"
    . "</script>";
    return $this->render('TestBundle:Default:GuiLogin.html.twig');
    }

But not this one :

    echo "<script  type=\"text/javascript\">"
    . "document.getElementById(\"DivInfo\").style.display = 'block';"
    . "</script>";

Anyone have an idea ?

Answer 1

You can define the string in the controller before displaying it in the Twig template:

Controller

public function indexAction() {
    $js = '<script  type="text/javascript">'.
     'document.getElementById("DivInfo").style.display = "block";'.
     '</script>';

    return $this->render(
        'TestBundle:Default:GuiLogin.html.twig',
        array(
            'js' => $js
        )
    );
}

Twig template

Place this code before the </html> tag:

<div id="DivInfo" style="display:none;">
    DivInfo
</div>

{% if (js is defined) %}{{ js|raw }}{% endif %}

The <div id="DivInfo"> is hidden by default and displayed if Javascript is enabled.

Comments

I don't understand what is the logic behind your question. There are several ways to display a code only in some conditions. Defining Javascript functions in the Controller is a bad idea since its more logic to put Javascript code in .js files or in Twig HTML files.

Better solution

According to your comments you are checking the user credentials, so you can perform the test in the controller:

Controller

public function indexAction() {
    $message = null;

    if (check credentials)
    {
        $message = 'whatever';
    }

    return $this->render(
        'TestBundle:Default:GuiLogin.html.twig',
        array(
            'message' => $message
        )
    );
}

Twig template

<div id="DivInfo" style="display:none;">
    DivInfo
</div>

{% if ((message is defined) and (message is not null)) %}
    <div>{{ message }}</div>
{% endif %}

Answer 2

Okay. First of all. You should NEVER do something like this. Your controller actions should not echo/dump anything, unless you are testing something.

My guess is, the first example works, because alert function does not try to find any element in the dom and the browser can still execute it. I also believe your script is outputed before the render method outputs the template. That means your script is outputed before html, which is not valid in the first place. The second example needs html (dom) already loaded, to find element by id. Also consider using jQuery to get element by id. jQuery can do that with selectors and has "load" and "ready" methods, when you need to wait for things to load.

jQuery - What are differences between $(document).ready and $(window).load?

You should atleast move the javascript into the template. If you must, put the javascript in a php variable and pass it to the template. Then with template engine (like twig), try to output that variable as html, maybe try to use the raw filter or some other that would do the trick.