CODEWITHSUNDEEP
javascriptsymfonyhighcharts
Faery
Faery

Reputation: 4650

Send variables from Symfony2 PHP file to js file

I'm really new to JavaScript and I could't fine some tutorials about this. If there are ones, please tell me to read them.

What I want to do is pass variables from my PHP controller to a .js file - I want to populate Highcharts variables.

I know that I can send response, but I need to load a template, too.

This is the template:

...

{% block body %}

 <h1>Months</h1>

 // This is the Chart:    
 <div id="container" style="width:100%; height:400px;"></div>

    {%block javascript%}
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

        <script src="{{ asset('bundles/acmebudgettracker/js/month.js') }}"></script>
    {%endblock%}

{% endblock %}

The .js file called month.js

      $(function () { 
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Budget for months'
    },
    xAxis: {
        categories: ['Spent', 'Saved']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

});​

And the controller:

public function monthsAction()
{
    $this->setUser();
    $month_repository = $this->setRepository('Month');
    $month = new Month();
    $form = $this->createForm(new MonthType(), $month);

    $all_months = $month_repository->findByUser($this->user); 

    return $this->render('AcmeBudgetTrackerBundle:Months:months.html.twig', array(
        'all_months' => $all_months,
        'form' => $form->createView()
    ));
}

What I want to do is to give variables from the controller to month.js and still be able to show the template. Any ideas or tutorials how to achieve this? Thanks in advance!

Upvotes: 5

Views: 7285

Answers (2)

jkucharovic
jkucharovic

Reputation: 4244

You can generate javascript as twig template:

MonthsController.php 

public function scriptAction()
{
    // some logic
    return $this->render('AcmeDemoBundle:Months:script.js.twig', array(
        'user_months' => $user_months
    ));
}

routing.yml 

javascript_route:
  path:     /generated-scripts/month.{_format}
  defaults: { _controller: AcmeDemoBundle:Article:script, _format: js }
  requirements:
      _format:  js|json

script.js.twig 

$(function () {
    var options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Budget for months'
        },
        xAxis: {
            categories: ['Spent', 'Saved']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: []
    };

    {% for user in user_months %}
    options.series.push({ name: '{{ user.name }}', data: [{{ user.months|join(',') }}] };);
    {% endfor %}

    $('#container').highcharts(options);
});​

Upvotes: 14

Gmajoulet
Gmajoulet

Reputation: 700

Quick & "dirty" answer : set the variable in your TWIG file using balises, and use those vars in your JS file.

<script>
    var foo = {{ bar }};
</script>

Upvotes: 8

Related Questions