I’ve been slack the last week and haven’t posted much here on the blog. I hope to pick up the pace this week. I wanted to let everyone know I’ve put out a new version of Impromptu. We’re now up to 2.5. As you may have noticed in the last version or two, most the changes are reorganizing the code to be more “jQuery” like. Also I’ve minified this version as well. It doesn’t improve the size much, but every little bit counts.. so I’m told…
47 Responses
Ben K
31|Mar|2009 1Hi Trent,
Have your tried using states with a different prefix?
state helper functions refer to $.prompt.defaults.
if you create a prompt modifying the default options.
When you refer to the prefix using $.prompt.defaults it refers to the default not the updated by my reckoning. Am i misunderstanding something or is this a bug?
e.g.
var statesdemo = {
prefix:’cleanblue’,
state0: {
html:’test 1.test 1..test 1…’,
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){
if(!v) return true;
else
$.prompt.goToState(’state1′);
return false;
}
},
state1: {
html:’test 2′,
buttons: { Back: -1, Exit: 0 },
focus: 1,
submit:function(v,m,f){
if(v==0) $.prompt.close()
else if(v=-1)
$.prompt.goToState(’state0′);
return false;
}
}
};
$.prompt(statesdemo);
trent
31|Mar|2009 2Hey Ben,
prefix isn’t set to be an attribute of states, it is more of a prompt-wide attribute accessible through over all options. The accepted attributes/defaults for states look like the following:
state: {
html: ”,
buttons: { Ok: true },
focus: 0,
submit: function(){ return true; }
}
You will still need to set prefix in the regular options:
$.prompt(mystates, { prefix: ‘cleanblue’ });
Ben K
01|Apr|2009 3thanks trent – i think i get it ;)
trying to get my head around plugins and namespaces
Andrew
09|Apr|2009 4Hi,
I think I’ve found a little bug…This is how I noticed it: I have a simple impromptu prompt on my page, and also some dropdown box somewhere on the page, I impromptu opens(with overlay enabled) the dropdown box disappears(this is fine) and when I click cancel on the impromptu box the dropdown box appears again and works ok, until now everything is ok, but if I close the impromptu box not using the cancel button, but using the top right “X” button, the dropdown doesn’t appear again, and I can’t “click” anymore anything on that page, it simply doesn’t respond anymore(it doesn’t hang, just the click event might get caught somewhere??)…The thing with the dropdown box it’s only on the IE6 but the think with the click it’s also on FF 3.0.6…
I repeat all this appears only when using the X button…
Regards, Andrew
Andrew
09|Apr|2009 5Nevermind..it was my mistake…I was missing an if(v) so the script generated an error everytime I closed the prompt using the X..
trent
09|Apr|2009 6Glad you got it working. Hopefully one day IE6 will be a thing of the past!
kape
14|Apr|2009 7Impromptu 2.5 doesn’t seem to work with Safari 4.
aleco
15|Apr|2009 8Hi Trent,
I’ve found a little bug in IE6.
I use tag, so I use this code:
$.prompt.setDefaults({
useiframe:true,
top:’30%’
});
but in IE6 will have some problem: the page is ok, but will have more tip:无法显示网页 … (Page can not be displayed —>by google translate).
and in jquery-impromptu.2.5.js(line 26)
msgbox += ”;
if I delete ‘javascript:’, and everything will be ok!
lordzardeck
30|Apr|2009 9Hey, for some reason I get an error saying that jQuery is not defined on the last line in your code. Whats going on?
trent
30|Apr|2009 10Is this in the documentation? or your site? If your site do you have a link where I can take a peak? If you prefer you may use the contact form from the menu at the top where its not posted for everyone to see.
BenHen
01|May|2009 11Hi Trent, this script is exelent, but I have a problem :)
I try to use in impromptu a mask for my input, but it doesn’t work :’(
The mask is in jquery: http://www.meiocodigo.com/projects/meiomask/
I can’t use jquery inside impromptu?
Thanx
trent
01|May|2009 12How are you using it? Just a quick browse of your plugin looks like you could do this:
$.prompt(‘..my html’);
$(‘#myinput’).setMask();
or $.prompt returns the entire prompt and fade..
$.prompt(‘..my html’).find(‘#myinput’).setMask();
Pretty sweet plugin by the way, I might have to look into this for some future work!
lordzardeck
01|May|2009 13I tried the contact, but I don’t know if you got it so I’ll just post here. I tested it in firefox, and I got this:
Error: jQuery is not defined
Source File: http://rockhardyouth.com/jquery-impromptu.2.5.js
Line: 293
you can see for yourself at http://rockhardyouth.com/jquerytest.html. I’m probably doing something wrong since I suck at javaScript, so any help is appreciated.
trent
02|May|2009 14lordzardeck,
try reordering your script includes.. include them in this order:
jquery-1.3.2.js
jquery-impromptu.2.5.js
jquery.corner.js
common.js
Also you will need to include the css for the styles.
BenHen
03|May|2009 15Yeahhhhhhh
This work: $.prompt(’..my html’).find(’#myinput’).setMask();
Thanx you verry mutch Trent, great job!!!
(Sorry, I beging in jquery ;)
trent
04|May|2009 16Roddy,
1. Thanks, I hope you find it useful
2. I’ve not noticed this in the past, however I do see it on your page. I will do a little testing to try and track down what is happening..
3. You can have to open automatically by placing your function call inside
$(function(){
//place call here..
});
If you’ve already declared this I think jQuery allows more than one call to this event.
trent
04|May|2009 17On the initial load to detect the browser I think the content is there, the opacity is just too dark. Are you changing the settings anywhere? I couldn’t determine exactly where it’s being called from.
trent
04|May|2009 18can you place just a very simple prompt call in the page.. href=”javascript:$.prompt(‘test’)”? Also you might try adding opacity attributes to the css for the fade.
Ben K
04|May|2009 19Hi Trent,
experiencing an issue with ie6, with https
well there are a few issues
1) the prompt will hide my select box, but it dissapears and doesn’t return..
2) if i comment out the //$(’select’).css(‘visibility’,'hidden’);
and enable useiframe
it displays an error message page in the iframe behind (not blank or clear)
using 2.5
i hope ie6 dies soon.
cheers,
Ben
Ben K
04|May|2009 20i changed: <iframe src=”javascript:;”
to: <iframe src=”javascript:false;”
and also added: style=”display:block;position:absolute;z-index:-1;”
from the jquery bgiframe plugin
http://github.com/brandonaaron/bgiframe/blob/717f112850e1e1b1d46099ea3c8d8d9e4d7ba6de/jquery.bgiframe.js
fixed my iframe issue
trent
04|May|2009 21Ben,
I don’t have an installation of ie6 handy, but the iframe issue might be resolved with using # as the src”" attribute of the iframe instead of javascript:; Originally I was getting stuck either way I turned and opted for javascript:;, however you might try # instead. Just do a search for javascript:; in the code and replace it and see if that fixes your problem..
trent
04|May|2009 22Ben K,
Excellent, I’ll make note of your changes, that may be something I need to change in the next version!
Suraj
04|May|2009 23Hi Trent,
I am using “Impromptu” plugin for displaying alert messages. When popup is displayed, we can access page element. We need to disable page elements like in blockUI plugin. Is there any solution for that?
Thanks in adavnce.
Suraj
Ben K
05|May|2009 24Hi Trent,
you might find this useful:
free virtual pc’s from microsoft for developers to test different ie’s
they expire periodically and require a redownload.
http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&DisplayLang=en
trent
05|May|2009 25Suraj,
Do you have the css included within your page? Impromptu does have an overlay which blocks the page.
Ben K,
Thanks, I might have to give that a try. I had been using wine and ies4linux, but since upgrading to jaunty it doesn’t seem to work. I’ve not tried Microsoft’s virtual pc yet.
Suraj
06|May|2009 26Hi Trent,
Thank you very much for your reply.
I have downloaded the css from the site and implemented in my page. Which property need to be set? I have changed the background color of the “jqifade” class. It is changed.
But still I can navigate to page elements.
Suraj
13|May|2009 27Hi Trent,
Any solutions for block page elements?
trent
13|May|2009 28Hey Suraj,
As far as clicking you shouldn’t be able to get to the page elements, however using the keyboard and tabbing is a different story. You can tab into the page as I’ve not been able to work up a solution for that yet. It is on my todo list.
Jorge
14|May|2009 29Hi Trent,
I’m using Impromptu-2.5 to showing a form and save datas on a Data Base. In this form I have two date’s fields and I’ve combined with Datepicker.
My problem is that the datepicker is shown behind the prompt and I can’t do any click on calendar. How can I do it? Can you help me please?
Thank you very much.
Jorge.
trent
14|May|2009 30Jorge,
How are you initiating your datepickers? I normally just call it imidiately after calling the prompt use something like the following:
$.prompt(‘html stuff…’);
$(‘#input.dp’).datepicker();
Jorge
14|May|2009 31Trent, I’m sorry but it doesn’t work. My prompt have a submit function and a callback funtion. Where I have to put it??? Outside the prompt or inside some of the functions???
Jorge.
Jorge
15|May|2009 32Trent, I don’t know if I explained quite well. I’ve test your indications but it isn’t running for me. The form dialog is on top and locking all. So the datepicker is seen just a little behind the dialog and it can not be clicked.
A simple example is a jquery UI Dialog (with a form) and add the datapicker any input box. When you click the calendar image the calendar is hidden by the dialog.
That’s the code example:
Test
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }
$(function() {
var name = $(“#name”),
email = $(“#email”),
password = $(“#password”),
allFields = $([]).add(name).add(email).add(password),
tips = $(“#validateTips”);
function updateTips(t) {
tips.text(t).effect(“highlight”,{},1500);
}
function checkLength(o,n,min,max) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass(‘ui-state-error’);
updateTips(“Length of ” + n + ” must be between “+min+” and “+max+”.”);
return false;
} else {
return true;
}
}
function checkRegexp(o,regexp,n) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass(‘ui-state-error’);
updateTips(n);
return false;
} else {
return true;
}
}
$(“#dialog”).dialog({
bgiframe: true,
zIndex: -1,
autoOpen: false,
height: 300,
modal: true,
buttons: {
‘Create an account’: function() {
var bValid = true;
allFields.removeClass(‘ui-state-error’);
bValid = bValid && checkLength(name,”username”,3,16);
bValid = bValid && checkLength(email,”email”,6,80);
bValid = bValid && checkLength(password,”password”,5,16);
bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,”Username may consist of a-z, 0-9, underscores, begin with a letter.”);
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,”eg. ui@jquery.com“);
bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,”Password field only allow : a-z 0-9″);
if (bValid) {
$(‘#users tbody’).append(” +
” + name.val() + ” +
” + email.val() + ” +
” + password.val() + ” +
”);
$(this).dialog(‘close’);
}
},
Cancel: function() {
$(this).dialog(‘close’);
}
},
close: function() {
allFields.val(”).removeClass(‘ui-state-error’);
}
});
$(‘#create-user’).click(function() {
$(‘#dialog’).dialog(‘open’);
})
.hover(
function(){
$(this).addClass(“ui-state-hover”);
},
function(){
$(this).removeClass(“ui-state-hover”);
}
).mousedown(function(){
$(this).addClass(“ui-state-active”);
})
.mouseup(function(){
$(this).removeClass(“ui-state-active”);
});
});
Todos los campos son necesarios.
Nombre
$(“#name”).datepicker({dateFormat: “yy/mm/dd”, defaultDate: +0, showOn: “button”, buttonImage: “Images/calendar.gif”, buttonImageOnly: true});
e-mail
Password
Existing Users:
Name
Email
Password
John Doe
john.doe@example.com
johndoe1
Crea un nuevo usuario
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the
modaloption to true, and specify primary and secondary user actions with thebuttonsoption.trent
15|May|2009 33Are you trying to replace jquery ui dialog with Impromptu? Sorry if I’ve misunderstood you. If you’re switching to Impromptu you would just call the $(‘#name’).datapicker() right after $.prompt(). I have to say I’m not familiar with jquery ui’s dialog as I’ve only used it once.
Jorge
15|May|2009 34Sorry, my English is quite bad…
A direct question: can I modify the zIndex $.prompt() on line???
Jorge.
Jorge
15|May|2009 35Trent, I solved with the next css code (just the line of .ui-datepicker {z-index:1200;}):
#users .user .controls{ float: right; }
/*————-datepicker———- */
.ui-datepicker {z-index:1200;}
/*——————————– */
/*————-impromptu———- */
.jqifade{ position: absolute; background-color: #aaaaaa; }
div.jqi{ width: 400px; font-family: Lucida, Verdana, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 1px #eeeeee; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 7px; }
div.jqi .jqicontainer{ font-weight: bold; }
div.jqi .jqiclose{ position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #bbbbbb; font-weight: bold; }
div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; }
div.jqi .jqibuttons{ text-align: center; padding: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; }
div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
div.jqi button:hover{ background-color: #728A8C; }
div.jqi button.jqidefaultbutton{ background-color: #BF5E26; }
.jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }
div.jqi .jqimessage .field{ padding: 5px 0; }
div.jqi .jqimessage .field label{ display: block; clear: left; float: left; width: 100px; }
div.jqi .jqimessage .field input{ width: 150px; border: solid 1px #777777; }
div.jqi .jqimessage .field input.error{ width: 150px; border: solid 1px #ff0000; }
/*——————————– */
Thank you very much for your help :)
Jorge.
trent
15|May|2009 36You’re welcome, glad you got it. Sorry I couldn’t be of more help.
Jorge
25|May|2009 37You helped me Trent ;)
But now I have another ‘problem’: vertical scroll bar. How can I add a vertical scroll bar???
Jorge.
trent
25|May|2009 38Where are you trying to get a vertical scroll bar? inside the prompt?
Jorge
26|May|2009 39Yes. The text inside the prompt is too long and I need it.
Jorge.
trent
26|May|2009 40You might set your css for “jqimessage” to overflow: auto; and also set your height.
Jorge
27|May|2009 41Thank you very much. It’s working fine ;)
Jorge.
Russell
26|Jun|2009 42Hi
Great plugin! I was using Facebox, but now I’m converting to Impromptu.
Like Jorge, I’m trying to use jQuery UI with Impromptu.
I’m calling datapicker immediately after $.prompt (I also tried using the loaded callback and that seamed to work too.
However, the DatePickers are not displayed the first time I use $.prompt…. I have to close it and do it again.
Instead of declaring my HTML form as per your examples, I’v stored it in a block with style=”display:none;”
The Button invokes showcreate() which does grabs the HTML from the PRE block and then calls $.prompt and the two datepickers.
Here’s my code:
create assignment
Create New Assignment:
Assign Date
Due Date
function submitcreate(v,m,f){
if (v) {
f['action'] = ‘add’;
$.post(“http://www.tovotutor.com/assignments.php”, f);
}
return true;
}
function showcreate() {
var msg = $(‘#creatediv’).html();
$.prompt(msg,
{
callback:submitcreate,
buttons:{cancel: false, create: true}
}
);
$(“#divad”).datepicker({altField: ‘#assigndate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0});
$(“#divdd”).datepicker({altField: ‘#duedate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0, gotoCurrent: true});
}
Any ideas?
Russell
26|Jun|2009 43Re-paste fo the code:
create assignment
Create New Assignment:
Assign Date
Due Date
function submitcreate(v,m,f){
if (v) {
f['action'] = ‘add’;
$.post(“http://www.tovotutor.com/assignments.php”, f);
}
return true;
}
function showcreate() {
var msg = $(‘#creatediv’).html();
$.prompt(msg,
{
callback:submitcreate,
buttons:{cancel: false, create: true}
}
);
$(“#divad”).datepicker({altField: ‘#assigndate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0});
$(“#divdd”).datepicker({altField: ‘#duedate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0, gotoCurrent: true});
}
Russell
26|Jun|2009 44grr! I’ll try again
<button type=”button” onclick=”showcreate();”>create assignment</button>
<PRE id=’creatediv’ style=’color:#000000;display:none;’>
<h1 style=’color:#000000;’>Create New Assignment:</h1>
<table>
<tr>
<th>Assign Date</th>
<th>Due Date</th>
</tr>
<tr>
<td style=’vertical-align:top;’><input type=’text’ class=’validate[required,date text-input] assigndate’ name=’assigndate’ id=’assigndate’ value=” size=’10′></td>
<td style=’vertical-align:top;’><input type=’text’ class=’validate[required,date text-input] duedate’ name=’duedate’ id=’duedate’ value=” size=’10′></td>
</tr>
<tr>
<td><div id=’divad’></div></td>
<td><div id=’divdd’></div></td>
</tr>
</table>
</PRE>
<script type=”text/javascript”>
function submitcreate(v,m,f){
if (v) {
f['action'] = ‘add’;
$.post(“http://www.tovotutor.com/assignments.php”, f);
}
return true;
}
function showcreate() {
var msg = $(‘#creatediv’).html();
$.prompt(msg,
{
callback:submitcreate,
buttons:{cancel: false, create: true}
}
);
$(“#divad”).datepicker({altField: ‘#assigndate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0});
$(“#divdd”).datepicker({altField: ‘#duedate’,altFormat: ‘yy-mm-dd’, showOn: ‘button’, buttonImage: ‘images/calendar.gif’, buttonImageOnly: true, minDate:0, gotoCurrent: true});
}
</script>
trent
30|Jun|2009 45Russell,
Sorry for the slow response. That looks like it should work. Have you gotten it going yet?
sihem
09|Jan|2010 46hi ,it is very good post
can you help me please
i try to show prompt with two state
i try to add to the second state overflow because the text inside is too long and I need it.
this is code
var statesdemo = {
state0: {html:’bbbbbbbbbbbbbbb’,
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){ calcule1();
if(!v) return true;
else
$.prompt.goToState(’state1′);
return false;
}
},
state1: {
html:”,
buttons: { Back: -1, Exit: 0 },
focus: 1,
submit:function(v,m,f){
if(v==0) $.prompt.close()
else if(v=-1)
$.prompt.goToState(’state0′);
return false;
}
}
};
$.prompt(statesdemo);
the result of calulate(); is too long and is affected to id=ss(second state)
Thank you………….
trent
11|Jan|2010 47Hey sihem,
Not sure I completely understand your question. I do notice “calculate” is spelled differently in your code.
Leave a reply