Title says it all, see this message.

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:

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:

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:

.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 lets you manipulate control contents at runtime, for example, you can add and items to an ordered or unordered list using code like this:

If you do this in jQuery Mobile, you must then force the control to refresh so that formatting and styles are reapplied, like this:

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:

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.

Bertrand Delacretaz has announced that the proposal to have Flex join the Apache Incubator is now open for voting.

Need legally-binding electronically signed documents on the go? Check out the free Adobe EchoSign app. Details here

Earlier this week we hosted a summit to discuss our plans for Flex and the partnership with Apache Software Foundation. In attendance was Roundrach's Adam Flater who has shared his thoughts on the subject. This one is worth the read, both the post and the comments.

Two this week:

• Nature Publishing Group (New York, NY) is looking for a senior ColdFusion developer. Requirements include minimum of 5 years programming experience for customer facing websites, and experience with ColdFusion 8 or 9, e-commerce integration, and mobile development. Details posted online.
• InfoComm International (Minneapolis, MN) is looking to hire a ColdFusion 6-9 month contractor with the possibility of full time hire. Requirements include experiance with ColdFusion and SQL Server. Frontend experience such as JQuery preferred. Details posted online.

Intergral has announced a free iOS client for their FusionReactor Enterprise Pro - Active Server Monitor. FusionReactor Mobile provides a feature rich monitoring dashboard which gives you instant notifications of your current server status. It is the ideal way to keep track and monitor your Adobe ColdFusion Servers, Flex and J2EE applications directly from your mobile device. An Android version is on the way.

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:

The ColdFusion team has just posted a security hotfix to address a potential cross-site scripting vulnerability in ColdFusion 8.x and 9.x (Windows, Macintosh and Unix).

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

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:

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:

So, if you do need to update controls on a not currently displayed page, remember to load that page before triggering the refresh.

jQuery is freaking amazing, you all know that already. jQuery Mobile? It's a great v1 effort (and it just won the Innovation of the Year award), but is not quite as complete as it needs to be. If you are playing with jQuery Mobile, you owe it to yourself to check out JTSage's jQuery Mobile plugins, DateBox (a date and time picker, it blows away the in development jQuery Mobile experimental datepicker), and SimpleDialog (a replacement for JavaScript alert() or dialog()). Both are must haves!

My BlackBerry PlayBook hung yesterday. It took some digging to find the magic "hard reset" button, so I'm posting it here for when I need it next. Simultaneously press the power button and the volume down button, and hold for 10 - 15 seconds. Tada!

A group of my fellow Adobe evangelists have created the Game of Flex for iPad, Android tablets, and (soon) Blackberry PlayBook. The game consists of questions to quiz you on Flex development. If you correctly answer the quiz, you'll get a chance to win a copy of Flash Builder 4.6 (one license per month). Game of Flex is not only a game, it's also a fantastic learning tool that showcases all the new features of Flex 4.6.

Remember the Sony sponsored Adobe AIR App Challenge that I mentioned a while back (and on stage at MAX)? Well, the winning apps have been announced.

Jacob Surber has written an article Introducing Adobe Flex 4.6 SDK, and Adam Lehman explains What's new in Flash Builder 4.6.

Title says is all, click here to download.