Custom Button Text with Impromptu
By trent on 25 Aug in Impromptu, Javascript
I’ve had a few users asking lately about dynamically creating their button text for Impromptu. I thought I’d take a moment to share a small bit of code to help out. The documentation shows using a quick way to name your buttons like so:
var btns = { Ok:true, Cancel: false };
But many times you need something more complex. Maybe you are supporting multiple languages and need to call a function to get the correct translation for your buttons. Heres how you might go about such considering lang() will be a function to return the appropriate text. (this was borrowed from a comment on a previous post)
var btns = {};
btns[lang("ok")] = true;
btns[lang("cancel")] = false;
Thats all there is to it, just approaching it a different way is all. I hope this helps everyone out!
23 Responses
-
-
Neotjsys,
You should be able to simply change the height attribute in the css. Same with the width. Hope that helps
-
Ben K - Sep 11, 2009
Hey Trent,
any love with adding an option to scroll the prompt with the page instead of being static?
(for long forms that are larger than the page) -
Hey Ben K,
Impromptu should scroll with your page. Or you asking for an option to make it not move where you can scroll out of the prompt??
-
Ben K - Sep 12, 2009
Hey Trent,
yep the option to not move, so when the page scrolls it goes lower on the prompt
because if the form height is longer than the page you cannot see the buttons (or the rest of the form)
Or if you wanted to be really fancy you could make it detect if the height of the prompt was bigger than the window, and then be able to scroll it into view……
cheers,
Ben -
Ben K - Sep 14, 2009
I’ve almost actually implemented it myself.
just struggling with the background fader, and having deja vu of having discussed this with you previously!
i’ve put in a new option “scrolled” which changes the position to “absolute” from “fixed” on the jqib, and makes the jqif “fixed”. i just need to fix the jqif for ie6
i’m trying to either put the “ie6 “fixed” hack in or make the jqif div cover the entire document body. neither of which seem to be working =( -
Sergei - Sep 18, 2009
hi, tell please!!
How i can submit data from forms. For example:
function openprompt(){var temp = {
state0: {
html:’bla-bla-blaany1any2′,
buttons: { Cancel: false, Next: true },
buttons: { Cancel: false, Next: true },submit:function(v,m,f){
if(!v)
return true;
else $.prompt.goToState(‘state1′);//go forward
return false;
}
},
state1: {
html:’bla222-bla222-bla222any1414any144’,
buttons: { Cancel: false, Next: true },
buttons: { Cancel: false, Next: true },submit:function(v,m,f){
if(!v)
return true;
else $.prompt.goToState(‘state2’);//go forward
return false;
}
},
state2: {
html:”,
buttons: { Back: -1, Exit: 0, Submit: 1 },submit:function(v,m,f){
if(v==0)
$.prompt.close()
else if(v==1){
$.post(‘test.php’,{vopr: f.vopr, vopr2: f.vopr2});
}
else if(v=-1)
$.prompt.goToState(‘state0’);//go back
return false;
}
}}
$.prompt(temp);
}test.php :
-
Sergei - Sep 18, 2009
hi, tell please!!
How i can submit data from forms. For example:
[code]
function openprompt(){var temp = {
state0: {
html:’bla-bla-blaany1any2′,
buttons: { Cancel: false, Next: true },
buttons: { Cancel: false, Next: true },submit:function(v,m,f){
if(!v)
return true;
else $.prompt.goToState(‘state1′);//go forward
return false;
}
},
state1: {
html:’bla222-bla222-bla222any1414any144’,
buttons: { Cancel: false, Next: true },
buttons: { Cancel: false, Next: true },submit:function(v,m,f){
if(!v)
return true;
else $.prompt.goToState(‘state2’);//go forward
return false;
}
},
state2: {
html:”,
buttons: { Back: -1, Exit: 0, Submit: 1 },submit:function(v,m,f){
if(v==0)
$.prompt.close()
else if(v==1){
$.post(‘test.php’,{vopr: f.vopr, vopr2: f.vopr2});
}
else if(v=-1)
$.prompt.goToState(‘state0’);//go back
return false;
}
}}
$.prompt(temp);
}test.php :
[/code]
-
Sergei - Sep 18, 2009
bla-bla-blaany1any2
-
Sergei - Sep 18, 2009
i dont insert html code in comments.
Sorry for my bad english! -
Hey Sergei,
It looks like you are close. If your form fields are within the html the “f” parameter should contain the values of those form fields. Then just pass it to your $.post similar to what you have. Example:
<input type=”text” id=”vopr” name=”vopr” value=”hello” />
Then f.vopr = “hello”
-
Sergei - Sep 18, 2009
I so have not understood as to add an initial code!
Are cut off tags -
Sergei - Sep 18, 2009
afunction openprompt(){
var temp = {
state0: {
html:'<p>How would you rate the content of this site?</p><div class="field"><input type="radio" name="rate1" value="1" />any1</div><div class="field"><input type="radio" name="rate1" value="2" />any2</div>’,
buttons: { Cancel: false, Next: true },
focus: 1,
submit:function(v,m,f){
if(!v)
$.prompt.close()
else $.prompt.goToState(‘state1′);//go forward
return false;
}
},
state1: {
html:'<p>Hbla-bla-bla</p><div class="field"><input type="radio" name="rate2" value="1" />any1</div><div class="field"><input type="radio" name="rate2" value="2" />any2</div>’,
buttons: { Back: -1, Cancel: 0, Next: 1 },
focus: 2,
submit:function(v,m,f){
if(v==0)
$.prompt.close()
else if(v==1)
$.prompt.goToState(‘state2’);//go forward
else if(v=-1)
$.prompt.goToState(‘state0′);//go back
return false;
}
},
state2: {
html:'<input type="submit"value="Submit">’,
buttons: { Back: -1, Cancel: 0, Next: 1 },
focus: 2,
submit: function(v, m, f){
if (v == 0)
$.prompt.close()
else
if (v == 1)
$.prompt.goToState(‘state3’);//go forward
else
if (v = -1)
$.prompt.goToState(‘state1’);//go back
return false;
} -
Sergei - Sep 18, 2009
tell please how submit this form into test.php example!????
-
Hi there Trent — thanks for writing this! I’m using it, and I appreciate all your hard work.
One question — how do I replace this with Impromptu:
function is_ok {
check = confirm(‘Some_message’);
return check;}
The trick is, I need to return the results of the confirm to a calling function. Doing this with Impromptu, is_ok tries to return before the decision is made. (Of course, the real function is more complex)
Any advice?
-
vjstormas - Oct 26, 2009
How i can make dynamic buttons name. i have wrote script, but i don’t get how i can make dynamic button name.
example:
Show popup
function create_popup(title, content, url, submit_button, close_button){$.prompt(”+title+”+content,
{buttons: {submit_button: true},
submit: function(v,m,f){
if(v==true){
window.location = url;
}
}
});
}but its not printing button name. how i can make it?
-
vjstormas,
check out this post: http://trentrichardson.com/2009/08/25/custom-button-text-with-impromptu/
Markis,
You will need to use the callback functions with Impromptu. Inside the callback functions you can run your logic or call a function. See example 9 here:
-
Except, how do I get the callback function to return a value that I can use in other functions to see what the user chose?
-
You can’t since its asyncronous. What you can do is this:
$.prompt(‘my text..’, { callback: function(v,m,f){
myfunc(v); //call your function like this
} });its not hard to do, everything is event based, much like with jQuery when you have execute a fadeOut effect you have to wait on the event to complete and run your code in the event handler function. If you’re using it in html like so: <a href=”” onclick=”return false;”> just automatically return false, then in your complete event for Impromptu manually navigate to that link’s destination
-
Actually — I’m not sure I can get away from JS confirms in my case. I really need that value passed back to the calling function. Since the Impromptu script doesn’t “pause” the script like a confirm (no JS does), I can’t collect the value (true or false) and pass it back to the calling function.
Since I have a ton of code executed after the confirm call in some cases, the code just inflates if I move away from the confirm. I looked at passing the “post-confirm” code as a string to be evaluated, but that’s just clumsy.
Too bad … it’s a great plug-in.
-
M - Mar 28, 2011
Is the example in this post applicable to the latest version? No custom button texts work for me when there are more parameters than the buttons passed to Impromptu.
-
M - Mar 28, 2011
For example, how would I set the button texts in this scenario:
$.prompt(“some text”, {
buttons: { cancel_button: false, submit_button: true },
focus: 1,
submit: function(v,m){
if(v == true)
{
//do something
}
}
});Using an array and/or function calls like in the post above just seem to result in the following error:
“missing : after property id” -
yes, it should also work with the latest version. Try setting buttons outside of your $.prompt:
var btns = {}; btns["ok"] = true; btns["cancel"] = false; $.prompt(“some text”, { buttons: btns, focus: 1, submit: function(v,m){ if(v == true) { //do something } } });
Thank for Impromptu plug_in.
I am studying Impromptu plug_in.
and then i meet the some question.
the height of prompt box is auto resize by html content, but not width.
Can i resize box’s width by some option or modifying some source?
thank for reading.