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

profile for Rupesh Patel at Stack Overflow, Q&A for professional and enthusiast programmers

Advertisements

4 comments on “Add JSON objects ,arrays and variables from php to javascript in Zend Framework

  1. vipulchauhan says:

    Thanks for this awesome post….while i was reading your post i really enjoying …Thanks for sharing this wonderful post…

  2. viralsolani says:

    Superb post Rupesh…..keep it up the good work……

  3. viralsolani says:

    Reblogged this on Viral Solani and commented:
    Superb way of adding PHP variables to Javascript/Jquery in Zend Framework

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s