Friday, April 7, 2017

Defining a HTML template to append using JQuery

Append Dynamic content to html template using Jquery

If we want to append the dynamic content to html template using jquery below will be the simple solution

	<!DOCTYPE html>

	<html>
	<head>
	<title>Modular Design Pattern</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<div>TODO write content


	<input type="button" name="button" value="buttonclick" id="buttonclick"/>
	<div id="target"></div>
	</div>
	</body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<script>
	$(document).ready(function () {


	//Clone the template
	var template = $('#hidden-template').html();

	$('#buttonclick').click(function () {
	//Clone the template
	var item = $(template).clone();

	//Find the
	$(item).find('.first').html("First");

	//Change 'bar' to '-Bar'
	$(item).find('#bar').html("-Bar");

	//Append to the source
	$('#target').append(item);
	});
	});
	</script>


	<script id="hidden-template" type="text/x-custom-template">
	<tr>
	<td class="first">Foo</td>
	<td id="bar">Bar</td>
	<tr>
	</script>


	</html>

view raw index.html hosted with ❤ by GitHub

Wednesday, April 5, 2017

Iframe communication or Accessing a cross-origin frame

Accessing a cross-origin frame.

window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains. This post showed interaction from parent to child. Even when we keep the iframe domain url is different for the main page url.
With out using the window.postMessage will gives us below error message in console

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

You can't access an iframe with Javascript, it would be a huge security flaw if you could do it.
For the same-origin policy browsers block scripts trying to access a frame with a different origin.
Origin is considered different if at least one of the following parts of the address isn't maintained: ://:/path/to/page.html Protocol, hostname and port must be the same of your domain, if you want to access a frame.

Examples
Here's what would happen trying to access the following URLs from http://www.example.com/home/index.html

URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html.html -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different hostname & protocol
Workaround

	<!DOCTYPE html>
	<html>
	<head>
	<title>My Iframe</title>
	</head>
	<body>

	<button>Button</button>
	<div id="childdiv"> </div>

	<script type="text/javascript">
	//To Recive the parent frame message
	document.querySelector('button').onclick = function () {

	parent.postMessage("myevent", "*")
	};



	</script>

	</body>
	</html>

view raw iframe.html hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<title>Index</title>
	</head>
	<body>

	<iframe src="iframe.html" id="iframe" width="300" height="300"></iframe>

	<script type="text/javascript">

	var eventMethod = window.addEventListener
	? "addEventListener"
	: "attachEvent";
	var eventer = window[eventMethod];

	var messageEvent = eventMethod === "attachEvent"
	? "onmessage"
	: "message";

	eventer(messageEvent, function (e) {
	alert('Message from iframe just came!');
	console.log(e);
	});

	//send message to child window

	window.onload = function () {
	document.getElementById("iframe").contentWindow.postMessage(
	'test message',
	"*"
	);
	};


	</script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Monday, April 3, 2017

Get Google contacts with Javascript using Google Contacts API and OAUTH 2.0

To get the Google Contacts with Javascript using Google Contacts Api

To Pull the google contacts we need to create a project in google developer console

Create a Google application in Google Developers Console for obtaining your Client id and Client secret

Go to Google Google Developers Console and login with your google account.
create one a project by clicking Create Project Button
Go into the newly created project
Click On the Menu icon and select the Api Manager Link
Search for “Contacts API” and click on it
Enable the “Contacts API” by hitting the “Enable API” button

Below is the code to pull the contacts from google relplace client id with newly created client id

	<html>
	<head>
	<title>Google Contacts</title>
	</head>
	<body>


	Body .....
	<div id="con"> </div>

	<button onclick="auth();">GET CONTACTS FEED</button>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://apis.google.com/js/client.js"></script>


	<script type="text/javascript">
	function auth() {
	var config = {
	'client_id': "client_id",
	'scope': 'https://www.googleapis.com/auth/contacts.readonly'
	};
	gapi.auth.authorize(config, function() {
	fetch(gapi.auth.getToken());

	});
	}

	function fetch(token) {
	$.ajax({
	url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token.access_token + "&alt=json",
	dataType: "jsonp",
	success:function(data) {

	// display all your data in console
	// console.log(JSON.stringify(data));
	// $("#con").html(data);


	var data=data;
	var entry=data.feed.entry;
	$( entry ).each(function( index,vaule ) {
	var phone="";
	if(vaule.gd$phoneNumber){
	phone=" Phone No:"+vaule.gd$phoneNumber[0].$t;
	}

	var cont="<div> <span>"+index+" </span>"+ vaule.title.$t+phone+"</div>";
	$("#con").append(cont);

	});
	}
	});
	}
	</script>
	</body>
	</html>

view raw google-contacts hosted with ❤ by GitHub

Lamp MAK