jQuery Impromptu

64 Responses

1. 1

   Chris Jordan

   17|Jul|2007

   Trent,

   I like this. Very easy syntax. Nice work! :o)

   You should add this to the plug-ins page. http://jquery.com/plugins

   Cheers!

2. 2

   trent

   17|Jul|2007

   Thanks Chris, I added it to the plugin list, hope its of some use to someone!

3. 3

   Jeremy Bush

   19|Jul|2007

   Is there a way to make this just like a confirm box and work with just anchor links? something like return($.prompt);

4. 4

   trent

   20|Jul|2007

   Yes and no. Unfortunately not like you are trying to since nothing is returned until a click is fired on one of the buttons, which is a completely separate function making it hard to return t/f back through the main function. The way you would have to do it is:

   -onclick automatically return false and fire:

   $.prompt(“proceed?”,{
   buttons:{Ok:true,Cancel:false},
   callback: function(v,m){
   if(v) window.location = $(“a.mylink”).attr(“href”);
   }
   });

   Does anyone know of a better way to return like confirm does?

5. 5

   Dave McC

   30|Jul|2007

   Thanks for sharing your work – it’s excellent! I’m excited to see if you come up with a creative idea for a Confirm feature.

   Thanks again!

6. 6

   trent

   30|Jul|2007

   Its name is a little misleading.. actually it already can do a confirm, prompt, or alert. just add the appropriate buttons…

   $.prompt(“Do You Confirm?”,{
   buttons:{Ok:true,Cancel:false}
   });

7. 7

   Rainer

   31|Jul|2007

   Nice work!
   The plugin does not work when the jQuery $ shortcut is disabled (to avoid conflicts with other libraries like prototype). I replaced all “$” with “jQuery” in your script and everythink worked well.

8. 8

   trent

   31|Jul|2007

   Thanks for the tip Rainer, hadn’t crossed my mind. I will make these changes to the download!

9. 9

   weepy

   02|Aug|2007

   Great Plugin !!

   Is it possible to specify the fade speed ?

10. 10

    Dave McC

    03|Aug|2007

    Is there a way to assign the “OK” button one function and the “Cancel” button a different function?

11. 11

    trent

    05|Aug|2007

    weepy- Thanks, as of now there is not a way, however it maybe something I should add in. If so there would be two fade speeds, one for the overlay, and one for the prompt box.

    Dave McC- No, just one call back function. The way to tell which one was clicked is by the first parameter of the function. It will contain the value of the button. Keep in mind the key is the button text and the key’s value is the value of the button:

    { Yes:’yesval’, Maybe: ‘maybeval’, Never: ‘neverval’ }

    From inside your callback function you could do a condition and call another function.

12. 12

    trent

    07|Aug|2007

    I just released another version with the addition of overlayspeed, and promptspeed to the options. The documentation is also updated with a description of both.

13. 13

    Dave McC

    07|Aug|2007

    Trent,
    I just wanted to say “thanx” again for sharing your excellent work.

    I have been playing around trying to figure out if it’s possible to use impromptu in a popup page in IE 7. When I attempt, it fades the popup window (along with the alert) and it offsets the alert to the left side of the screen.

    I works great with IE 6.

    Please let me know if you have any ideas. Thanks

14. 14

    trent

    07|Aug|2007

    Are you using the “container” option? That is the only time I noticed a slight difference in IE 6 and 7. Then all work exactly the same tho when the container is not set(“body”).

    Also make sure you don’t have any css that could override the js settings for margin and positions(I doubt that is the case but you never know).

    If that doesn’t help if you have a screenshot or a link I can look at it I will try to help out more.

15. 15

    Mathew Byrne

    08|Aug|2007

    Great plugin, this is something I’ve been looking for for a while.

    Currently you’re placing the popup at 30% of the pages height. Have you considered attempting to vertically center the popup correctly depending on the height of the popup? I’m not sure if this can be done reliably in a cross-browser fashion, but it would be a neat addition to this plugin.

    Looking forward to future releases.

16. 16

    trent

    08|Aug|2007

    Yeah vertically centering the popup was the biggest issue I had cross browser. The other small issue was using a container other than the body. According how the parent element is position different browsers treated it differently. Hopefully I can get a good solution in the next version. Thanks for suggestions and input!

17. 17

    Steven

    22|Aug|2007

    Hello,

    I used this excellent plug in on a site I am developing for a client. All works fine in many browsers but not in IE7. In IE7, the input box does not seem to “have focus” and you can’t enter into it. I’ll look into it, but I wondered if you had any thoughts. You should be able to reproduce it by going to http://www.scrapsandtreasures.com with IE7 and, say, Firefox. Click on the Click Here and see the difference.

18. 18

    trent

    22|Aug|2007

    Hey Steven,

    Great looking site, I figured out the solution to your problem. In the top of your file you need to declare your doctype(I know that sounds crazy but it worked after I downloaded your page and did that).. so replace [html] with:

    [!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
    [html xmlns="http://www.w3.org/1999/xhtml"]

    changing the [] respectively of course.  Most browsers will assume this doctype, however IE seems to only use the one that is specified. Good Luck!

19. 19

    Richardt

    02|Sep|2007

    Hey Steven,

    Great plugin, just want to know if it is possible to make impromptu work like a plugin from jquery called blockui. What I mean if have some selects that is hidden and some that is not on my page. When I use impromptu for a message and click on OK all my selects become visible. With blockui only the one that was originally visible becomes visible the hidden once stay hidden.

    Thanks
    Richardt

20. 20

    trent

    02|Sep|2007

    Concerning blockui, are you talking about using impromptu like:

    $(“#myobj”).prompt(‘hey’);

    I believe your issue with the selects becoming visible may be the ie 6 fix for select box’s showing through the overlay. Is this issue with this browser? If so the only way around it is to use an iframe instead of hiding selects. So after the declaration of “fade” you can do

    if(ie6)var fade = ‘<iframe class=”‘+ o.prefix +’fade” id=”‘+ o.prefix +’fade”></iframe>’;

    then remove the other ie6 hacks(they have an”//ie6″ comment after the statements). also be fire to change your css for the fade. If you need help let me know and I can send you one like this.

21. 21

    Richardt

    03|Sep|2007

    Steven

    Thanks for your quick response
    I will give it a try

    Richardt

22. 22

    Richardt

    03|Sep|2007

    Hi Steven

    Sorry looks like I need help with the css file.
    I am new to javascript and css and i am trying to teach myself how to work with it.

    So if you can help me with the change to the css for the fade it would be much appreciated

    Richardt

23. 23

    Richardt

    03|Sep|2007

    Hi Steven

    Ignore previous message

    Figured it out

    Thanks
    Richardt

24. 24

    trent

    03|Sep|2007

    Glad to hear you got it. I’m not sure how to go about avoiding this problem in ie6 in future releases. I don’t like the idea of always using an iframe since that is mis-using that element. At the same time I really don’t like hiding select elements either. I pretty much did a coin toss when releasing Impromptu. Any one have any suggestions?

25. 25

    Dextro

    16|Jan|2008

    $.prompt(“Do You Confirm?”,{
    buttons:{Ok:true,Cancel:false}
    });

    You said in a comment above that this works like a confirm box. That’s not true if you don’t put the function inside the html.

    This works better:
    $(‘.confirm-delete’).click(function(){
    var link = $(this);
    $.prompt(‘tekst’, {
    callback: function(v,m){
    if(v) window.location = link.attr(“href”);
    },
    buttons: { Ok: true, Cancel: false }
    });
    return false;
    });

26. 26

    trent

    16|Jan|2008

    You’re right, if you don’t include the callback function it will do nothing after clicking a button(except close the prompt)

27. 27

    Dextro

    20|Feb|2008

    Another problem. If you try to use an impromptu box on a submit button of a form with method ‘POST’, then you have a problem…

    Redirect through the url in the action is no problem, but you can’t pass the POST values like a normal form submit.

28. 28

    Rolf

    23|Nov|2008

    He Trent. I was looking for a plugin like yours, but couldn’t find anything. My compliments for this. It has everything I need!

    Great work! Thanks!

29. 29

    Ansar K A

    03|Dec|2008

    Hi,

    I am using jquery imprompt

    i saw the imprompt with call back to get the textbox value in secound prompt. is it possible to get the select box value in call back function

    Please reply soon

    Regards
    Ansar K A

30. 30

    trent

    03|Dec|2008

    Hey Ansar K A,

    It is possible to get the value of a select box. With jquery it should work the same exact way:

    var myval = $(‘#myselect’).val();

    In the case of the Impromptu you might do:

    var myval = m.find(‘#myselect’).val();

    since “m” is a jquery object of the prompt box at the time it was submitted.

31. 31

    Ansar K A

    04|Dec|2008

    Thanks Trent

    Its working fine

    i have one more doubt

    In an prompt box i have a combobox and a test box

    can i have a function like on change of combobox i need the populate the test box with selecte value of combobox ???

    regards
    Ansar K A

32. 32

    trent

    04|Dec|2008

    There are a couple different ways you can do this. Ex 1:

    $.prompt(“some html”);
    $(‘#myselect’).change(function(){
    //your code here
    });

    Or if you want to wait until the prompt is loaded and shown to apply it you can use the built in “loaded” callback, which is called when the prompt is shown(after the entrance effect):

    $.prompt(“some html”,{
    loaded: function(){
    $(‘#myselect’).change(function(){
    //your code here
    });
    }
    });

    I use the first method all them time when I need to apply a date picker or other widgets to form fields since it requires less code and is more clear cut.

33. 33

    Kev

    09|Dec|2008

    Hi,

    I’ve been trying to use the impromptu plugin with another jquery plugin called “jqModal” (http://dev.iceburg.net/jquery/jqModal/)

    Works fine (with some minor z-index changes in the css), but when I put a textbox or text area for the impromptu popup, I cannot seem to type anything in it or click into the text box, however check box, radio button, drop down list and button controls work fine.

    Any suggestions?

34. 34

    trent

    10|Dec|2008

    I’m not familiar at all with jqModal. Do you know if it has any key listeners for textareas? Also you might use firebug or firefly to take a peak at the html of jqModal and Impromptu to see if there are any elements that have the same id(they shouldn’t but you never know). Then check to see if there is any css for that id element which may conflict with Impromptu.

    Last but not least I’ve run into issue’s with Impromptu that baffle me and come to find out I have passed broken html as the prompt message.

35. 35

    Khuram

    07|Jan|2009

    Hi Trent

    Nice job mate, I tried to use this a confirmation box behind a link where you would click and if confirm this impromptu box then a new window will be opened. I am having problem with the popup blocker on this.

    Any suggestions ?

36. 36

    trent

    07|Jan|2009

    Do you have google toolbar or yahoo toolbar? These seem to block legit popup windows when they shouldn’t.

    Also is it a small window? something that could also be replaced with Impromptu?

37. 37

    Khuram

    09|Jan|2009

    Yeah I have the google toolbar. What do you suggest I should do.
    Cuz client is really on my back to use something more advanced then javascript: alert(), saying that site logo should appear in the confirm box. People have given feedback that the JS confirm box looks like a bad spyware/adware product.

    Regards
    Khuram

38. 38

    trent

    09|Jan|2009

    The browser(or google toolbar) blocking the popup window is out of my control. You’ll probably run into the same problem even using other similar plugins.

    To fix the problem on google toolbar you just allow popups from that site, however your clients may not know to do this..

    If the content of the popup window is small you may be able to place that content within an Impromptu prompt and improve looks and avoid a pop up all together..

39. 39

    Khuram

    09|Jan|2009

    Well it redirects to a partner website on that form so I am kind of limited in options. I’ll see what I can do and post it here if I can hopefully work it out.

    Kind Regards
    Khuram

40. 40

    D

    16|Jan|2009

    Hello Trent,

    I am attempting to use your plugin on a submit form, but the form is being submitted anyways (the dialog pops up quickly, then the form gets submitted, without any confirmation). Is this normal behavior or will I need to do something to override the forms action? Should I look to another plugin to solve my problem?

    Thank You,
    D

41. 41

    trent

    19|Jan|2009

    You shouldn’t need any other plugins.. Are you binding any other events onto the buttons? Do you have an example to look at?

42. 42

    Kirsehn

    23|Jan|2009

    I am attempting to use your plugin, with a form (including a jQuery datepicker) in the impromptu window. I noticed that in Safari, when the datepicker is included, I am not able to type any data in the first text field on the form (the cursor also does not appear). Do you have any idea why this would be? I can send you the code via e-mail if you would like.

43. 43

    thegands

    14|Mar|2009

    thanx for this great impromptu friends. would you mind if i make a wordpress plugin using jquery promptu?

44. 44

    trent

    14|Mar|2009

    By all means, yes, I’d be happy to see a good wordpress plugin using Impromptu! If you wouldn’t mind just let me know when it’s done and I’ll post about it here, maybe it will help us both out!

45. 45

    thegands

    15|Mar|2009

    @trent:
    thank you very much comrade. i’ll let you know when i finish the plugin asap.

46. 46

    Ben Trevino

    18|Nov|2009

    Hi Trent,

    I’m having the same problem “D” describe on January 16th. I have a button to submit a form, and while the dialog is displayed, the form submits in the background without blocking for a confirmation

    Price:$0.01

    Hello Trent,

    I am attempting to use your plugin on a submit form, but the form is being submitted anyways (the dialog pops up quickly, then the form gets submitted, without any confirmation). Is this normal behavior or will I need to do something to override the forms action? Should I look to another plugin to solve my problem?

    Thank You,
    D

47. 47

    trent

    19|Nov|2009

    sounds like on your form submit you need to initially stop the submit action..

    $('#mySubmitButton').click(function(){
        $.prompt('my message...',{
            buttons: { Ok: true, Cancel: false },
            submit: function(v,m,f){
                if(v) $('#myform').submit(); // user says ok, now send it
            }
            return false; //kill the submit
        });
    });

48. 48

    sava

    07|Apr|2010

    I want to submit form that show in the dialog box:

    $.prompt(”,
    {
    buttons:{‘Cancel’:false, ‘Continue’:true},
    callback: function(v,m,f){
    if(v){
    $(‘#frmReg’).submit();
    }
    else{}
    }
    });

    But this code do nothing. Form submit doesn’t occur. And no error messages appear.
    If I try to use insted of
    $(‘#frmReg’).submit();
    something like
    document.forms["frmReg"].submit();
    then in Firefox console i see error “document.forms["frmReg"] not defined” where the process enters a infinite loop and error appears several times a second

    May I submit the form that appear in the modal window by ‘Continue’ button?

49. 49

    trent

    07|Apr|2010

    Have you named your form with id that id? the blog probably stripped that part out from your comment. Maybe try alerting the length of elements selected for the form:

    alert($(‘#frmReg’).length);

    That should make sure you have an element selected

50. 50

    sava

    07|Apr|2010

    Sorry, in my previous message the contents of the form wasn’t displayed

    something like: [form action=myscript][input type=text name=myinput][form]

51. 51

    trent

    07|Apr|2010

    yes, you will need to add the id attribute to your form: [form action=myscript id=frmReg], then your selector should find it

52. 52

    sava

    08|Apr|2010

    Thank you very much, Trent
    But of course there is an id. But your engine cut HTML, so i show condensed version. Here is how I’m trying to use the form (the quotes and angle brackets removed)

    [form action=myScript name=frmReg id=frmReg method=post]
    [div class=imtitle]Title[/div]
    [div][input type=radio name=rdb_Reg id=rdb_Reg value=1 checked>value1[/div]
    [div][input type=radio name=rdb_Reg id=rdb_Reg value=2>value2[/div]
    [div][input type=radio name=rdb_Reg id=rdb_Reg value=3>value3[/div]
    [input type=text name=myinput]
    [/form]

53. 53

    trent

    08|Apr|2010

    I wonder if the form is getting removed before it fully submits.. instead of using the callback can you try using the submit option? And return false; after submitting (this will hold the prompt open just so we can see if this is the issue.

    $.prompt(”,
    {
    buttons:{‘Cancel’:false, ‘Continue’:true},
    submit: function(v,m,f){
    if(v){
    $(‘#frmReg’).submit();
    return false;
    }
    else{}
    }
    });

54. 54

    Noel

    23|Aug|2010

    Please provide an example of how I can use impromtu with a type of input. (basically, how can i access the value entered in the callback function). thanks.

55. 55

    Amar

    22|Sep|2010

    Hi Trent!
    Thanks for such a nice plugin.
    I have implemented it in my application and it works great. However it has a little problem with IE(all versions). The problem is on a long page, the page scrolls to the top and the faded area is reduced to half the page height.
    I figured out that it’s cause I don’t have any Doctype mentioned. It works fine when I put in the DOCTYPE but it shatters the css of other sections of the website. Is there any solution for this?
    Thanks in advance!

56. 56

    Tettu

    28|Dec|2010

    Hi
    I have a Label on the prompt alert layer. But am not able to get the focus on to it. Always focus is going on to the first element in the main page either. I am using IE6 .Is there any way to bring in the focus on to the first element on the prompt box?
    Thanks ,
    tettu.

57. 57

    trent

    29|Dec|2010

    Is something on the main page running and pulling focus from the prompt? Or are there two fields with the same id? Sometimes multiple fields with the same id the browser will just choose one.

58. 58

    pavithra

    03|Jan|2011

    i need to use the impromptu like a default conform box . the problem i am facing is i have a set of conditions to validate so i have number prompts boxes and i set single javascript variable to make sure that the check is completed..is there a way to do this with impromtu.

    below is what i want my code to do ..

    var r=confirm( “Adding this appointment will end the.”);
    if (r==true)
    {
    editForm = true;
    }
    else
    {

    editForm = false;
    }

    Thanks

59. 59

    tronds

    17|Mar|2011

    Ahh.. just what I was looking for ;)

    been having some problem with submit, but after seeing your comment above here ( number 47 ) I got it working.

    Just to point it out, there are a error in your comment, you are missing }); before the return false; line.

60. 60

    trent

    18|Mar|2011

    Thanks! comment updated!

61. 61

    luke

    23|Jun|2011

    Hey having an issue with getting the value that I typed in.
    If anyone can help me that would be greatful!

    
function changeAssociation(v,m,f){
var txt = 'New User Name:<input type="text" id="username" value="" />';
$.prompt(txt,{
buttons:{Submit: true, Cancel: false},
submit: function(v,m,f){
username = ???
if (username.length>1) {
window.location = "url('tickets/'.$this->ticket->ticketid); ?>/"+username+"/reassign"
}
},
});
}


62. 62

    luke

    23|Jun|2011

    using code tag messed it all up

    function changeAssociation(v,m,f){
    var txt = ‘New User Name:<input type="text" id="username" value="" ‘;

    $.prompt(txt,{
    buttons:{Submit: true, Cancel: false},
    submit: function(v,m,f){

    username = ???
    if (username.length>1) {
    window.location = “url(‘tickets/’.$this->ticket->ticketid); ?>/”+username+”/reassign”
    }

    },
    });}

63. 63

    trent

    23|Jun|2011

    Hey Luke,

    You just need to include the “name” attribute in your input
    Reasoning behind using the name is when you have radio or checkboxes you have multiple inputs grouped by the name, and Impromptu will pass back a nice array

64. 64

    Brad Dixon

    05|Sep|2011

    Sorry Trend, please delete the post above, the codes are messed up, I will try using tags.

    hi Trent, been trying to do this but I couldn’t seem to get it to work. Using your demo #2 (Edit User Name) I am trying to populate the span value in a dropdown list instead of textbox, is there a way to do this? This is what I have so far.

    Code:
    
function editUser(id){
var user = $('#userid'+id)
var fname = user.find('.fname').text();
var lname = user.find('.lname').text();
var title = user.find('.title').val();

    var txt = 'What would you like to change this to?'+
'First Name'+
'Last Name'+
'TitleMrMrsDr.';

    ...
}


    HTML code:

    Edit

    John
Doe
Mr

    My question is how do I have the ‘title’ selected in the drop down list based on the HTML value?

    Hope this is clear. Great plugin!

    thanks.