Category Archives: Javascript Tricks

Tricked Implementations

Make Your Own Javascript Template Engine

Recently I needed java-script templates to display JSON data coming through a Rest Full Api request.

There are lots of open sourced java-script Template Engines which are really very simple and easy to use like Underscore.js but It was still a lot to read and configure. And the core code will always be woo-do to you, specially in the case when you need to do something out of box.

Would you like to learn to use some library (with spending a day or two ) of js template parsing if I say you can do it in just 20 lines of simple js function and with extreme speed ?

Just give it a try … copy paste below code in one .html file and run
It is lightning fast template parser and the best advantage is its simplicity. You can modify it according to your needs in minutes.

The code is self explanatory and I think I have placed enough comments 🙂 

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// this is the function who parse the template 
//args
// 1) tId : 'ID of the template div'
// 2) row : json object containing values
function teplateParser(tId,row)
{
    var p = $('#'+tId).html();
    p = p.toString();
    var tempVars = getTemplateVars(p);
    for(a in tempVars)
    {
        var temp = tempVars[a];
        temp = temp.split('.');
        var val = row[temp[0]];
        if(val){
        for(k in temp)
        {   
            if(k==0)
             continue;
            if(val[temp[k]])
            val = val[temp[k]]; 
        }
        p = p.replace('{'+tempVars[a]+'}',val);
       }
    }
    return p.toString();
}
// fetches the variable names from templates used in teplateParser
function getTemplateVars(str) {
  var results = [], re = /{([^}]+)}/g, text;
  while(text = re.exec(str)) {
    results.push(text[1]);
  }
  return results;
}

 // this function is perticularly made to display list of records. One can modify it according to needs
function getParsedHtml(mainTId,data,replaceSlug)
{
    var rows = '';
    var flipflop = true;
    for(a in data)
    {
        if(flipflop) data[a].grey = 'white'; else data[a].grey = 'grey'; // for alternate colors in rows
        rows+=teplateParser(mainTId+'Row',data[a]);
        flipflop = !flipflop;
    }
    var html = $('#'+mainTId).html();
    html = html.toString();
    html = html.replace(replaceSlug,rows);
   return html;
}


function showRecords()
{
  // this variable may be loaded by ajax 
  var Data = [ {name : 'Rupesh Patel' , details : { age : 25 , birthdate : '22 oct 1987' , others : {nickname : 'none'},}},
			   {name : 'Rakesh Patel' , details : { age : 22 , birthdate : '14 Apr 1990',others : {nickname : 'rako'},},},
			   {name : 'Nishith Patel' , details : { age : 23 , birthdate : '25 aug 1991',others : {nickname : 'nishu'},}},
			   {name : 'Rajesh Patel' , details : { age : 30 , birthdate : '26 oct 1982',others : {nickname : 'raju'},}},
				];
	$('#container').html(getParsedHtml('users',Data,'__SLUG__'));
}
</script>
<style>
.row{clear:both;}
.col {float:left;width:150px;}
.template {display:none}
.grey .col{background-color:grey}
.white .col{background-color:white}
</style>
</head>
<body>

	<input type="submit" onclick="showRecords()" value="show" />

	<!-- container div !-->
	<div id="container"></div>


	<!-- main container temlate -->
	<div id="users" class="template">
	<div class="row"> <div class="col header">NAME</div>  <div class="col header">Nick Name</div> <div class="col header">Age </div> <div class="col header">Bitrh Day </div></div>
	__SLUG__ <!-- This slug will be replaced with parsed html of rows -->
	</div>
	<!-- Template of a row must have Id followed by "Row"-->
	<div id="usersRow" class="template"> 
		<div class="row {grey}">
			<div class="col">{name}</div> <div class="col">{details.others.nickname}</div> <div class="col">{details.age}</div> <div class="col">{details.birthdate}</div>
		</div>
	</div>
</body>
</html>

Happy Javascript Template Parsing :),
Rupesh Patel

Advertisement

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>