Category: JavaScript

Book Review: jQuery in Action

jQuery in Action, First Edition is written by Bear Bibeault and Yehuda Katz and is probably the simplest and easiest to understand programming book available. Target reader is somebody that already is using javascript in projects and is looking to push the limits of their web applications by using jQuery and many of it’s great plugins.

I found the book and its appendices to be extremely well written. I found the examples to be superbly written and extremely usable in my projects: there aren’t a lot of examples on basic things like selectors but there are a ton of great examples on much more advanced concepts. An additional feature that I found really helpful was the interactive lab exercises that begin around chapter two.

As a reference, which I don’t think was the primary intent, it would be difficult to use the book as some of the API is randomly spread throughout the book. The random spread does make the book a lot better though, because each chapter definitely builds well upon the previous chapter.

I completely recommend this book and can only imagine that the Second Edition improves upon the First Edition. I haven’t really found much negative about the book other than wishing the API wasn’t spread out so much, but the index is very good.

jQuery + PHP to parse XML

jQuery is very well suited for cross browser JavaScript development, but I bet you didn’t know jQuery is also fairly well suited to parsing XML. I often use jQuery to send XMLHttpRequests and then parse the XML returned by a PHP script on the server and then manipulate the return in some way. I won’t really cover exactly what to do with it because this is so dependent on the purpose of your data.

Parsing the XML isn’t overly difficult with jQuery and will allow you to truly use the power of AJAX and eliminate a lot of the complexity with JavaScript. Of course, getElementByTagName and getAttribute aren’t exactly 100% cross browser compatible, and jQuery is pretty much 100% of the time.

Things to Remember

  • PHP must set the content-type to be specified as text/xml or application/xml as seen in the following code example.
  • If you are using .ajax() you must ensure that the dataType is “xml” or you won’t be able to parse the data returned.


<?php
header ("Content-Type: text/xml");
?>

<your_xml_content>
<site ID="1" >
<Title>BRCline Consulting</Title>
<url>www.brcline.com</url>
</site>
</your_xml_content>

<script type="text/javascript" >
$(document).ready(function(){
$.ajax({
type: "GET",
url: "yourURLHere.php",
dataType: "xml",
success: function(xml) {

}
});
});
</script>

Further Reading
jQuery often has a ton of plugins that can increase the flexibility and decrease the amount of time you spend on writing your own “utility” code. One such plugin available to reduce the amount of time spent on writing utility code for parsing XML/RSS feeds is jFeed.

jQuery Scroll To Top

jQuery is so powerful and very flexible and usually makes so many complex takes so simple.

Anything with a scrollbar and can be selected can be programatically scrolled to to the top.

$(div).scrollTop();

Scrolling to top of browser window is as simple as:

$(window).scrollTop(0);

Learning jQuery

jQuery is a really popular JavaScript library that helps really simplify manipulating HTML with JavaScript whether it be CSS, animations or even doing Ajax.

I’ve been using jQuery since at least mid 2008 and have to say that I just love how much easier things are and not having to generally deal with the cross-browser issues in Internet Explorer, Safari,Chrome, and Firefox.

In the roughly two years that I have worked with jQuery, I have referred to a couple of things to learn jQuery and improve my web based applications.

Rebecca Murphy wrote an excellent electronic book called jQuery Fundamentals that she gives away for free from her website. jQuery itself also has many video tutorials, and a fairly well written and maintained web based manual that works similar to a Wiki.

Hope this helps!

Setting Focus to 1st Text Field in jQuery

Setting focus to the 1st field in jQuery is actually really simple: there are some plugins that also can do it automatically on each reload of a form.

I usually just use the following code on any pages where there is a form.


<script type="text/javascript">
$(document).ready(function() {
$("input:text:visible:first").focus();
});
</script>

Hope this helps.

Unobtrusive JavaScript And Why it Matters

Many more senior web developers can remember throwing tags all over the contents of websites and using tables for the presentation of content: these practices are said to be intrusive and a maintenance nightmare especially when the font colour should be pink instead of black on a header.

Unobtrusive JavaScript is another best practice for later maintenance of the site. Unobtrusive JavaScript involves removing the behaviour layer from the structure and content. Instead of having JavaScript mixed throughout the content it is either placed into an external file or placed into the head of the document.

The major advantage of the Unobtrusive JavaScript is that it can also be used for progressive enhancement and other techniques for browsers that offer advanced DOM 2 support. All JavaScript frameworks that I am aware of actively encourage Unobtrusive JavaScript as do many CMS and frameworks.

There are of course some issues with unobtrusive JavaScript because it does take more lines of script and requires discipline, and the use of good coding patterns.