jQuery, Facebox and AJAX
One frustration that I've had for the 4 years that I've been working with AJAX is how messy the front-side code can get. There's lots of JavaScript, and that can get kind of annoying. Plus, there's the design perspective of trying to find the right real-estate to put things in. Where do you have a hidden div pop up and provide space for an update? I've been working on a project for my wife, and I've found a nice way to get around some of that, separate my code a little bit, and clean things up so they aren't so cluttered.
Recently, I ran across the jQuery library. It is a seemingly robust JavaScript wrapper that simplifies (greatly) the amount of code you write for a routine task. For example, before jQuery, if you wanted to toggle the visibility (display) of a div, you would have to do this:
function toggle(p)
{
if (document.getElementById("case" + p + "List").style.display == "none")
{
document.getElementById("case" + p + "List").style.display = "inline";
document.getElementById("img" + p).src = 'images/minus.jpg';
}
else
{
document.getElementById("case" + p + "List").style.display = "none";
document.getElementById("img" + p).src = 'images/plus.jpg';
}
}
With jQuery, you simply do this:
function toggleStatus()
{
$("#statusChange").toggle();
}
It's really that simple. So, jQuery is a great little framework that allows me to do a ton of stuff.
Enter "Facebox." This is a jQuery plug-in that creates a Facebook style pop-up window. It can be used as a lightbox, or more importantly for me, as a container for other content, including complete pages. To open an instance of Facebox, all I do is create a hyperlink tag (<a href='test.htm' rel='facebook'>test</a>). When I click this link, Facebox pops up with the contents of test.htm neatly packed inside. Beautiful.
Now, I simply create a new page, call it "createnewwhatever.aspx," plug it in to my URL, and do all my AJAX stuff on that page. Keeps it clean, because it's not on your main page, and it's reusable.
The one thing Facebox cannot do is post-backs. That doesn't really bother me much yet. Who knows if it will or not. I've also not had much luck with jQuery and MasterPages. (Facebox works, but I'm having trouble with other plugs.) I probably just don't understand the syntax well enough.
But, this represents a significant step forward for me in terms of UI design and usability. Try it out.