Trent Richardson
The day has come. jQuery Impromptu is changing the face of ajax forms as we speak. Plain Jane prompts and dialogs are a thing of the past. jQuery Impromptu 2.0 now introduces “States” to have multiple forms with in a prompt. For instance an installer, you click Forward, Accept, Forward, Install all within the same window. Now you can have the same functionality easily with Impromptu. Take a peek at this video demonstration:
Please pardon the poor quality, hopefully I’ll get a better video shortly..
Instead of boring you with tons of rambling, check out the docs and the states example. Hope you enjoy, I know I sure will!!!
Related posts:
10 Responses
Wick
12|Feb|2009That’s great, States look like a neat feature. I’m a few versions behind & just came back to your site to see what I’d missed in the meantime. Keep up the good work. I’ve used Impromptu to help with various functions (verifying user-submitted data, leaving site notifications etc) on CarComplaints.com for about a year & am very happy to donate something to support your work.
trent
12|Feb|2009Glad to see there are returning users. I’m pretty excited myself about the new features and I hope others are too!
Wick
12|Feb|2009A few days ago I noticed some errant padding was showing up (all browsers) above the rounded corners I’m applying to the jqi container. Today when I came here to grab the new Impromptu version, I noticed the same corners/padding problem is showing up in Example 12.
Some troubleshooting showed the corner plugin isn’t calculating any negative top margin, which it needs to negate the 10px top padding on the jqi container. The problem only happens using slideDown as the ‘show’ effect (Example 11, using fadeIn, looks fine).
The root problem appears to be that the corners are applied during the slideDown animation. I’m totally guessing here – I think the slideDown animation probably changed in jQuery 1.3.x so the top padding of the animated element is temporarily set to zero during the animation. It’s a good theory anyway & I’m sure someone with more time to go digging can come up with whether that’s the real reason. The errant padding doesn’t show up when using jQuery 1.2.6.
I worked around the issue using the queue method:
$.prompt(…etc…).children(‘#colsJqi’).queue(‘fx’,function() { $(this).corner(); });
.. which seems to work fine. Any other ideas? A setTimeout works too but that’s even more of a hack.
trent
12|Feb|2009I noticed this two when I upgraded the examples to jQuery 1.3 last night, but haven’t had a chance to look into it. I haven’t checked to see if there is a new corner plugin or not. Sure wish all the browsers supported the rounded corners with css.. :/
You could also probably use the “load” function option on Impromptu, but that’s not really curing the problem
Wick
12|Feb|2009Oops, I missed that setting in the docs. Right at the top too! :)
Watching a 30-second slideDown with Firebug confirms that jQuery 1.3.1 animates top & bottom padding, & jQuery 1.2.6 does not.
Jason Roelofs
13|Feb|2009I was half way through implementing my own “stateful” handling of prompts when I decide to check out the project’s page and look at what I find.
Wow, talk about reading minds, this is fantastic! Thanks, impromptu is an awesome tool that just got even better.
trent
16|Feb|2009Wick, The problem with the corner plugin can be solved by using fadeIn as the “show” option. A couple versions ago I chanded fadeIn to the default because of some webkit issues with forms within the prompt. So if you just remove your show option and allow fadeIn everything should work fine!
Ben K
24|Feb|2009wow cool, thanks for your work trent!
i think in the visual docs, the last parameter ‘f’ is missing from the mysubmitfunc
i.e.
function mysubmitfunc(v,m){
should be
function mysubmitfunc(v,m,f){
i’m yet to test using states as a confirmation dialogue but i think it should work well!
thanks again
Michal
05|Mar|2009I think it will be better to replace div.jqiclose with anchor or insert anchor into this div.
With div there is problem with styling :hover
trent
05|Mar|2009Good point Michal, I will look at adding this into the next version