Pass variables from controller to javascript function in Fat-Free Framework

user_7936261 0
Viewed 1429

I have some values on my controller that I want to pass to a javascript function in the view page.

In the controller, I have: 

$f3->set('value', $value);

I can access the value on the view with {{@value}}, but how do I use(access) that value inside a javascript function on the view page??

<script type="text/javascript">
 var value = XXX; //XXX in the {{@value}}, how do i access it in here???
</script>
fat-free-framework javascript
2 Answers

It depends on the content stored inside $value.

If it's a basic string with no single/double quote inside, then the following code will work:

<script>
  var value='{{ @value }}';
</script>

If it's an integer, the following code will work:

<script>
  var value={{ @value }};
</script>

... although your IDE will probably report a syntax error.

If it's a float, the following code will work:

<script>
  var value={{ str_replace(',', '.', @value) }};
</script>

... and your IDE will also probably report a syntax error. NB: the str_replace is for non-English locales that have decimal separator set to comma.

For all the rest (strings including quotes or arrays), you should convert your data to JSON, using one of the following techniques:

Technique 1:

Convert data to JSON and dump it to a JS object.

// controller.php (JSON encode)
$f3->set('data',json_encode($data));

<!-- template.html -->
<script>
  var data={{ @data | raw }};
</script>

Pros: easy to use.

Cons: your IDE will report a syntax error + extra call to raw.

Technique 2:

Convert data to JSON, dump it to a JS string and parse it.

// controller.php (JSON encode + escape double quotes)
$f3->set('data',str_replace('\\u0022','\\\\u0022',
    json_encode($data,JSON_HEX_APOS|JSON_HEX_QUOT)));

<!-- template.html -->
<script>
  var data=JSON.parse('{{ @data | raw }}');
</script>

Cons: less easy to use + extra call to raw.

Pros: your IDE will not report any syntax error.

Technique 2bis:

Embed technique 2 in a F3 template filter.

// index.php
$tpl=Template::instance();
$tpl->filter('safejson',function($data){
  $raw=\View::instance()->raw($data);
  return str_replace('\\u0022','\\\\u0022',
    json_encode($raw,JSON_HEX_APOS|JSON_HEX_QUOT));
});

<!-- template.html -->
<script>
  var data=JSON.parse('{{ @data | safejson }}');
</script>

Pros: easy to use + your IDE will not report any syntax error.

Cons: extra call to raw.

Technique 3:

Convert data to JSON and embed it inside a DOM data- attribute.

// controller.php (JSON encode)
$f3->set('data',json_encode($data));

<!-- template.html -->
<div id="foo" data-json="{{ @data }}"></div>
<script>
  var data=JSON.parse(document.getElementById('foo').dataset.json);
</script>

Pros: easy to use + your IDE will not report any syntax error + no extra call to raw.

user_25887460

I went a bit lazier than that.

I have my data in a dictionary file (F3). I load it in an input field at the bottom of my page and assign value via templating. I use Jquery (plain JS could be used to) to retrieve value.

Ex: Dict data

'prf_conf'=>' Update your profile'

In my profile.html

    `< input type = 'hidden' id ='prf_conf' value='{{@prf_conf}}'  >` 
//this loads data in whatever language on my page

JS

Confirm button text: (i used jquery-confirm.min.js in this example)
    $.confirm({ title: $('#prf_conf').value()

… bit of gymnastic but worked well. No IDE issue…

user_116819920
Related