I cut my teeth on classic ASP where you build applications by including various blocks using SSI (server-side include) syntax. If you wanted to include common content (e.g. branding or a copyright statement) inside your <body> you would include it like this:
<!-- #include file="copyright.asp" -->
Aside from <iframe> there is no way to include content from other sites using HTML. You need JavaScript so I wrote a 3-liner jQuery script which does just that. Consider this HTML:
<div class="ssi" data-url="copyright.html"></div>
Add the following JavaScript to your $(function(){}); and you'll have client side includes:
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
What does this do? It iterates through all divs with the class 'ssi' and loads their content asynchronously from the url specified in their 'data-url' attribute. I think this is neat.
Full source:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function() {
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
});
</script>
</head>
<body>
<div class="ssi" data-url="a.html"></div>
<div class="ssi" data-url="b.html"></div>
</body>
</html>
Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Saturday, December 15, 2012
Tuesday, November 1, 2011
YQL: All the Data you can Eat
I love SQL and I love data. Just give me a database and some SQL and I'll analyse the bejeesuz out of it. I also like flexible interfaces. YQL provides all of this. The Yahoo Query Language is basically 2 things:
Say you wanna query an RSS feed:
This will return the RSS items from the Yahoo! sports site. You can of course specify multiple feeds using IN (url1, url2) and you can also sort (example).
You can query weather, flickr for photos, find restaurants in San Francisco , list music videos ... I think you get the picture.
There is also the YQL Console, a place to test out your queries. It will generate the link which you can then use in your applications to query data. As you will see, you can specify the output format as XML or JSON:
The callback function wraps your data in a javascript function which means you just AJAX the URL above and your callback function will automatically be executed.
Finally the really gr8 thing about YQL is that it's free and it's cross-domain compatible. If you've ever made an application which fetches data from a different domain you'll know of the issues involved. Modern browsers just don't allow it unless the server says it's OK. YQL always adds the "it's OK header" (Access-Control-Allow-Origin: *) which means it damn well works. Very nice of dem folks at Yahoo!.
Finally, the other of the final 3 great things is that you can literally query (scrape) any web page on the, er, web. You can query normal HTML pages or XHTML or XML sources.
Coming soon, my jQuery Mobile RSS Reader app which uses YQL and Local Storage to save your RSS.
- A huge data source
- An easy query language which resembles SQL
- Standardized output format (JSON or XML)
Say you wanna query an RSS feed:
SELECT * FROM rss WHERE url = 'http://sports.yahoo.com/top/rss.xml'This will return the RSS items from the Yahoo! sports site. You can of course specify multiple feeds using IN (url1, url2) and you can also sort (example).
You can query weather, flickr for photos, find restaurants in San Francisco , list music videos ... I think you get the picture.
There is also the YQL Console, a place to test out your queries. It will generate the link which you can then use in your applications to query data. As you will see, you can specify the output format as XML or JSON:
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.oceans&format=json&callback=showOceans
The callback function wraps your data in a javascript function which means you just AJAX the URL above and your callback function will automatically be executed.
Finally the really gr8 thing about YQL is that it's free and it's cross-domain compatible. If you've ever made an application which fetches data from a different domain you'll know of the issues involved. Modern browsers just don't allow it unless the server says it's OK. YQL always adds the "it's OK header" (Access-Control-Allow-Origin: *) which means it damn well works. Very nice of dem folks at Yahoo!.
Finally, the other of the final 3 great things is that you can literally query (scrape) any web page on the, er, web. You can query normal HTML pages or XHTML or XML sources.
Coming soon, my jQuery Mobile RSS Reader app which uses YQL and Local Storage to save your RSS.
Tuesday, August 30, 2011
Tinkering with Javascript Libraries on jsfiddle.net
Man I'm out of it. Such great tools that I missed during my post-2.0 slumber.
jsfiddle allows you to quickly and easily make and test JavaScript apps using some of the cool libraries out there (e.g. jQuery or mootools).
Just go to http://jsfiddle.net and start hacking in your HTML, Javascript and CSS. Press Ctrl+Enter to run and your app will, er, run!
I think it's cool.
Check out my sandbox application which says hello to you via ajax. Oh the wonders of modern technology.
jsfiddle allows you to quickly and easily make and test JavaScript apps using some of the cool libraries out there (e.g. jQuery or mootools).
Just go to http://jsfiddle.net and start hacking in your HTML, Javascript and CSS. Press Ctrl+Enter to run and your app will, er, run!
I think it's cool.
Check out my sandbox application which says hello to you via ajax. Oh the wonders of modern technology.
Subscribe to:
Posts (Atom)