Ben Forta's Blog - jQuery

Flexicious Data Grid, Updated, And Now For HTML

Mon, 27 May 2013 17:14:00 -0400

It's been quite a while since I last mentioned Flexicious, the incredibly powerful and flexible Flex datagrid. Well, the Flexicious team have been busy, and have released a new Spark-based datagrid and charting engine as Flexicious 3. In addition, they have released HTMLTreeGrid, a JavaScript port of their Flex DataGrid, built on top of jQuery, DOJO, and EXT-JS.

jQuery Mobile 1.3.1 Released

Sun, 14 Apr 2013 23:08:00 -0400

I completely missed this one last week (hey, MAX is just weeks away, that's my excuse!). jQuery Mobile 1.3.1 was released with about 50 fixes and improvements to the library.

Appliness March 2013 Is Out

Sat, 09 Mar 2013 23:37:00 -0400

The March 2013 issue of Appliness features an interview with W3C champion Lea Verou, as well as lots of JavaScript, jQuery, PhoneGap, and CSS goodness.

jQuery Mobile 1.3.0 Released

Wed, 20 Feb 2013 18:23:00 -0400

Title says it all, jQuery Mobile 1.3.0 is a huge update!

The jQuery Plugin Registry

Sun, 27 Jan 2013 21:35:00 -0400

Last week, jQuery team member Adam Sontag announced the availablity of the jQuery Plugin Registry, your one-stop shop for plugin developers and consumers.

Free ColdFusion 10 jQuery Mobile Tutorial

Tue, 27 Nov 2012 16:36:00 -0400

The folks over at Fig Leaf Software are offering a Free ColdFusion 10 jQuery Mobile Tutorial, a 50 page PDF with lessons and exercises.

jQuery Developer Summit This Week

Sun, 14 Oct 2012 21:53:00 -0400

If you are in the Greater DC area, you may want to take part in two days of coding and collaboration with the jQuery community at the jQuery Developer Summit. Adobe is a sponsor and Adobe folks will be present (unfortunately I'll be on the other coast this week). You need to apply to attend, so if you're interested, do it quickly!

jQuery Mobile 1.1 Final Release

Tue, 17 Apr 2012 17:15:00 -0400

With being offline for almost two weeks I missed lots of important news, including this announcement of the release of jQuery Mobile 1.1 Final.

jQuery Mobile 1.0.1 Released

Tue, 31 Jan 2012 11:46:00 -0400

jQuery Mobile 1.0.1 has been released, full list of enhancements in this blog post.

Preventing Annoying jQuery Mobile Page Transitions

Thu, 05 Jan 2012 19:49:00 -0400

The default jQuery Mobile page transitions are slide for pages and pop for dialogs. And on Android these can be sluggish and appear to flash on and off annoyingly. Turning off transitions is easy, well, once you know the code you need. The following (which is not overly clear in the docs) was given to me by fellow Adobian, and jQuery Mobile contributor, Kin Blas.

$(document).bind("mobileinit", function() {
	$.mobile.defaultPageTransition = "none";
	$.mobile.defaultDialogTransition = "none";
});

Simple, right? Well, there is one catch. The mobileinit event has to be bound before jQuery Mobile is loaded. In other words it needs to be after your code that loads jQuery, but before the code that loads jQuery Mobile. You can put it right inline, or in its own .js file, which you can include.

Series On jQuery Mobile Theme Skinning

Tue, 03 Jan 2012 09:58:00 -0400

The Fireworks team has started a 5-part blog series on jQuery Mobile Theme Skinning using Fireworks CS5 and the CSS3 Mobile Pack extension.

Displaying A Loading Indicator In jQuery Apps

Fri, 30 Dec 2011 10:58:00 -0400

The following is based on a jQuery Mobile app I am working on. But, the code and details apply to jQuery, too. The app I am working on makes frequent Ajax calls to back-end services, and so I want a busy indicator that shows the user that activity is occurring. This is actually really easy to do, once you have a few steps in place. So ... First you'll need the indicator itself. The simplest way to do this is with an animated GIF (and, yes, that means that the indicator won't reflect the relative wait time like a progress bar would). For great free animated GIF loading indicators, go to ajaxload.info. Once you have the image, embed it in your page using an <img> tag: I want the image centered on the page, accomplished using this CSS:

.ajaxLoader {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -24px;
	margin-left: -24px;
	z-index: 100;
	display: none;
}

The GIF I used was 48px x 48px, so the margins are set to -half that size. That, combined with 50% for top and left ensures that the image is centered in the page. z-index is set to 100 to ensure that the image is in the foreground, and display:none prevents the image from being displayed. Now there is an invisible animated GIF on the page. The next step is to show the image when an Ajax call starts and hide it when the call completes. jQuery makes this incredibly simple to do via the ajaxSetup() function. Here's the code:

$.ajaxSetup({
	beforeSend:function(){
		$("#imgAjaxLoader").show();
	},
	complete:function(){
		$("#imgAjaxLoader").hide();
	}
});

When an Ajax call is initiated, beforeSend calls .show() to display the animated GIF, and when complete, .hide() hides the image. Simple. My own jQuery Mobile app makes Ajax calls on multiple pages, and so I embedded the same animated GIF on each page, all using the same style. Rather than bothering to track which page is displayed to show / hide just that animated GIF, I use jQuery to show / hide all of them, like this:

$.ajaxSetup({
	beforeSend:function(){
		$(".ajaxLoader").show();
	},
	complete:function(){
		$(".ajaxLoader").hide();
	}
});

.ajaxLoader finds every tag styled as ajaxLoader, so $(".ajaxLoader").show() shows all of the loader GIFs and $(".ajaxLoader").hide() hides them all. Nice and simple!

jQuery Mobile Collapsible Control Refresh Gotcha

Thu, 29 Dec 2011 21:35:00 -0400

jQuery lets you manipulate control contents at runtime, for example, you can add and items to an ordered or unordered list using code like this:

$('#myList').append('Some text
');

If you do this in jQuery Mobile, you must then force the control to refresh so that formatting and styles are reapplied, like this: $('#myList').listview('refresh'); Simple, right? Well, not always. One of my lists contains collapsible items created using data-role="collapsible". And for some reason that I have yet to determine, when listview('refresh') refreshed the control it did not refresh the collapsible data-role, so all data was displayed, head and collapsible content, in one mess. The solution? I had to call the collapsible() method on each list item that needed to be collapsible in addition to doing the refresh. I used jQuery .find() to find all <li> controls with a data-role of "collapsible", and then called .collapsible({refresh:true}) for each, like this:

$('#myList').listview('refresh');
$('#myList').find('li[data-role=collapsible]').collapsible({refresh:true});

Obviously, to use this code with other controls you'd need to change 'li[data-role=collapsible]' to reflect the HTML control you are using. Again, I have yet to figure out why this is necessary. But, it is, and it works.

Trapping jQuery Mobile Dialog Open And Close

Tue, 13 Dec 2011 11:29:00 -0400

I needed to trap the events triggered when a dialog is opened and closed in a jQuery Mobile app. After trying all sorts of combinations of open, close, and dialog events, I found that these will do the trick:

// Dialog opened 
$('#myDialog').on("pageshow", function() {
	alert("Opened");
});

// Dialog closed 
$('#myDialog').on("pagehide", function() {
	alert("Closed");
});

jQuery Mobile Control Refresh Gotcha

Mon, 12 Dec 2011 13:47:00 -0400

jQuery lets you manually manipulate controls like lists. For example, you can do something like this to add an item to a list:

$('#myList').append('Some text
');

In jQuery Mobile, if you manually update lists like that, then when you are done you must force the list to refresh so that formatting and styles are applied. To do this, just use: $('#myList').listview('refresh'); But, there is one gotcha you should be aware of. jQuery Mobile apps are usually comprised of pages, each defined with a <div data-role="page">, and often with multiple in the same .html file. jQuery (and thus jQuery Mobile) lets you manipulate any controls in your page, so you can append or change controls in a page not currently being displayed. But, the .listview('refresh') call? That will only work if the control is on the currently displayed page. If you try to .listview('refresh') a control on a page that is not displayed, you'll see this error: Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh' So, if you do need to update controls on a not currently displayed page, remember to load that page before triggering the refresh.