Category: jQuery

Disabling Caching on All AJAX in jQuery

It’s no secret that many of us that use javascript regularly love jQuery because it handles a lot of the cross browser issues and makes our lives so much easier.

The .ajax function makes use of caching by default, but we can override this by creating a function called .ajaxSetup and adding cache: false in the function.

$.ajaxSetup ({
    cache: false
});

You can of course take advantage of this and create even more verbose .ajax calls. 😉

jQuery Mobile: Page Blank

jQuery Mobile is an absolutely amazing javascript framework that can easily assist developing mobile friendly websites. jQuery Mobile is easily summarized by its authors to: “Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.”

After adding jQuery Mobile to my first application, I discovered the page wasn’t rendering anything. When using firebug I determined that the body class had “ui-mobile-rendering” attached to it. The ui-mobile-rendering could occur in a few cases: javascript has died for some reason, or you have forgot to include a div with data-role=”page”.

The documentation for the jQuery Mobile framework is very good, but navigating through it on a pc isn’t exactly a great user experience. I hadn’t seen this page till I started really digging into the framework’s documentation and some of the different javascript forums.

Hope this helps.

Component returned failure code: 0x805e000a

Error: uncaught exception: [Exception… “Component returned failure code: 0x805e000a [nsIXMLHttpRequest.open]”
nsresult: “0x805e000a ()”

AdBlock interferes with the XmlHTTPRequest object and is known to sometimes break the way jQuery functions especially if the url triggers some sort of url filter.

You have a few options to resolve the solution:

  • suggest that users turn off AdBlock if the class called global_message exists.
  • Change the url posting or geting from.

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

I’ve been using jQuery since 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.