Add JSON objects ,arrays and variables from php to javascript in Zend Framework

If you are using any MVC framework(these days I think most of us uses MVC) in php, then you might needed to assign variables from php to javascript, Some times you might have to add tens of parameters to javascript. And this thing leads to dirty code like below in any of your view files..

<script>

var myvar1= <?php echo $myvar1?>

var myvar2= <?php echo $myvar2?>

var myvar3= <?php echo $myvar3?>

var myvar4= <?php echo $myvar4?>

</script>

// your included scripts

<script type="javascripts" src="some.js"></script>

// code of your view file

and the main problem with this solution is you have to do it explicitly for each of variables. And What if you want to add an array to javascript ?

I have done some thing interesting to cop this in Zend Framework , Similar can be done in any of MVC systems if views and control code is differentiated.

1) Create a view file at application/views/index/include_js_vars.phtml  and paste following code in this file.

<script>
<?php if(!empty($this->jsVars)){ ?>

<?php
foreach($this->jsVars as $var) {
if($var['type'] == 'json'){
?>
var <?php echo $var['name']?> = JSON.parse('<?php echo $var['value'];?>');
<?php } elseif($var['type'] == 'text'){ ?>
var <?php echo $var['name']?> = "<?php echo $var['value'];?>";
<?php }else{?>
var <?php echo $var['name']?> = <?php echo $var['value'];?>;
<?php
}}?>

<?php }?>

</script>

2) now most probably you are including java scripts in your layout file application/layouts/scripts/layout.phtml
so render our include_js_vars view before [ echo $this->headScript(); ] statement like this…

<?php
echo $this->render('index/include_js_vars.phtml'); // rendering view

                $this->headScript()->prependFile(JS_BASE_URL.'/jquery-1.7.2.min.js');
$this->headScript()->appendFile(JS_BASE_URL.'/jquery.blockUI.js');
$this->headScript()->appendFile(JS_BASE_URL.'/commonJS.js');
$this->headScript()->appendFile('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js');

                echo $this->headScript();
?>

now time for some explanation …
our view file include_js_vars.phtml is checking a view variable jsVars(which should be an array) and process it.
It defines all variables within that array in java script. This view file is rendered before [ echo $this->headScript(); ] so these variables will also available in other .js files like in this case commonJS.js
now at last How to use this ….

3) In any of your Controller Actions you can assign variables

public editSomethingAction()
{
   // your code
// assigning text variable
$this->view->jsVars[] = array('name'=>'myText' , 'type'=>'text', 'value' => 'This will go to myText js variable');
//assigning array
$fields = array('mango','banana','orange');
$fields = json_encode($fields);
//echo $fields; exit;
$this->view->jsVars[] = array('name'=>'myArray','type'=>'json','value'=>$fields);

}

now in your commonJS.js file

alert(myText); // will alert This will go to myText js variable

alert(myArray); // will alert mango,banana,orange

so you will never need to write your javascript code in your ptml file.
Please let me know if you have any trouble with this or any suggestion you have.

Regards And Happy Coding,
Rupesh Patel

Advertisement