How jQuery saved my day

While working on an assignment to write a front-end for Wikipedia, I ran into a lot of troubles. First, I searched if there was someone providing API's to get articles from wikipedia(I hate site scrapping). Found Ontok, after working on it for some time, I realized that id was more PITA than sites crapping. They changed API's three times in two weeks and some how managed fuck the hell out of the wiki markup, with some weired encoding that seemed to work fine inside the text editor, when viewed directly from a web browser and when queried from localhost(with PHP) but somehow, it never worked when accessed from my clients box(I was using same configuration as my clients box). Finally decided to do it with cURL(sigh.. :().

Now after using cURL to get articles, client wanted all the links to be rebuilt to point to the search URL of his site rather than wikipedia. Now this required a lot of regular expression work to get this working. I hate to admit, but I din't not want to write regular expression and debuging them for a week. Don't get me wrong, Regexp is a very very powerfull tool but equally easy to shot in your foot.

jQuery came to rescue:
jQuery is a damn cool JavaScript toolkit that really rocks. Here is a bit of code that did all the trick for me: Below is the code snippet that did the trick:

<script src="img/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var search_url = 'http://www.yoursite.com/search.php?q=';
var wiki_url = 'http://en.wikipedia.org/wiki/';
$(document).ready(function() {
// Get all A elements with there 'href' attributes.
$("a[@href]").each(function(i){
//Split the href to pieces
var link = $(this).href().split('/');
//Check if it is an interlink on wikipedia
if(link[link.length-2] == 'wiki'){
// for debugging with FireBug. A must have for web developer.
//See http://www.joehewitt.com/software/firebug/
console.log(link);
//Split the last part of the link to check if it is a non-article link
//Non-Article links will include a ':' like 'Special:sreach', 'Category:Computer'
//We want to keep non-article links intact
var article = link[link.length-1].split(':');
//An article link does not contain a ':', hence will not split
if(article.length == 1){
// This is what we need prefix with the search_url. i.e.
$(this).href(search_url+article[0]);
} else {
//rebuild all other links with to wikipedia, because wikipedia uses relative linking
$(this).attr({target: '_blank', href: wiki_url+link[link.length-1]});
}
} else {
// Make external links open in a new window.
$(this).attr('target','_blank');
}
});
$("#loading").css('display', 'none');
$("#wiki-article").css('display','block');
});
</script>

Notice at the end i am setting display:block for an element with id 'wiki-article'. This is because this javascript script executes when DOM tree for the page is ready. So until the page loads fully, the fetched article will still have original links. We do not want people to see orignial links. So the article was hidden first and we will display it only when it is ready.

jQuery is a great way to do JavaScript. It actually makes JavaScript fun.
 Very easy to learn and very intutive.

Do check out http://www.visualjquery.com/ for a great visual api docs for jquery.

powered by performancing firefox