Cakephp multilanguage support in Javascript - cakephp

How to give language strings in js while using cakephp (Im using cakephp version 2) ? I know, this can be done in the following way.
<script>
var LABEL_LOGIN = '<?php echo __('Login'); ?>';
</script>
I want to separate my js code from my view file. Anything wrong if I do the same in .js file (because I am using global vars) ? Is there any other good solution to apply multilanguage in js ?

Cake does not support i18n in JS out of the box. I would rather recommend pulling in some i18n JS plugin which is syntactically compatible, i.e. also uses a global __ function.
Then you coul use the same method to parse all source codes for i18n keys.

The only easier way i could think of is:
Create some element, say langs.ctp, and add your global js vars in there, like
<script type="text/javascript">
var LABEL_LOGIN = '<?php echo __('Login'); ?>';
var LABEL_LOGOUT = '<?php echo __('Logout'); ?>'; // and so on
</script>
and then load this element in your layout, like, in your layout inside head tag
<?php echo $this->element("langs");
then you could use your global js vars
Hope it helps

Related

Which method is good to use for laravel 5 and angularjs tag conflict?

I had print value issue in laravel view, i was trying to print $scope value inside laravel blade. I searched about and find two kind of solution.
1- Change angularjs print tag
By this method i can change angularjs print tag.
var app = angular.module('app', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('app', function ($scope, $http) {
$scope.text_print = 'this is text';
});
Now in blade i can print like <% text_print %>
2- Add # for printing angularjs $scope value
I found an up-voted answer in which #Paul A.T. Wilson says that
The easiest way to do this is to simply use # in front of your Angular code
Example #{{text_print}}
Both are working for me, actually i want to make a plugin, so which method should i use? because i'm not sure the second one is compatible with laravel old version. I want my plugin compatible with all version of laravel.
Can anyone guide me about this, i would like to appreciate. Thank You
Changing either interpolation strings for Blade or angular is the best option if you want your plugin to work with older versions of Laravel.
For angularJs you already know how to do it from here.
For Blade, inside your Laravel app's AppServiceProvider.php file add the following code in the boot function:
public function boot() {
Blade::setRawTags("[[", "]]");
// for variables and Blade
Blade::setContentTags('<%', '%>');
// for escaped data
Blade::setEscapedContentTags('<%%', '%%>');
}
Note: In my opinion it's easier to change the interpolation tags for angular as changing the interpolation tags for blade requires you to clear out the storage/framework/views folder.
Apparently there's another way to do this, but I'm not sure if it will work in older versions:
#verbatim
<div>
{{ variableOne }}
{{ variableTwo }}
</div>
#endverbatim
The verbatim annotation indicates that the section is as-is, ie: Blade will leave it out.

where do I put configs in a angularjs app?

In my angular app, I have a URL to which I connect for retrieving some data, a CORS enabled server.
Now, so far I had it hardcoded in my javascript file:
server_url = "http://localhost:7888/api.php/json?id=2"
Now, on test and production, those URLs of course are not valid...and everytime I do a git pull it overrides my customizations.
Where would I elegantly put a config like that in an angular app?
Declare it as a constant. Assuming you have an app named App:
angular.module('App', []).constant("urls", {"server_url":"http://localhost:7888/api.php/json?id=2"});
Once declared as a constant, you'd inject it as a dependency, just as you would a service.
well, basically I'd adopt a mean.js approach here, it's quite easy to implement and it could be useful to you or anybody else.
you have to write from your middleware into your main HTML file in angular (ex: index.html), in your case the URL for your endpoint have to change depending on your environment just to keep it simple let's say we have dev (localhost) and production (mydomain.com)
in your index html do a simple write:
<script type="text/javascript">
<?php
if(strpos( $_SERVER['HTTP_HOST'], 'mydomain.com') !== false){
print "var endpoint = '"+ $server_url+ "';"
} else{
print "var endpoint = '"+ $local_url+ "';"
}
?>
</script>
one you got that into your main index.html it's available in angular by using the window object, so you can wrap it into a constant or a service.
this is the example for a constant:
angular.module('app').run(function () {
}).value('endpoint', window.endpoint);
I'm not fluent in PHP, but I hope you can get my point

Relative paths for javascript on CakePHP2

I was wondering if there's any way to do something similar to what HtmlHelper does in Cake views: instead of having to write the URL manually, calling some kind of helper to make it for you.
I have taken a look at this post but it is from 2010 and maybe there's something new now...
Currently I have codes like this at my javascript files:
window.location.href = 'http://' + document.domain +'/cakephp/posts/view/'+$(this).attr('data-id');
But if i change the cakephp folder name, or I use another configuration on the server or something similar, the URL changes and I should change manually all the codes with this type of URL.
I wonder if there's something similar to:
echo $this->Html->link('controller' => 'users' , 'action' => 'login');
Are you referring to inline or external JavaScript? Inline is rather easy using the url method, which accepts the same arguments as link (an array or string containing the URL).
Using it in external files is a bit trickier. I define a JS variable containing the site path before loading the JS files.
<script type="text/javascript">
//<![CDATA[
var SITE_URL = "http://www.example.com/cakeapp/";
//]]>
</script>
In my external JavaScript files I can then reference SITE_URL when I need it. When you change domains or rename the cakeapp directory you only have to alter the SITE_URL variable.

Set a javascript variable in cake php and retrieve its value inside normal javascript

How does one set the javascript variable declared in cake php, for example
echo $this->Js->set('jsvalue','test');
I need to get the jsvalue value inside normal javascript
<script>
// This will need to get value as 'test'
console.info(jsvalue);
</script>
I am currently using cakephp (1.3). If this feature is not supported in version 1.3, please show me how it is implemented in version 2.0.
It's set on window.app as an object to namespace it. Or, setting $setVariable on your JsHelper properties will change the namespace, to window.<namespace>.
So, it will be set like this:
window.app = {"jsvalue" : "test"}
If you have written javascript in the view part then directly you can use something like this.
I'm not getting what is $this->Js->set('jsvalue','test'); instead of this if you use normal $this->set('jsvalue','test'); and use it as below it should work.
<script>
// This will need to get value as 'test'
console.info(<?php echo $jsvalue; ?>);
</script>
Try this, this should do.

How to add javascript code in cakePHP view

I have written the following piece of code in my view page
<script type="text/javascript">
function filldetails()
{
document.getElementById('FirstName').value = "hjshjsh";
}
</script>
echo $this->Form->select('students',$student_name,array('onchange' =>filldetails()));
but i am getting an error message
call to undefined function filldetails()
How do I solve this error?
it should be 'onchange' => 'filldetails()'
Unless your project has a specific reason to avoid JS frameworks, you will avoid a lot of long-term headaches by using jQuery instead of pure Javascript.
Rewrite your view thus:
<?php
$selectDomId = $this->Form->domId('students');
$firstnameDomId = $this->Form->domId('Student.first_name');
$this->Html->scriptBlock("
jQuery(function($){
$('#{$selectDomId}').change(function(event){
$('#{$firstnameDomId}').val( $(this).val() );
});
});
",array('inline'=>false));
?>
<?php echo $this->Form->select('students',$student_name,$this->Form->domId(array(),'students'))?>
<?php echo $this->Form->input('Student.first_name')?>
The jQuery takes care of the onChange event handler, so it doesn't clutter your HTML, by hooking onto your dropdown menu's change event.
The use of Helper::domId means you don't have to worry about how CakePHP's helpers generate their id attributes, which is a net win in reliability and maintainability.

Resources