Trent Richardson
A new version of Impromptu is now available, however it is only a bug fix so there is no new functionality, sorry folks. However I have whipped up a better demo to showcase the States functionality of Impromptu. For starters you can take a look at this quick clip on what it looks like:
Now to do something like this is simple, but there is some configuration involved. If you’ve used Impromptu in the past you should have no problem catching on as it just builds on previous methodologies. Each form shown within the prompt is a “State”. Each state has its own html, buttons, and submit function so we can validate that form before moving on. So far so good? Same theory as before. Now we just take it one step further by passing in multiple sets of these, so we’ll create an object with multiple sets of these states.
var temp = {
state0: {
html:'HTML LEFT OUT FOR SCREEN SPACE, RADIO BUTTONS',
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){
if(!v)
jQuery.ImpromptuClose()
else $.ImpromptuGoToState('state1');//go forward
return false;
}
},
state1: {
html:'HTML LEFT OUT FOR SCREEN SPACE, CHECKBOXES',
buttons: { Back: -1, Cancel: 0, Next: 1 },
focus: 2,
submit:function(v,m,f){
if(v==0)
jQuery.ImpromptuClose()
else if(v==1)
$.ImpromptuGoToState('state2');//go forward
else if(v=-1)
$.ImpromptuGoToState('state0');//go back
return false;
}
},
state2: {
html:'HTML LEFT OUT FOR SCREEN SPACE, SELECT BOX',
buttons: { Back: -1, Cancel: 0, Next: 1 },
focus: 2,
submit: function(v, m, f){
if (v == 0)
jQuery.ImpromptuClose()
else if (v == 1)
$.ImpromptuGoToState('state3');//go forward
else if (v = -1)
$.ImpromptuGoToState('state1');//go back
return false;
}
},
state3: {
html:'HTML LEFT OUT FOR SCREEN SPACE, TEXTAREA',
buttons: { Back: -1, Cancel: 0, Finish: 1 },
focus: 2,
submit:function(v,m,f){
if(v==0)
jQuery.ImpromptuClose()
else if(v==1)
return true; //we're done
else if(v=-1)
$.ImpromptuGoToState('state2');//go back
return false;
}
}
}
Now we’ve created our object of states, now all we have to do is pass them as we did in the old days of pre-Impromptu 2.0
$.prompt(temp,{
callback: function(v,m,f){
var str = "You can now process with this given information:<br />";
$.each(f,function(i,obj){
str += i + " - <em>" + obj + "</em><br />";
});
$.prompt(str);
}
});
I’ve also added a callback function just to show off how to get all the submitted values. The third callback(and submit) function parameter is new to version 2. It stores all values of form fields by key/value pairs. If any field has more than one value(checkboxes and multiple select boxes) an array will be assigned to that key. Thats it! A whole lot of nifty new functionality using the same processes as before. I’d love to see some examples around the web of this in action! You can check out this full example here
Related posts:
3 Responses
Shad
24|Feb|2009Nice work. The multiple form demo really shows off the power of states. Also, the new version runs great in Safari 4 beta.
bootZ
25|Feb|2009Like the new demo!!
Just a note on the close (‘X’) selection as you may want this to act like a cancel button but the values returned in the function call are ‘undefined’. So in every function callback it would be prudent to check that the input is defined before continuing as you will likely get failures otherwise.
if(v == undefined){return false;}
trent
25|Feb|2009Yes, since the ‘X’ isn’t a button v will not be defined since no button was clicked. It is always important to check which button was clicked. (I need to note that on the documentation page, thanks for reminding me bootz) I’ve looked at how jQuery UI does their dialogs, they pass in a callback for each button, I prefer one callback and you can do what you want when they are clicked, but hey I’m open for opinions and suggestions here.. I think if UI had states functionality in their dialog that would become too much configuration for a prompt.
Shad, thanks, and glad it works well on Safari 4 as I haven’t had a chance to try it out yet.