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.

9 Comments

  • Yes, I recently discovered how useful jQuery can be. I just used it to give alternating table rows a class so that my CSS can style a GridView. Come to think of it, why didn't I use an AlternatingRowStyle CssClass? Doh!

    $(document).ready(function(){
    $("tr:odd").addClass("odd");
    });

  • What issues are you having with jQuery and MasterPages? I'm using those two together without issue (other than ASP.NET's IContainer auto-generated IDs).

  • Hey John,

    The problem is probably more with me, and I don't understand how nesting and such works in jQuery. I figured out a few hacks that seem to do the trick. I should have been more specific. I'm having more trouble with the plugs on MasterPages...

    Will get there...

  • JQuery is excellent. &nbsp;Using the selectors with asp.net controls can be difficult as asp.net auto generates new client side ids. &nbsp;I've gotten around that by using non .net controls, adding a class to the .net control, or writing some code to pass the generated id to the javascript code.

  • $("#") works pretty well.

  • If you going to use master (asp.net), strip ALL web controls and use generic html form fields, basically do traditonal web development code using .net. ASP.NET sucks, but .NET C# is great for all processing.

  • Trying to get the validation text into facebox after i have send data through it.

    Cant figure it out. Is this want you meant by facebox cannot do postbacks?

  • I too have been using facebox with great success ... until using it in conjunction with SIFR. For some reason, the SIFR ignores the z-index set on the div with the rel= facebox, and always is above it.(even though it has a z-index of 1 and the facebox 100) I am at my wits end. i have no idea what else to do ... I have tried everythingggggggg.

    anybody in the same boat as me?

  • I have it working with PostBack's. I created a user control that has methods attached to it. I'm currently using it with ASP.NET Ajax in an update panel where I can invoke it from code behinds. Seems to be working well for me.

    '''
    ''' Methods to invoke FaceBox actions, such as showing a message box, Ajax Content or images programatically. This control requires that a
    ''' FaceBoxManager control be placed in the head HTML element.
    '''
    '''
    <ToolboxData(" ")> _
    Partial Class FaceBox
    Inherits System.Web.UI.UserControl

    '''
    ''' Shows a message box.
    '''
    '''

    '''
    Public Sub ShowMessage(ByVal message As String)
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "FaceBoxScript", String.Format("jQuery.facebox('{0}')", message.HtmlEncode), True)
    End Sub

    '''
    ''' Shows Ajax content in a message box.
    '''
    '''

    '''
    Public Sub ShowAjaxContent(ByVal url As String)
    Dim script As String = "jQuery.facebox(function() { jQuery.get('$URL$', function(data) { jQuery.facebox(data) }) })"
    ScriptManager.RegisterStartupScript(Me, Me.GetType, "FaceBoxScript", script.Replace("$URL$", url), True)
    End Sub

    End Class

Comments have been disabled for this content.