Send variables from Symfony2 PHP file to js file

Question

I am really new to JavaScript and I could not outline some lessons about this. If there is, 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 I can send a response, but I also need to download the template.

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 %} 

.Js file named 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 provide variables from the controller to the .js month and still be able to show the template. Any ideas or guides on how to do this? Thanks in advance!

Answer 1

The quick and dirty answer: set the variable in your TWIG file using balloons and use these variables in your JS file.

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

Answer 2

You can create javascript as a branch 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); });​