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

How to call Javascript function of parent window from new pop up window

Context:

When we use window.open to display pop up at some instance we wish to call a function of the parent window or let the parent window know about some task of pop up is done now and parent should close it.

For that only defining a java script function on parent page is not sufficient.

Implementation:

Suppose you want to open URL htttp://example.com/page_popup.html  in pop up from http://example.com/page.html in new window.  after pop up displayed and some event or task is over you need to let parent page ( http://example.com/page.html ) know the task is over and you can process further(let say make some ajax request after pop up finishes it’s task).

I have typed the code  and not tested, it is just to describe the Idea. So if  it doesn’t work  or have any queries Please let me know.

in page.html

</pre>
<head>

<script >

// assigning new property with function so child window can point it

document.functionToBeCalledFromChildWindow = function (param){

alert(param);

// further processing.

}

</script>

</head>

<body>

<button onClick="window.open('<strong>htttp://example.com/page_popup.html</strong>')">Open window</button>

</body>

in page_popup.html

<head>

<script >

function onload()

{

// some code for task

alert('task completed');

window.opener.document.functionToBeCalledFromChildWindow('my task is over you can proceed');

window.close();

}

</script>

</head>

<body>

Hi I am Pop Up and Able let my parent window know I am done with my task.

</body>
<pre>