jQuery Impromptu Extension - submit on enter event

About jQuery Impromptu

[14.05.2012 Update] The new, 4th, version of jQuery Impromptu is out there. I made update for it too.

jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

Take a look at official page of Impromptu with nice examples:
http://trentrichardson.com/Impromptu/index.php


Why my extension?

One big thing missing in jQuery Impromptu 3.1 and still in 4.0.1 is enter key event handling inside forms opened via the prompt. So, after enter key hit, you could pass form data to submit function instead of page reload.

I had a situation where I had login and registration form on one prompt, and imagine what a problem was when you input your user name and password, hit enter and...... and nothing happen.

This extension solve this problem.

And it support more then one form inside the prompt. It can detect which form was submitted by enter key, and return the name of submitted form in the same way like prompt submit button.

Additionally my extension fix two troubles which I faced while using the Impromptu:
  • Performance problem in zoom mode in IE8. When zoom in IE8 is set, all animations of prompt slow down dramatically and event stuck (tested on 2,8GHz CPU, 2GB RAM, WinXP). My patch detect zoom and turn off animations, so user don't need to wait for prompt open.
  • Prompt reopen problem - my fix prevents situations when you could open several the same prompts, one overlapping other. If there is already prompt with the same ID, it close it and open new one
I hope it will help somebody and save some precious time. 



Go ahead, download package with some examples, now available on github!
https://github.com/dobiatowski/jQuery-Impromptu-Extension



How to use it?

This is extension of jQuery Impromptu, so you need both files:

I spend some more time to make this extension as much independent as possible, so it should be compatible with jQuery Impromptu Version 3.x and now with jQuery Impromptu Version 4.x. On github repository you can find two branches - master for newest version and 'for-Impromptu-3.x' for the 3rd version of Impromptu.

If you want to use this plug-in, you simply replace $.prompt to $.promptExt and that's it.

Here you can download some examples: 


Live example

If a form were in the prompt you could access its elements within this second parameter. The values of the form fields are gathered for you within the third parameter.
var txt = 'Hit enter on any input:<br />1st form<form name="form1"><input type="text"  name="input1" value="Input from 1st form" /></form>2nd form:<form name="form2"><input type="text" name="input2" value="Input from 2nd form"/></form>';
 
function mycallbackform(v,m,f){
 if(v == 'form1')
  $.promptExt(f.input1);
 else if(v == 'form2')
  $.promptExt(f.input2);
}

$.promptExt(txt,{
 submit: mycallbackform,
 buttons: { 'Submit 1st':'form1', 'Submit 2nd':'form2' }
});

All comments are welcome.
Subscribe to: Posts (Atom)