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

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

Usage of Google Translator Api For Free !!!!!!!

Hello Friends,

I found a hack to use Google Translator services.

As I was working on my scrapper project, category titles were  needed to translated from Dutch to English and we do not wanted to use any paid service.

I have tracked the requests made From   translate.google.com  and gathered them, then fetched responses from my curl function which I have Posted before .

below is the final code. It is working perfectly. Please let the page loaded for proper source code view.

<?php

function curl($url,$params = array(),$is_coockie_set = false)
{

if(!$is_coockie_set){
/* STEP 1. let’s create a cookie file */
$ckfile = tempnam ("/tmp", "CURLCOOKIE");

/* STEP 2. visit the homepage to set the cookie properly */
$ch = curl_init ($url);
curl_setopt ($ch, CURLOPT_COOKIEJAR, $ckfile);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec ($ch);
}

$str = ''; $str_arr= array();
foreach($params as $key => $value)
{
$str_arr[] = urlencode($key)."=".urlencode($value);
}
if(!empty($str_arr))
$str = '?'.implode('&',$str_arr);

/* STEP 3. visit cookiepage.php */

$Url = $url.$str;

$ch = curl_init ($Url);
curl_setopt ($ch, CURLOPT_COOKIEFILE, $ckfile);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);

$output = curl_exec ($ch);
return $output;
}

function Translate($word,$conversion = 'hi_to_en')
{
$word = urlencode($word);
// dutch to english
if($conversion == 'nl_to_en')
$url = 'http://translate.google.com/translate_a/t?client=t&text='.$word.'&hl=en&sl=nl&tl=en&multires=1&otf=2&pc=1&ssel=0&tsel=0&sc=1';

// english to hindi
if($conversion == 'en_to_hi')
$url = 'http://translate.google.com/translate_a/t?client=t&text='.$word.'&hl=en&sl=en&tl=hi&ie=UTF-8&oe=UTF-8&multires=1&otf=1&ssel=3&tsel=3&sc=1';

// hindi to english
if($conversion == 'hi_to_en')
$url = 'http://translate.google.com/translate_a/t?client=t&text='.$word.'&hl=en&sl=hi&tl=en&ie=UTF-8&oe=UTF-8&multires=1&otf=1&pc=1&trs=1&ssel=3&tsel=6&sc=1';

//$url = 'http://translate.google.com/translate_a/t?client=t&text='.$word.'&hl=en&sl=nl&tl=en&multires=1&otf=2&pc=1&ssel=0&tsel=0&sc=1';

$name_en = curl($url);

$name_en = explode('"',$name_en);
return  $name_en[1];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<?php
echo "<br><br> Hindi To English <br>";
echo  Translate('कानूनी नोटिस: यह गूगल के अनुवादक सेवाओं की एक दुरुपयोग है, आप इस के लिए भुगतान करना होगा.');
echo "<br><br> English To Hindi <br> ";
echo  Translate('legal notice: This is an abuse of google translator services ,  you must pay for this.','en_to_hi');
echo "<br><br> Dutch To English <br>";
echo  Translate('Disclaimer: Dit is een misbruik van Google Translator diensten, moet u betalen.','nl_to_en');

echo "<br><br> Just Kidding ....... :)";
?>
</body>
</html>

Copy this code in php file and hit it.
You will need to enable curl for this code to work.

Currently It supports Three translations

1)Hindi To English       2)English To Hindi       3) Dutch To English

If you want to add more translations Follow the steps below

1) Go to http://translate.google.com/ by Mozilla Firefox

2) open firebug and type any thing them copy the URL of Ajax request made by the browser.

3) Place it in the translate function with proper condition and replace &text parameter in the url with $word variable.
Let me know if it is helpful or give your valuable suggestions.

And Please don’t tell this to Google Ha ha …….

and if you want me to work on your project, contact me from here.

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>

Get Local Time by Address using Earth tools and Google maps(Location To Time PHP)

Context:

Once I was needed to fetch correct time of the location by it’s address. My project was a portal application and the user should be facilitated with the local time of other users. so I have made a function that can calculate correct time  of the address supplied.

Implementation:

This function uses two APIS

1) Google maps

2) Earth tools

By calling Google maps I have fetched lat & lng of the location and passed them to earth tools.

Earth tool  provides the correct time at the lat&lng supplied.

/*@param $address (string) comma separated address (full or partial)

*/

public function GetLocalTime($address)
{
// fetching lat&amp;lng from Google Maps
$request_uri = 'http://maps.googleapis.com/maps/api/geocode/xml?address='.urlencode($address).'&amp;sensor=true';
$google_xml = simplexml_load_file($request_uri);
$lat = (string)$google_xml-&gt;result-&gt;geometry-&gt;location-&gt;lat;
// fetching time from earth tools
$lng = (string)$google_xml-&gt;result-&gt;geometry-&gt;location-&gt;lng;
$earth_uri  = "http://www.earthtools.org/timezone/$lat/$lng";
$earth_response = simplexml_load_file($earth_uri);
return (string)$earth_response-&gt;localtime;
}

echo GetLocalTime('Ahmedabad,Gujarat');

Let me know if it is useful to you or have any query, Thanks for reading.

Regards,

Rupesh Patel

General purpose function for curl

Hi there,

I was working on a project which included a web scrapper to grab data from a site. For that I had to use curl,  but the problem was the site was checking for cookies on some pages so I have made a function which can serve my application and set cookies when ever required. I have found it on some where and modified to serve my purpose.


/*

*@param: $url  is the URL which will be called

*@param: $params (array)the parameters which will be passed by get method

*@param: $is_coockie_set whether cookies should be set or not

*/

public function curl($url,$params = array(),$is_coockie_set = false)
 {

if(!$is_coockie_set){
 /* create a cookie file */
 $ckfile = tempnam ("/tmp", "CURLCOOKIE");

/*  visit the homepage to set the cookie properly */
 $ch = curl_init ($url);
 curl_setopt ($ch, CURLOPT_COOKIEJAR, $ckfile);
 curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
 $output = curl_exec ($ch);
 }

$str = ''; $str_arr= array();
 foreach($params as $key => $value)
 {
 $str_arr[] = "$key=".urlencode($value);
 }
 if(!empty($str_arr))
 $str = '?'.implode('&',$str_arr);
 $ch = curl_init ($url.$str);
 curl_setopt ($ch, CURLOPT_COOKIEFILE, $ckfile);
 curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);

return  $output = curl_exec ($ch);

}

http://www.seoeducation.in/advanced-seo-basics