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