I'm using Symfony 2 and I need to execute a javascript just after the following twig template has loaded:

<div data-role="dialog">
    <div data-role="header">
        <h1>Input your Username and Password</h1>
    </div>
    <div data-role="content">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username"/>
            </div>
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="password" />
            </div>
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <input type="button" value="Login"/>
                <a data-rel="back" data-role="button"/>Cancel</a>
            </div>
    </div>
</div>

I'm using Symfony 2 and I need to execute a javascript just after the following twig template has loaded:

<div data-role="dialog">
    <div data-role="header">
        <h1>Input your Username and Password</h1>
    </div>
    <div data-role="content">
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" value="" placeholder="Username"/>
            </div>
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" placeholder="password" />
            </div>
            <div data-role="controlgroup" data-type="horizontal" align="center">
                <input type="button" value="Login"/>
                <a data-rel="back" data-role="button"/>Cancel</a>
            </div>
    </div>
</div>

• javascript
• jquery-mobile
• symfony
• twig

• 2 First of all i dont see any twig variable here !! . and about the loading part , twig template is rendered on the server side and then the rendered html is sent to the client side. So if you want to execute your JS after your template has loaded , i assume you mean to say after the page has loaded ?? for that you just need to add ` <script> ...your js.... </script>' after your html and link the code with page load event. – satin Commented Jan 19, 2012 at 12:42
• 2 This has nothing to do with Twig specifically. – richsage Commented Jan 19, 2012 at 15:01

2 Answers 2

At the bottom of your template add

<script type="text/javascript">
    window.onload = function() {
       //do your stuff here
    }
</script>

Or if you're using jQuery..

<script type="text/javascript">
    $(function() {
        //do your stuff here
    });
</script>

<script type="text/javascript">
        $("#divId").live( 'pageinit',
        function(event)
        {
        });
</script>

Normally, when we use jquery mobile, the main container of a page is a div with a datarole, set an id to this div and replace it with the divid in the script above and get u're code working :-)