Trent Richardson
Finally, Impromptu 3.0 has made it! It features two changes really. One big and one small. The small addition was an option for classes. So you can now add extra classes to an individual prompt to customize the styles without needing an entirely new theme. Here’s the syntax:
$.prompt('text here..', { classes: 'class1 myclass2 darkfade' });
The classes are added to the parent container which holds the fade and the prompt, so they have access to both.
Now for the big new feature. You can now call a prompt from a selector!
$('#myselector').prompt(options);
// or like this
$('<span>some html</span>').prompt(options);
There is one extra option for using this technique, withDataAndEvents. This comes from using jQuery’s clone method. Head on over to the docs for more information on the clone method. It defaults to false. But using it might look something like this:
$('#myselector').prompt({ withDataAndEvents: true });
This is entirely new to Impromptu and to me. So if something acts funny with it please don’t hesitate to post here. Enjoy!
Related posts:
32 Responses
Gareth
16|Feb|2010Thanks Trent! The “classes” option is just the ticket. The selection option should come in handy too, as previously I’ve been going this with a callback.
Cheers, Gareth
speedy18us
17|Feb|2010Thanks for the plugin! I like it a lot. I just finish a project, and it has Impromptu on newsletter and search. It will soon be avalable at http://ralf.ro. You can cut down the link, if you think i advertise it.
trent
17|Feb|2010Thanks for using the plugin, glad you are enjoying it!
Vishal
24|Feb|2010Thanks Trent! This is an awesome plugin. I am using it on a webpage, loading a bunch of dynamic content.
I do have question:
I have a multistate prompt where the html select code for each state is generated by functions using ajax/xml. Thus, the typical state looks like
stateX: {
html: funcX(),
submit: function (v, m, f) {– set a global parameter and jump to stateY — }
}
So I have funcX, funcY, funcZ … etc. all generating html for stateX, stateY, stateZ … etc.
The problem is that impromptu calls all these functions at the very beginning. What I want is for stateY to set a variable, which is then used by funcY in stateY to generate its html.
Any idea if this is possible with impromptu?
Thanks again for a great plugin.
-Vishal
trent
24|Feb|2010Hey Vishal,
Yes, that does add a level of complexity, however it is possible as I have done this before.
-First, start out by creating all of your states, but with ” for the html.
-Second create a “waiting” state, this will be a “Please wait..” to show while ajax loads the page.
-Each time a button is clicked, within the callback, go to the “waiting” state, then make the ajax request.
-Once the ajax request returns use $.prompt.getStateContent(‘stateName’).html(‘NewHtmlFromAjax’); to get your new info.
-Finally go to that state
This seems tedious, but once you get one working you’ll see there’s really nothing to it. The waiting state will immediately let the user know that content is being loaded.
harvejs
25|Feb|2010Hey Trent! thanks for cool plugin, it’s really very nice. I would like to offer you one small improvement ant it’s callback function for “nextState” and “prevState” functions. In few situations it can be quite useful. So something like this:
$.prompt.nextState = function(callback) {
var $next = $(‘.’+ $.prompt.currentPrefix +’_state:visible’).next();
$(‘.’+ $.prompt.currentPrefix +’_state’).slideUp(‘slow’);
$next.slideDown(‘slow’,function(){
$next.find(‘.’+ $.prompt.currentPrefix +’defaultbutton’).focus();
if (typeof callback == ‘function’)
{
callback();
}
});
};
All the best!
harvejs
Vishal
25|Feb|2010Thanks Trent.
I tried your suggestion, and it worked for the most part except for one thing –
when I use $.prompt.getStateContent(’stateName’).html(‘NewHtmlFromAjax’); , I lose all the buttons on the prompt in that state. It looks like using the html call overwrites all the properties of the state?
I’ll debug further.
Thanks for your help.
-Vishal.
priti
25|Feb|2010Hi,
Kindly explain ” an = m.children(‘#alertName’);” . I am referring example 10 . when i tried alerting m.name or m.id it is showing me undefined !!.
Thanks
Priti
Rami
26|Feb|2010Hi.
Thank you for jquery.impromptu.3.0.
There seems to be some conflict with jquery.impromptu.3.0.min.js and jquery.treeview.js from here:
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
Any ideas?
Thank you.
Rami
26|Feb|2010Hi again,
I am sorry, I was mistaken.
The issue is not with jquery.treeview.js, but with jquery-ui-1.7.2.custom.min.js.
http://jqueryui.com
http://jqueryui.com/download/jquery-ui-1.7.2.custom.zip
Any ideas?
Thank you.
trent
26|Feb|2010I have been using Impromptu successfully with jqueryui for quite a while, is there a particular module of jqueryui you have noticed conflicting?
Rami
26|Feb|2010Thanks for the reply.
I am using firefox 3.6 on windows 7 x64.
If I just include “jquery-ui-1.7.2.custom.min.js” on my page, the $.prompt does not appear when I click on a button. When I do not include “jquery-ui-1.7.2.custom.min.js”, things work as expected.
Rami
26|Feb|2010Hello again,
I think I figured it out. It is a user error (me)! :)
I think since I was trying to include
jquery-ui-1.7.2.custom.min.js
AND
ui/ui.tabs.js
I experienced the unusual behavior. It seems that I should have only included one of them.
Sorry about that.
Thank you.
Ionut
02|Mar|2010thanks for u’r work :)
Josh
02|Mar|2010This is an awesome plugin! I am trying to integrate it into a form I’m building for an AIR application, which it works really well. However, I have a group of checkboxes that I am wanting to use this to display to save space on the page. Is there a way to save the state of the checkboxes once the prompt is opened and closed in case a user wants to edit the choices, until the entire form is submitted?
trent
03|Mar|2010sounds like you might have to store a jquery object of the checkboxes globally outside of the prompt everytime they’re changed, then load that global object when you re-open the prompt
priti
03|Mar|2010Hi,
In Prompt I have a div which is hidden and Yes/No checkboxs.So if user click on Yes the Div should get visible.
I tried as follow
checkbox name=”av_yes” id=”av1_yes” onclick=”$(\’#dtpickerdiv\’).css(\’visibility\’,\’visibile\’);”
it return the object but div do not appear!!
Is this possible in prompt to perform such events?? It would be great if you can guide what I am doing wrong ?
priti
03|Mar|2010I modified above input box by removing the on click event and writing a separate jquery function which bind to click of check box at the end of prompt statement.
In function following three statement I have written
alert -$(‘#dtpickerdiv’).css(“display”) : This alert “undefined”
alert – $(‘#dtpickerdiv’)) : “object object
$(‘#dtpickerdiv’,this).css(“display”,”block”); : it is not setting the display to block it is still hidden on prompt box!!!
I tried the example with setting css like this in simple way and it worked fined but same is not true when i include Prompt box.
Any idea?
Zev Spitz
04|Mar|2010When pressing Escape, I would like to dismiss the prompt and call a function. How can I do this?
priti
04|Mar|2010any help??
trent
04|Mar|2010Sorry priti, I have been tied up. I will try to respond in depth tonight!
trent
05|Mar|2010priti, I have sent you an email
Nuno
10|Mar|2010Hi Trent,
I’m using impromptu on a new project and have been testing it with different browsers.
FF 3.5 and IE8 work just fine.
I had to make a change so that chromium (linux) could display the correct opacity: I added
“-webkit-opacity”: options.opacity
to the stylePrompt function.
Thanks a lot for your work!
cFreed
18|Mar|2010Thanks for this good job!
For my own needs, I added something which may be useful for others: have an optional title attribute associated to some prompt buttons.
To achieve it, I simply inserted the followings (line numbers below refer to 3.0 development version):
-> between lines 65 and 66:
var title=”;
if (v.constructor == Array) {
title = v[1];
v = v[0];
}
-> inside line 66, where the end of the line becomes:
…v + ‘”‘+ (title?(‘ title=”‘+title+’”‘):”) +’>’ + k + ”;
With this patch, using jqImpromptu may look like:
$.prompt (‘Some text’, buttons: {Ok: [true, 'Will save your changes'], Cancel: false});
This manner, the option is that each button value may be, either:
- a simple response value
- an array [response value, title string]
It might be extended to a more sophisticated version, where an object should also be accepted in place of the array, containing attr/value pairs.
Hope this helps.
cFreed
19|Mar|2010Sorry: I missed a part of code in my proposal above.
-> between lines 204 and 205:
if (clicked.constructor == Array) {
clicked = clicked[0];
}
Simon
26|Mar|2010the last line in your code:
$.prompt($(this).clone(withDataAndEvents).html(), options);
should look like this:
$.prompt($(this).clone(options.withDataAndEvents).html(), options);
trent
26|Mar|2010Thanks Simon, I’ll try to update it this weekend, I have a couple other tweaks as well!
ryan
27|Mar|2010Does everyone see the behavior where all click events are disabled after clicking the “x” to close example #9?
I see the same behavior in my instantiation of that code as well.
trent
29|Mar|2010Hey Ryan, I never noticed this before. Thanks for pointing it out!
trent
29|Mar|2010Ryan I think this may be linked back to the collection of form field values. I think in recent versions of jQuery the serialize method has changed. I will plan to fix this in my release this week!
trent
31|Mar|2010It turns out I don’t have a condition before my logic in the callback. There needs to be a condition to make sure a button was clicked.. ex: if(v==true)
MiKL~
25|Jan|2011I am getting the same issue as Ryan. When I close the dialog box with the ‘x’, the prompt is not fired anymore on subsequent calls. Can the X be removed? I have a cancel button anyway on each dialog box.