trentrichardson / jquery-impromptu Goto Github PK

Fantastic library, one small problem which is easily replicated on the example, http://trentrichardson.com/Impromptu/demos/survey.html
If the prompt is closed without completing the survey, the prompt is empty when re-opened. I have been unable to fix the issue.

is it possible to use the esc-key to close a impromptu dialog?

thanxs

markus

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

See: http://jsfiddle.net/kj66j6wa/14/
Second prompt is also added in jqistates of first prompt.

Hello, since Impromptu applies inline event handlers (considered as "bad" practice) it will cause trouble in combination with a strict CSP. http://www.html5rocks.com/en/tutorials/security/content-security-policy/ Might consider to use only event listeners at future versions.

Another thing I noticed: Nothing prevents multiple form submissions.
Kind regards, Martinez

Should be use document.body.scrollHeight

I have impromptu working fine using version 5.2.5. However, when I upgraded to version 6.0.0, in Firebug I'm getting a "TypeError: $.prompt ... is undefined" error.

Has anything changed in regards to how to reference Impromptu?
Thanks.

Hi,

We are using bootstrap as our main layout base, and using impromptu as the tour feature for new users. Currently, we set the container and the x/y in relation to that container. If the tour has scrolled the page for some reason, the x/y coordinates do not behave the same as they would if the user has not scrolled.

Additionally, if the tour scrolls the content, there are times where the impromptu window does not end up where it is supposed to in relation to the container.

Here is a tiny snippet of one of our tour's code:

{
  title: "Report Bugs",
  html: 'We are still testing this service extensively. Please help us find problems, so we can make this as awesome as possible for release!',
  buttons: {
    Prev: -1, 
    Next: 1
  },
  focus: 1,
  position: {
    container: '#btnTemplateBugReport', 
    x: -345, 
    y: -12, 
    width: 300, 
    arrow: 'rt'
  },
  submit: tourGoToMyProfileFunc
},
{
  title: 'Your Profile',
  html: 'You can click here to view your profile and wall.',
  buttons: {
    Prev: -1, 
    Next: 1
  },
  focus: 1,
  position: {
    container: '#userNavMenu',
    x: -350, 
    y: 50, 
    width: 300, 
    arrow: 'tr'
  },
  submit: tourGoToCommunityFunc
},
{
  title: 'Link Social',
  html: 'Make sure you link Facebook, Steam, and Youtube to unlock all the social aspects of GameWisp!',
  buttons: {
    Prev: -1, 
    Next: 1
  },
  focus: 1,
  position: {
    x: 440, 
    y: 205, 
    width: 300, 
    arrow: 'lt'
  },
  submit: tourSubmitFunc
},

Currently, impormptu does not support opening new prompt on top of another prompt.
See: http://jsfiddle.net/kj66j6wa/1/

Note the code works fine in impromptu 3.1: http://jsfiddle.net/kj66j6wa/2/

It works perfect, but sometimes it doesn't. I have to press f5 key and try again and It works again. :(

Greetings.

Very simple:

Use $.prompt('test'); #do not close
Then run $.prompt('test2');
The second prompt will not display properly and also cause the first prompt not to work properly anymore (cannot close it).

When the state html property is defined like suggested in the documentation, the form passes the values properly.

html: '<label>First <input type="text" name="fname" value=""></label><br />'+
      <label>Last <input type="text" name="lname" value=""></label><br />',

But when I am using the html layout that bootstrap requires to look nice, like

html: '<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>',

my form values are lost and I get an empty object as a result.

Line 292 causes error after cancelling Impromptu window: 'data(...).position' is empty or no object

Solution:
change:
pos = $state.data('jqi').position,
to:
pos = ($state.data('jqi')==null?undefined:$state.data('jqi').position),

Hi there,

Thanks for this awesome plugin!

I just updated from a really old version from 2010. I'm having to redo everything to use states instead of multiple prompts like I used before but I really like it.

One issue I ran into is when I'm dynamically adding states and then removing them it doesn't appear to work properly. The html doesn't get removed from the page and it's also doing another strange thing and changing the state it's on.

Example

The states:
state0 - has a link in it's html
state1 - asks for a password
state2 - shows a success message
state3 - a dynamically added state
- html is set to a dynamic message which is why it has to get added and removed in the first place
- has a submit function that calls goToState('state0')
- has a submit function that calls removeState('state3')

The steps:

1. I click a link on the page and it prompts to state0
2. I click the link inside state0 which causes one of the following:
   • go to state1 if a password is required for the link
   • go to state2 if clicking the link was successful
   • add state3 if there is a different result and goToState('state3',true)
3. I click the Ok button which causes the following to happen inside the submit function:
   • goToState('state0') - basically back to step 2
   • removeState('state3') - however state3 is never actually removed
4. Back at step 2 after I click the link for the second time and it shows the sub state3 when I click the Ok button it will actually transition to state1

I propose adding a newState parameter to the removeState function that sends you to the new state you want to go to after the state is removed.

In this case in the state3 submit function/step 3 above I would just use:
removeState('state3','state0')

For example:

    /**
    * removeState - Removes a state from the promt
    * @param state String - Name of the state
    * @param newState String - Name of the state to go to
    * @return Boolean - returns true on success, false on failure
    */
    $.prompt.removeState = function(state, newState) {
        var $state = $.prompt.getState(state);

        if($state.length === 0){
            return false;
        }

        // transition away from it before deleting
        $.prompt.goToState(newState);
        $state.slideUp( "slow", function() {
            $state.remove();
        });

        return true;
    };

This would probably have to be modified more since it isn't going to the next or previous states anymore and requires the newState parameter but there is the general idea anyway.

Sorry if this is obvious, but how can I open a multiple-state prompt in a specific state other than the first one in the states object? In other words, in the first statesdemo example, how can I open the prompt in state1 instead of state0?

I'm working on a login/logout/registration form with each of the three as a separate state and would like to start the prompt in either the "log in" or "log out" state depending on whether the user is currently logged in or not.

(I'm trying to work out the solution reading Impromptu's source code, but figured I'd also pose this question here for others like me to find in the future.)

Hello, I'm using $.Ajax, and in the data parameter I'm sending the "f" object but I get an error message saying "Error JSON Primitive", Does anybody know what the problem is?

Thanks.

To reproduce the bug, add in the survey demo html file :

Head part :
<link rel="stylesheet" media="all" type="text/css" href="../themes/cupertino/jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.10.3.custom.min.js"></script>

script part :
$(document).ready(function() {$('#test').dialog({modal:true});});

body part :
<div id="test"><a href="javascript:openprompt()">Test Impromptu States Survey</a></div>

Enhancement

When no effect is set for showing a non-persistent overlay, there is still a fast fadeOut effect used when closing the overlay by clicking anywhere else in the screen. Maybe the close event can also use the opts.show effect? (or maybe a separate opts.hide effect)

like:

$.prompt({
    html: '<form action="/user/settings" method="post"......',
})

http://n1309.hizliresim.com/1f/s/szgc2.png

I have an impromptu walkthrough which works great. But one prompt points to an item that uses CSS to remain static on the page (like a jquery mobile header or footer). When I get to the prompt to point to that menu, the page scrolls, the prompt opens, but then the menu re-positions itself. Then the prompt is left hanging in the middle, pointing at nothing. I bought the ebook, but couldn't find a clue..is it possible to turn off scrolling for a specific state? That would solve the issue.
Thanks for the great plugin.

I try to use your jquery library to replace the traditional confirmation modal dialog. I had the following code in a row deleting event of a ajax control. Basically, I use the following.

var continueDelete = $.prompt("Are you use to delete the row?",
{
title: 'Confirmation',
buttons: { "Ok": true, "Cancel": false },
submit: function(e, v, m, f) {
return v;
}
});
if (!continueDelete)
eventArgs.set_cancel(true);

However, I found that the $prompt is not shown yet and the statement if (!continueDelete) eventArgs.set_cancel(true); is already executed. The row will be deleted even though the user click Cancel to cancel. Do you know how I can achieve the confirmation like regular confirm? If I use the regular confirm, it works.

Hi,
I have implemented impromptu using asp.net. Everything is fine and working except on ipad. My function to call the plugin is as;

function ShowImromptu(caption, message, buttons, callBackFunction,focus)
{
if(callBackFunction != null && callBackFunction != 'null' && callBackFunction != "null" && callBackFunction!= '')
{
var temp =
{
init: {
html:'',
buttons: { }
},
ALR000:
{
html:'',
submit: callBackFunction,
buttons: buttons,
focus: focus
}
}
}
else
{

    var temp = 
        {
            init: {
                html:'',
                buttons: { }
            },
            ALR000: 
            {
                html:'',
                buttons: buttons,                       
                focus: focus
            }
        }
}       
var spinner = $('<div id="ajaxloader2"></div><div id="statecaption"></div>');
$.prompt(temp);
spinner.prependTo('#jqi');  
ShowCustomPromptAlert(caption, message,callBackFunction,300,false);
return false;

}

e.g My Parameters are;

var buttons = {OK:false};
var callBack = function(v,m,f){$('#ctl00_ContentPlaceHolder1_AmountField').focus();};
ShowImromptu('ALRT-EF-01', '_EntryForm_EmptyFields_Alert', buttons, callBack ,0);

But it never shows in IPAD.

Thanks

use absolute will cause some bug when the scrollbar is not at the top

@@ -295,11 +295,11 @@
            left: 0,
            right: 0,
            bottom: 0
        });
        $.prompt.jqif.css({
-           position: "absolute",
+           position: "fixed",
            height: height,
            width: "100%",
            top: 0,
            left: 0,
            right: 0,

box is not centered in a page with horizontal scroll. when you scroll horizontal bar to the right and open prompt box, the box is not centered to screen.

I'm using the following code for a hotel booking engine:

var buttons = [];
buttons.push({title: "Existing Guest", value: "guest"});
buttons.push({title: "Existing Booking", value: "booking"});

$.prompt({
    init: {
        title: "Reservation Creation",
        html: '<p>Where should this reservation be assigned?</p>',
        buttons: buttons,
        focus: 1,
        submit: function(e,v,m,f) {
            e.preventDefault();
            if (v == 'guest' || v == 'booking') {
                $.prompt.goToState(v, true);
                return false;
            }
            $.prompt.close();
        }
    },
    guest: {
        html: '<label>Guest email address <input type="text" name="email" /></label>',
        buttons: {
            Confirm: 1,
            Cancel: -1
        },
        focus: "input[name='email']",
        submit:function(e,v,m,f){
            e.preventDefault();
            if (v == 1) {
                $.extend(ajax.data, {
                    reference: f.email
                });
                $.ajax(ajax);
                $.prompt.close();
            }
            else if (v == -1) {
                $.prompt.goToState('init');
            }
        }
    },
    booking: {
        html: '<label>Booking reference <input type="text" name="reference" /></label>',
        buttons: {
            Confirm: 1,
            Cancel: -1
        },
        focus: "input[name='reference']",
        submit:function(e,v,m,f){
            e.preventDefault();
            if (v == 1) {
                $.extend(ajax.data, {
                    reference: f.reference
                });
                $.ajax(ajax);
                $.prompt.close();
            }
            else if (v == -1) {
                $.prompt.goToState('init');
            }
        }
    }
});

When the user enters the sub-state (to enter an email address or existing booking reference) the focus is already on the input field. But hitting enter causes the page to hang and become completely unresponsive

Pressing escape, etc, doesn't do anything (the buttons bar on the prompt flash though, weirdly). The user is forced to do a page refresh to regain control.

No errors are raised in the console, and I even tried removing the onsubmit declaration in the form that it builds. This made no difference.

Hi, I'm using your amazing and comfortable plugin but have some doubts. This is my code so far:

$(".sell-product").click(function() {
        var current = $(this);

        var statesdemo = {
            state0: {
                title: "Este producto ya posee stock, quiere actualizarlo?",
                buttons: {"Sí": true, "No": false},
                submit: function(e, v, m, f) {
                    if (v == true) {
                        $.prompt.goToState('state1');
                    }
                }
            },
            state1: {
                title: 'Cantidad',
                html: '<label>Cantidad <input type="text" name="stock_qty" id="stock_qty" value=""></label><br />',
                buttons: {"Guardar": true, "Cancelar": false},
                focus: "input[name='stock_qty']",
                submit: function(e, v, m, f) {
                    console.log(f);
                    e.preventDefault();
                }
            }
        };

        var request = $.ajax({
            type: 'GET',
            url: Routing.generate('stock_exists', {company_id: company_id, product_upc: current.attr("data-id")}),
            success: function(data) {
                $("#layout-center").html();
                if (data.response === false) {
                    $.prompt(statesdemo);
                } else {
                    $("#product-search, #product_create").hide();
                    $("#sell-existent-product").load(Routing.generate('create_from_product', {company_id: company_id, product_upc: current.attr("data-id")}));
                    $("#sell-existent-product").show();
                }
            },
            error: function() {
                request.abort();
            }
        });
    });

What I'm trying to do here is:

1 - If data.response is false then show state0 this works
2 - when I click "Si" which value is true then go to state1 this do not work since prompt is closed and I can't see input
3 - After I introduce a value in the input in stock_qty input and click in "Guardar" which value is true once again then I should made a AJAX call

Can you help me to fix my code in order to get this work?

How Can I Pass Parameters among States? Greeting.

When I use the enter key to valid a form and doing an ajax call in the submit callback. It call a second time the submit callback.

I build this small test with these files :
https://filesender.renater.fr/?vid=61d10bb3-1df0-37c9-2bef-000036df7ed9
I put the ajax async = false properties to reproduce easily this strange behaviour. When I click directly on "Work" button, it works fine. I used console.log function to trace calls.

submit: function(event,value,message,form)
I know what all of the parms are except the 'message' which I know is an object but I can't seem to find what it contains. Just thought I'd ask so I can see if there is anything interesting in there to use.

Thanks in advance.

Tested in Chrome - Version 33.0.1750.117 Mac OSX 10.9.1

Open any link on the demo site.
http://trentrichardson.com/Impromptu/

The overlay only appear after you resize your browser.

impromptu 3.1

invocation as follows:

theprompt = $.prompt(txt, {
prefix:'cleanblue',
buttons: {Save:'Save', Close:'Close'},
submit:function(v,m,f){
if (v == 'Save') {

                return false;
            } else {
                $.prompt.close();
            }
        }
});

In function $.prompt.jqi.delegate, you said "for some reason we couldn't get the value", but i found for some reason the $state object will also is empty.
I found $t is the button object i clicked, but $t.parents('.jqistate') never reached, since they are at different DOM trees.

Hi,

Ho can I define the widht of impromptu box ?

I use impromptu to show text + image and the image is bigger than the width of the impromptu box.

I use the 'states' version to show multiple boxes each having a different widht (as they show different images).

I tried the code below but that did not work (note I added the widht:700px to it).

var statesdemo = {
                state0: {
                        width: '700px', 
                    html: "<%=trJS("explain-sign-step3-1.text",lg)%>",
                    buttons: { Cancel: false, Next: true },
                    focus: 1,
                    submit:function(e,v,m,f){
                        if(v){
                            e.preventDefault();
                            $.prompt.goToState('state1');
                            return false;
                        }
                        $.prompt.close();
                    }

...
The problem is the widht of the image is not taken into consideration when defining the widht of the Impromptu box, see example below. It is not problem to add the width manually but I can't find out how to do that:

Hi,
First of all thanks for this plugin.

I was tried to reopen prompt after close for ajax error. I used callback method like you used in ajax demo (http://trentrichardson.com/Impromptu/demos/demoajax.php). It didn't work neither your demo nor mine.

Hello,

I had a problem box not being centered, I found the problem, since jQ 1.9 the outerWidth() receives an argument if counts with margin or not.

So anyone having that problem:

L353: marginLeft: (($.prompt.jqi.outerWidth()/2)*-1)

to

L353: marginLeft: (($.prompt.jqi.outerWidth(false)/2)*-1)

And it will center.

Good plugin, by the way.

Hello, thank you for the wonderful Impromptu.

I need to be able to detect orientation change when using this on iPad, normally it is fine.
But when using it with <input type="text"...>, when the iPad soft keypad shown, and I rotate the iPad, it would not allow the screen size to change.
I am thinking I may need to bind orientation change event to the script, and being quite new to this, I am not sure where to do that in the script.

Please help.
Thanks.

Hi,
first of all thanks for your plugin, we use it to build our filemanager.
I want to upgrade to 4.1 but I have a problem.

To illustrate it, I'll use the user_management sample you provided :

close: function(e,v,m,f){

                        if(v){                          
                            //Here is where you would do an ajax post to edit the user
                            //also you might want to print out true/false from your .php
                            //file and verify it has been removed before removing from the 
                            //html.  if false dont remove, $promt() the error.

                            //$.post('edituser.php',{userfname:f.editfname,userlname:f.editlname}, callback:function(data){
                            //  if(data == 'true'){

                                    user.find('.fname').text(f.editfname);
                                    user.find('.lname').text(f.editlname);
                                    $.prompt('Update is done');

                            //  }else{ $.prompt('An Error Occured while editing this user'); }                          
                            //});
                        }
                        else{}

I just added the $.prompt('Update is done'); instructions but that just doesn't work. Is that a bug? it was working on previous version?

Thanks for your reply

Thanks

Hi,
I just try to use you library but I discovered following error:

Uncaught TypeError: Cannot read property 'length' of undefined

when using your bootstrap example. The error also exsits on you website. Do as follows:

1. Goto http://trentrichardson.com/Impromptu/demos/twitter_bootstrap.html
2. Click on Test Impromptu States Survey link
3. Click on the Cancel button
4. Click again on the Test Impromptu States Survey link
5. The box is empty and above error is generated (I'm using latest version of Chrome).

Can you fix this ?

Using Impromptu with Jquery UI makes UI functionality void, any check how this could be resolved

There is no real documentation on how to use the themes that are distributed. You do have two examples of using 'outside' themes plus you have two blogs showing two new themes.

I would really like to understand how you use the themes that are distributed.

Thanks...

I've tried defining buttons as array (latest stable version - v5.2.4) by copy&paste of book example:

prompt("Would you like to proceed?", {
buttons: [
{ title: "Yes, I'm Sure", value: true },
{ title: "No, Abort", value: false }
]
});

But I get additional 20 or so buttons, 'each', 'eachSlice'...:

Using buttons in 'normal' way ("Yes, I'm Sure": true) works normally. No js errors are thrown in Firebug. jQuery version is 1.11.1.

Any ideas?

timeout has 2 issues.
1st is that when timeout is executed, the close event is not called.
the 2nd one is that if you set up a high value and you reopen the prompt, 1st timeout is still set.

Thanks for a great plugin. I would like to display the prompt as fast as possible. I see that you are using slideUp() and slideDown() when displaying the prompt. Can you create an option for using no transition effects? Thanks.

Would it be possible to set the initial forminputs data when creating the prompt, like this:

$.prompt("This customer will be removed. Are you sure?", {
title: "Delete Customer?",
formVals: { customerId: customerId },
buttons: { "Delete the customer": true, "Cancel": false },
submit: function(event, value, message, formVals){
var customerId = formVals.customerId;
...
}
});

This was my fix:

forminputs = stateobj.formVals;
...

.prompt.defaults = {
state: {
formVals: {},
}
}

The impromptu library fails to register for me.

Trying to use these versions:
https://raw.githubusercontent.com/trentrichardson/jQuery-Impromptu/master/dist/jquery-impromptu.min.css (downloaded today, 2015-02-07)
jquery version 1.10.0

I get this error right when loading the plugin:
Uncaught ReferenceError: Invalid left-hand side expression in prefix operation

If you use an object to configure the buttons for your modal AND the title you choose for your button contains an html entity

{title: 'Save & Close', value: true}

Then the 'clicked' button will not be reported correctly ($.text() on clicked button does not match title attribute).
The upshot of this is that the second value in any callbacks (the value of the clicked button) will be undefined.

Can you please add bower support to your package?
It would be really helpful, as bower is focused on front-end tools.
Thank you!