Trent Richardson

66 Responses

1. Marc

   08|Sep|2007 1

   Great plugin, but I have a bug. See http://athena.sus.mcgill.ca/impromptu_bug.php and make sure that your browser’s (FF2/IE7) window is small enough so that the page can scroll. When you click on “Clear” to clear the contact form, the white background does not cover the entire page.

   I think having the height of my HTML and BODY elements set to 100% with CSS is causing the problem.

2. trent

   09|Sep|2007 2

   Hey Marc,

   I took a look at your code with firebug for firefox. Some reason the html and body element isn’t as tall as your #wrapper element. The default is to fill the body if container option isn’t declared. Not sure why those elements arn’t as tall as the #wrapper? You might try(just to see if this is the issue) setting the container option to #wrapper. Let me know if this doesn’t work and I will see if I can help you out.

3. Ole Laursen

   10|Sep|2007 3

   Marc: I had the same problem with HTML and BODY height set to 100%. Removing the 100% height statements fixed the problem.

   Trent: The download link in the upper right corner points to the 0.4 release?

   Also I have another problem. I use the plugin on a long page where the IE-6-does-not-support-fixed-positioning hack breaks down because the prompt appears in an off-screen portion of the page.

   I’ve worked around it by passing in a “source” parameter with the jQuery DOM object that launches the prompt. I then use the dimensions plugin to optionally calculate the vertical offset with
   ‘o.source.offset().top + “px”;’ right after the options parsing and use this offset to position the prompt. Works like a charm.

   It has the side effect of popping up the prompt right next to where you clicked, so it reduces mouse movement.

   Great plugin, otherwise!

4. trent

   10|Sep|2007 4

   Hey Ole,

   Thanks for the help. I will look to make these changes. Only thing is I hate to require another plugin to use this one, so I will look to efficiently make this work. Do you by any chance have a link to an example of this?

5. Marc

   10|Sep|2007 5

   @Trent: I tried what you said, but now the problem occurs oddly enough in the horizontal direction instead. I tried to fix this with CSS by applying width:740px; and margin:0 auto; to my HTML and/or BODY elements, but this breaks my page in IE7.

   However, I was able to correct the problem in FF2 by applying overflow:auto; to HTML and BODY, but this produces some weird rendering effects while scrolling with IE7.

   @Ole Laursen: I cannot remove that statement because it will change the layout.

   Any other ideas?

6. trent

   10|Sep|2007 6

   Hey Marc,

   I’ve got two ideas, first try setting the the container element(#wrapper) to position: relative; I think the fade is the right width and height, just against the left side and not centered inside #wrapper(firebug shows wrapper as getting position: static from somewhere.

   If that doesn’t work you might have to try using the dimension plugin as Ole was saying. To set the width and height of the fade. If you need help with this let me know and I’ll be glad to help. Sorry for your troubles.

7. Marc

   10|Sep|2007 7

   Hi Trent,

   Hey, that did the trick! Thanks!

   You have absolutely no reason to apologize; you are kind enough to develop and share this amazing plugin with us, and even kinder to help me with correct my CSS. Thanks again for all of your hard work :)

8. Marc

   12|Sep|2007 8

   Hi Trent,

   I found another [actual] bug, which is evident even on your examples page. When the prompt appears in FF2/IE7, a height, equal to the height of the prompt, gets added to the bottom of the page.

9. trent

   13|Sep|2007 9

   You absolutely right. Thanks for noticing this. I haven’t noticed that before. Might just have to check the height of the prompt, then subtract that from the container’s marginBottom? I will make this change in my next release in a few days(do you need it fixed sooner?)

10. bryan

    13|Sep|2007 10

    Maybe I’m having trouble just getting my head around this, but I want try to use this as a simple confirm for someone wanting to delete an entry.

    Is impromptu usable for this, and is it so simple that i’m just not seeing it?

11. Marc

    13|Sep|2007 11

    @Trent:
    There’s no rush :)

    @Bryan:
    See Trent’s Example 8. Your function my look like this:
    function mycallbackfunc(v,m){
    if (v) {
    ….
    } else {
    ….
    }
    }

12. Marc

    13|Sep|2007 12

    Actually Trent, I think I found a fix via CSS by applying position:absolute; to div.jqi. Try it out.

13. trent

    13|Sep|2007 13

    Marc: Will that effect the position: fixed for the scrolling? I will definitely give it a shot!

14. Marc

    13|Sep|2007 14

    Trent: It’s good in FF/IE7 but fails miserably in IE6.

15. Marc

    13|Sep|2007 15

    Actually, in IE6, my first issue occurs.

16. trent

    13|Sep|2007 16

    hmm.. thats weird, well I guess back to the drawing board. Might have to change it with the margin unfortunately.

17. bryan

    13|Sep|2007 17

    @marc

    I tried that but as soon as i click the button that it’s set to act from (ie delete), the delete proceeds before you even get a chance to click ‘ok’ or ‘cancel’

    here’s the code I tried:
    function mycallbackfunc(v,m){

    var answer = v

    if (answer)
    return true ;
    else
    return false ;

    }

    $(“.deleterecord”).click(function(){
    $.prompt(‘Are you sure you want to delete this?’,{ callback: mycallbackfunc });

    });

18. trent

    14|Sep|2007 18

    I notice you only have one button option in your $.prompt(). The default button is Ok(true), so since thats your only button it will always return true. You need two buttons in your case so the user has the option to cancel or proceed:

    $(”.deleterecord”).click(function(){
    $.prompt(’Are you sure you want to delete this?’,{
    buttons:{Ok:true, Cancel:false},
    callback: mycallbackfunc });
    });

    Now your if(answer)..else.. functionality should work

19. Felix

    19|Sep|2007 19

    Nice job! Can “msg” be a jQuery object? Like this:
    var dialog = $(‘#dialog’);
    $.prompt(dialog);

20. trent

    19|Sep|2007 20

    Thanks Felix, As of now it can’t be. That is a very interesting approach though, I haven’t thought of that. $(‘#dialog’).html() would work for retrieving the inner html for that element, but not the element itself. I have been thinking on how to make it optional todo this:

    $(‘#mycontainer’).prompt(‘hello world’)

    where #mycontainer would be used as the container, or still keep the same way of just saying:

    $.prompt(‘hello world’,{container:’#mycontainer’});

    What do you think?

21. raptor

    24|Sep|2007 21

    hi Trent,
    I just played abit yesterday with your plugin, very nice thanx ;).
    I had one annoying problem which is probably connected with what Marc says at (8).
    It happens when you are not using the browser on full screen (as I use it all the time).
    When the dialog opens a vertical scroll bar appears on the right and shrinks my whole page, when I close the dialog the vertical scroll bar disappears again. Visually is very annoying ;).
    FF2/Linux
    If you have idea how to solve this and want me to test something!

    About the idea of using jquery id as ‘txt’ parameter I have even better one allow the use of URL, so it get the dialog with ajax query.

    PS> I had another small problem which probably not related with your plugin but anyway, here is it, if I have :

    …

    it doesn’t display anything in the dialog except the OK button. When I rearrange it like this :

    …

    it works.

22. raptor

    24|Sep|2007 22

    oops,
    i mean this (think html tags, seem html tags are not displayed):

    open-table,open-form
    …
    close-form , close-table

    it doesn’t display anything in the dialog except the OK button. When I rearrange it like this :

    open-form, open-table
    …
    close-table, close-form

    it works.

23. trent

    24|Sep|2007 23

    Hey Raptor,

    I guess those examples are still getting chopped off.. the other problem you have with the scroll bars was due to the height of the prompt being added to the container element. The “hack” for now is to get the height of the prompt and subtract that from the height of the container. I havn’t done this but that is what we discussed before.

    Unfortunately I wont have time tonight to try this out, but tomorrow I should. Also your other problem.. if you want to email me my email is [firstname]d[lastname] at gmail dot com

24. Jyrki

    27|Sep|2007 24

    Hello!

    Thanks for a great jQuery plugin!

    I’m trying to use this for a confirmation. The link looks like … onclick=”if (confirm(‘Do you really want to delete /testi/testi1?’)) { var f = document.createElement(‘form’); document.body.appendChild(f); f.method = ‘POST’; f.action = this.href; f.submit(); };return false;” …
    My problem is how to make a confirm() replacement. I’ve tried the following:

    function confirm(msg) {
    $.prompt(msg, {buttons:{Cancel:false, Ok:true}, callback:check_confirmation}).corner();
    }

    function check_confirmation(v, m) {
    if(v) {
    return true;
    } else {
    return false;
    }
    }

    Thanks for your answers!

    -jyrki

25. trent

    27|Sep|2007 25

    Hi Jyrki,

    one thing that may be a little missleading is that this plugin can’t stall all javascript from processing until you answer its request. So just returning true or false will not send the onclick event… you will have to do something like this:

    ..onclick=”$.prompt(…);return false;”

    now we always stop that onclick from returning true. Then in the callback function you will have to manually submit your form:

    function check_confirmation(v,m{
    if(v){
    $(‘#myform’).submit();
    }
    else{
    //do nothing
    }
    }

    Does that help? Let me know if you need more help.

26. Rabbit

    01|Oct|2007 26

    Hi Trent — awesome plugin. I have, however an issue in IE7 whereby I have to click a Cancel button twice in order to hide the prompt.

    I’ve noticed the opacity is twice what it’s set at, so my guess is it’s being thrown up twice. My invocation looks like:

    jQuery(‘#create_new_part_size’).click(function() {
    jQuery.prompt(jQuery(‘#part_size_form’).html(), { buttons: { ‘Cancel’: false } });
    return false;
    });

    But it still does it. Any ideas?

27. Roger

    02|Oct|2007 27

    Hi Trent. Great work with Impromptu! I’ve been playing with it for a few days now and have decided to start using it for some basic information dialog windows. I’ve started with a simple login window and it all works well with the exception of getting the account name input box to take the focus so input can begin without further mouse involvement. So far I have this: -

    $.prompt($(‘#login-dialog’).html(), { callback: processLogin, buttons: { Login: true, Cancel: false }}).focus();

    This causes the main window to become focused so a single press of tab moves the focus to the input box I want it to be in. Without the focus() call, there was many tabs to be pressed. However, I’m having trouble selecting specific elements within the created impromptu window to focus further on that. Any pointers on how I might best achieve this using impromptu?

    Thanks!!!

28. trent

    03|Oct|2007 28

    -Rabbit, It definitely sounds like you’re looping somewhere and creating two prompts like you said. Just for process of elimination have you tried temporarily commenting out the .prompt and use an alert instead just to see if the problem is within $.prompt? If it is within $.prompt I would try a very basic one with minimal functionality:

    $.prompt(‘testing’);

    I would start there. If that doesn’t work and you could supply a short sample of your code that would help on this end.

29. trent

    03|Oct|2007 29

    -Roger, If I understand you correctly you want to focus on a certain input box within the $.prompt? have you tried something like this:

    $.prompt(….).find(‘#myInput’).focus()

    You could also assign $.prompt jQuery object to a variable and then access it whenever you need to while the prompt is open..

    var myPrompt = $.prompt(…);
    myPrompt.find(‘#myInput’).focus();

    Does this help?

30. Roger

    03|Oct|2007 30

    -Trent: $.prompt(….).find(’#myInput’).focus() works well. The input gets the focus so I can just start typing away.

    Functionally it’s exactly what I was after so thanks!! There is something that’s not quite right as although the input box has the focus and keyboard strokes are applied to it, the cursor isn’t visible.

    If I alt-tab away and come back the cursor works fine. Not sure if this is an impromptu thing or a browser issue though – and not really a big deal anyway. Just thought I’d mention it in case it’s impromptu related.

    Thanks again!!

31. trent

    04|Oct|2007 31

    I updated documentation a bit and added some new examples! Example 12 is a nice little change, only css and one little image for the buttons!

32. test

    12|Oct|2007 32

    How can I fix the bug mentioned in (8) ?
    What do I have to change ? thanx

33. trent

    12|Oct|2007 33

    Here is the solution I came up with..

    Paste this line:

    b.height(b.height()- (jqi.height() + (jqi.css(“paddingTop”).split(“px”)[0]*1) + (jqi.css(“paddingBottom”).split(“px”)[0]*1)) );

    just after this line:

    var jqif = b.prepend(fade).children(‘#’+ o.prefix +’fade’);

    This worked for me in ie, safari, ff, and opera

34. Jesse

    16|Oct|2007 34

    I have been testing this plugin with the latest version of JQuery 1.2.1 and Impromptu 1.0 and I’m having an issue with IE7 only.. IE6/FF2.0.* works great.

    The issue is that the message box appears at the top left and it falls behind the opacity of the fade effect. I’m not sure what the problem is but i think this is a [bug].

    I’ve added the css you’ve provided in your example and a simple $.prompt(‘test’); can anyone provide some insight here. Thanks.

35. Jesse

    16|Oct|2007 35

    I found the answer to the pervious post. As foolish as this may sound but you need to let IE7 which DOCTYPE you are using. so fixed my problem. I hope this helps anyone with the same problem.

36. trent

    16|Oct|2007 36

    Glad you were able to find the solution. Thanks for posting it as well so maybe It will help others! I have had trouble with forgetting the doctype before and ie7 act weird.

37. Jesse

    25|Oct|2007 37

    I’m having another issue with impromptu, it seems that there is a problem related to IE6, and that it doesn’t keep the prompt message centered on the page when you scroll the page. Anyone else having this problem?

38. trent

    25|Oct|2007 38

    I see your problem. Since I rely so much on css and ie6 doesn’t support position: fixed; I made it position: absolute; and disabled scrolling. Sorry about this. Do you know of an easy “hack” with jquery to enable position: fixed; for ie6? I am researching this and will come up with a built in solution asap, for now you might want to look at this:
    http://bassistance.de/2006/11/02/position-fixed-for-ie-7/

39. Jesse

    25|Oct|2007 39

    I’m seeing another problem with IE6, and this is a strange one. When the window is visible and your window has a

40. Jesse

    25|Oct|2007 40

    I’m seeing another problem with IE6, and this is a strange one. When the window is visible and your window has a select element in there. (notice last post picked up my html and left my post in half) I’m looking into fixing this.

41. Jesse

    25|Oct|2007 41

    This was easier then it seemed. Here is the problem. The line that says…

    if(ie6) b.css({overflow: “hidden”}).find(“select”).css({ visibility: “hidden” });

    comment out:

    .find(“select”).css({ visibility: “hidden” })

    This should do it! I hope this helps anyone with the same problem.

42. trent

    25|Oct|2007 42

    Awesome! Only thing is by taking that out is if there are any selects under the prompt box it will show through in ie6. This may be something to look at as well:
    http://dean.edwards.name/IE7/

    I’ve basically got two bugs that I’m working on. Neither really keep it from working but are annoying:

    -when showing prompt the height of the prompt gets added to the container

    -position: fixed; in ie6

    I hope to get these two fixed for the next release. I hope to achieve this without requiring any extra plugins so it will be completely backwards compatible.

43. Moe

    26|Oct|2007 43

    Hi Trent,

    Awesome plugin.
    I have a problem setting the buttonnames dynamically with the inputparameters.

    this.confirmdialog = function (Msg, yesButton, noButton){

    $.prompt(sendOrder,{submit: Msg, buttons: { yesButton : true, noButton: false } });
    }

    I’ve tried yesButton.toString() and yesButton.valueOf() but it doesn’t work.

    Do you have any idea how to solve this?
    I appreciate your help.
    Thanx

44. trent

    26|Oct|2007 44

    Hey Moe,

    I think the problem is coming in where you use a variable for the button name. Javascript can’t tell the difference between the name and the variable. However, we can achieve the same thing by treating it like an array.

    this.confirmdialog = function (Msg, yesButton, noButton){

    var btns = {};
    btns[yesButton] = true;
    btns[noButton] = false;

    $.prompt(sendOrder,
    {submit: Msg, buttons: btns }
    );
    }

    Hope that helps!

45. Jesse

    26|Oct|2007 45

    QUOTE:
    -when showing prompt the height of the prompt gets added to the container

    I had this problem till i added position:absolute to the div.jqi class.

    This issue i believe was already addressed in the previous posts. Is there any obvious problems related to doing this?

46. Moe

    26|Oct|2007 46

    Thanx Trent for the quick response.
    It works gr8.

    =)

47. trent

    26|Oct|2007 47

    Jesse, excellent catch! that works great for me as well. Beats the heck out of writing a complicated js fix I think. Now just an ie6 fix for the lack of position: fixed; !

48. Jesse

    08|Nov|2007 48

    Well, It has been bugging me since i last posted about it, for the IE6 bug. Well i played around with css and that page you sent me trent. I have the fix for IE6 and its all in css. just add this to your css and it should work great.

    @media screen
    {
    div.jqi
    {
    position: fixed;
    }
    * html
    {
    overflow-y: hidden;
    }
    * html body
    {
    overflow-y: auto;
    height: 100%;
    font-size: 100%;
    }
    * html div.jqi
    {
    position: absolute;
    }
    }

    One thing is that you can’t scroll the page like other browsers, but it does allow the message to apear in the correct place! So for those of you looking here it is! Enjoy!

49. Jesse

    08|Nov|2007 49

    After a little more playing i was able to actually strip a lot of that out… it turns out all you really need to add to your css are these two lines.

    * html{overflow-y: hidden;}
    * html body{overflow-y: auto; height: 100%;}

50. trent

    08|Nov|2007 50

    Excellent! Thanks for the fix. Sorry I havn’t gotten this worked out sooner.

51. Chinchih

    09|Nov|2007 51

    This is a great plugin. However, I observed several problems trying it in a web application which uses applets and embedded object (ActiveX plugins).

    (1) In Firefox 2.x, the main page does not fade smoothly — the applets “flashes” several times before the “prompt box” is displayed, giving the page kind of “jittering.”

    (2) In IE6 and IE7, the prompt box gets “masked” by the embedded object (see a partial screen shot at http://mywebpages.comcast.net/cclu/tmp/improptu-screenshot.png), making the buttons inaccessible.

    Could you please provide some tips on how to fix these problems (with css hacks, perhaps)?

    Thanks,
    Chinchih

52. trent

    09|Nov|2007 52

    Hey Chinchih,

    I’m thinking the ie problem can be fixed by using an iframe as the overlay instead of the div. I don’t like this solution at all but that’s the only way I know to hide that embedded object. I might do a condition to check for any objects in my next version and use the iframe if there are any.. such fix might look like this:

    if($(‘object, applet’).length > 0)
    fade = ‘<iframe src=”" class=”‘+ o.prefix +’fade” id=”‘+ o.prefix +’fade”></iframe>’;

    place this in the Impromptu file just under the “var fade = ….” line. Then tweak your css to div.jqifade, iframe.jqifade{…}

    This might fix the issue as well with the applet, but I’m pretty sure it will fix the object. I don’t have access to a flash object or an applet at this time, but I will test this over the weekend.

53. benneb

    09|Nov|2007 53

    hi everybody

    i would like to put javascript, it works with firefox, but not with IE, no javascript works with IE :( , my test code :

    var html = “alert(‘test’);”;

    $.prompt(html,
    {
    submit: submitfunc,
    buttons: { Cancel:false, OK:true }
    }
    ).corner();

    thx for help

54. Chinchih

    09|Nov|2007 54

    The iframe trick in #52 worked! Thank you so much!!

    Chinchih

55. Chinchih

    09|Nov|2007 55

    I just wanted to note that the trick in #52 causes problems in Firefox 2.x. This can be avoided by adding a browser check:

    if(jQuery.browser.msie && $(‘object, applet’).length > 0)

56. trent

    09|Nov|2007 56

    Chinchih, Thats great! Glad it worked! This will be something I include in the next release!

    Benneb, Are you wanting to execute the javascript within the prompt message? If so I would recommend not putting the javascript within the text itself unless it is an element’s event(onClick, onKeyUp, etc..) to run javascript when it prompts simply place it after the $.prompt() like so:

    $.prompt(‘my message’);
    alert(‘hello world’);

    Since the loading of the prompt is not asyncronous it will work the same.

    That being said I think I will add another function to the options for onLoad or loadComplete for times like this just so everything is more consistant.

57. benneb

    09|Nov|2007 57

    thx for your help

    yes i want to execute js in prompt message, for exemple in my prompt message, i have a jquery jcalendar plugin ^^ and jquery tabbed plugin ^^ , but it works only with firefox :/
    if 1 javascript success with IE ( like an alert ) , my problem will be finish.

    have you ever sucess to execute one js in prompt message ?

    sorry for my english, i am french :P

58. trent

    11|Nov|2007 58

    I see your problem now, I havn’t ever tried this. I am currently developing version 1.1. In there I will have an “load complete” function as an option to execute javascript. It should be ready today, and I will try a few examples of your issue and maybe I can help you out.

59. Bar Code Activex For Access

    06|Feb|2008 59

    Postal code Bar

    A ZIP Code is the postal code used by the United States Postal Service, zip code maps free which always writes it with capital letters.

60. bootZ

    13|Jan|2009 60

    Very nice tool!! But also wanted the ability to show images on the button, so here are the changes I have done to allow this:

    jQuery.each(o.buttons,function(k,v){ var itm={};itm=(v+’:'+k).split(‘:’);msgbox += ”+ itm[1] +”});

    … and

    //Events
    jQuery(‘#’+ o.prefix +’buttons’).children(‘button’).click(function(){
    var msg = jqi.children(‘.’+ o.prefix +’container’).children(‘.’+ o.prefix +’message’);
    var clicked = ((o.buttons[this.name.substr((o.prefix+'button').length)]+’:').split(‘:’))[0];
    if(o.submit(clicked,msg))
    removePrompt(true,clicked,msg);
    });

    So you pass the contents in the sae field as the value seperated by the ‘:’ – of course goes without saying that you may need to substitute ‘:’ to another character to be parsed on if using the ‘:’ within your image/html code. Here is my example:

    buttons:{Y:”true: Yes”, N:”false: No”},

    and I get the correct result back in the callback.

    Hope this helps.

61. bootZ

    13|Jan|2009 61

    Looks like the comment box has removed the image tags, so this is what you need to define each button entry as:

    {Confirm:’true: img src= Confirm’,
    Cancel:’false: img src= Cancel’},

    I have remove html formatting

62. bootZ

    13|Jan|2009 62

    Same has happened with the button definition, will try posting it again:

    jQuery.each(o.buttons,function(k,v){ var itm={};itm=(v+’:'+k).split(‘:’);msgbox += ‘ button name=”‘+ o.prefix +’button’+ k +’” id=”‘+ o.prefix +’button’+ k +’” value=”‘+ itm[0] +’” ‘+ itm[1] +’ button ‘});

    removed html tags around the ‘button’

63. jennifer

    16|Jan|2009 63

    Jquery Impromptu is Amazing,, To the fullest..

    However, i have a few problems in integrating this with forms or sumbits..

    Hope i can find great ideas in this blog..

64. Ved

    19|Jan|2009 64

    Hey Trent,

    I have discovered a bug, that Impromptu doesn’t work well with thickbox in IE. When you use it with thickbox the prompt come behind the thickbox, where it should come infront of thickbox screen.

65. trent

    19|Jan|2009 65

    I can see this being an issue that may vary from browser to browser. I wouldn’t recommend using these two at the same time as more than one modal both trying to do the same thing(cover up everything else)will cause issues. You can try changing the zIndex option for your case to place it on top.

66. nicky

    10|Dec|2009 66

    Found a bug with multiple checkbox when 3 or more checkbox checked in Firefox 3 and IE.
    when a, b, c, d is checked the array is supposed to look like [ a, b, c, d] instead its coming out as [[[ a, b ],c ], d]

    did a fix for it too on line 84
    Original :
    } else if (typeof forminputs[obj.name] == Array) {
    modified :
    } else if (typeof forminputs[obj.name] == Array || typeof forminputs[obj.name] == ‘object’)

    everything else is AWESOME !!!! =)

    hope this helps.