New Javascript Library: jqDialogForms

by Jon Davis 5. January 2009 02:52

(Note: If you link to this blog entry, please use the URL: http://www.jondavis.net/codeprojects/jqDialogForms/ which only temporarily links back to here.)

I'm releasing a v1.0 v1.1 beta build of jqDialogForms, a DHTML-based dialog windows library based on jQuery and jqDnR. This is something I started to build during my free time at my last job (it was never used there) and then continued development and completed it on my own (at home). Since I'm no longer at the job where it would have been useful had it been completed there, I do not have a lot of real-world samples to demonstrate here, but I'm releasing it now in hopes that it can continue to evolve.

There are other libraries out there that produce dialog windows that are completely modal. Modal dialogs are important, but I quickly ran into problems when, for example ...

  • A dialog window spawns a child dialog window
  • I want to see behind the child's parent's window (move the window)
  • I want to open multiple dialog windows at once
  • I'm using any modern browser, including IE 7 in quirks mode
  • Dialog windows are very large, and users are browsing with small monitors or browser windows
  • The user has scrolled down beyond the fold and absolute positioning is used

jqDialogForms has a placeholder for modal dialogs but it's not implemented. The focus instead was on parent disabled+modeless+serializeable windows, meaning the ability to have a child window have a parent window, which forces the child window to retain a top-most z-index over the parent window, while the parent window's form fields are disabled, but you can still access the parent window and even drag it around. None of the windows in this scenario need to be modal; they just retain z-index. You can click on each open window and it acquires "activation", which moves its z-index to the top and then moves all of its child windows above it, and there is also an "active/inactive" titlebar color. It's a Windows 9x multiple app windowing behavior, within the browser. The window is also serializeable, meaning that it is a self-contained <form> with fields that serialize using either jQuery serialize() or using a JSON serialization. It is important to note that I made a point to be ASP.NET Web Forms compatible. jQuery's serialize() function doesn't work well with ASP.NET Web Forms unless the <form>'s are dynamically generated and appended to the body as this library does.

Because it is for dialogs, it assumes Apply and Cancel behavior and the presence of buttons. (OK is Apply+Close. Cancel is Close without Apply.) So there are assignable event handlers for before-show, showApply click, and hide. The default layout implements OK/Cancel and a close box on the top right.

There is a simple test document included with this release that I used to develop the the script, but it is an awful presentation for demoing purposes. The test document and the script itself are complete enough, though, for a knowledgeable Javascript developer to read and understand how it works without documentation. But next on my to-do list is to produce some documentation and samples, but except for modal mode the script itself it pretty much feature-complete, if not quite 100% tested, as a v1.0 beta release.

Features:

  • Modeless+parent disabling+serializeable dialog form windows
  • Reference a DOM element or a string of HTML as the message or form fields to be displayed
  • Automatically switch from fixed positioning to absolute positioning when in quirks mode IE7, and position to the current vertical scroll position
  • jqDnR enabled: Resizeable, Windows 9x style
  • jqDnR enabled: Drag around the screen via the title bar
  • Activateable; show multiple windows, and activate/focus each window as it is clicked on (Windows 9x application windows activation behavior)
  • Lacking CSS conformance of a dialog window container, a prefab one is used that includes a title bar, a close box, and OK/Cancel buttons.
  • OK button invokes Apply event handler and then, if not invalidated, closes the window.
  • Dirty state detection; on editable forms, OK/Apply buttons are disabled unless a field is changed
  • Exposes form serialize functions that outputs name/value HTML/querystring encoding (in the style of jQuery serialize()), or JSON serialization.
  • "Smart" top positioning for oversized dialogs
  • CSS-driven layout

Among the several known issues:

  • Multiple windows do not retain their activation order.
  • No fully modal dialog or truly modeless (non-disabling) support
  • No demo No extensive demos
  • No documentation

A few months back I released a Javascript library called jqAlert. I will probably rewrite jqAlert to use jqDialogForms.

It's NOT perfect, there are a few missing parts and pieces, but as far as I know it's a stable beta and can probably be used in production environments (I think). If you have any comments or suggestions, please use the Comments herein on this blog or e-mail me.

 

Download: 

http://www.jondavis.net/codeprojects/jqDialogForms/ 

 

kick it on DotNetKicks.com

 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , ,

Web Development

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading




 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  October 2014  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar