Many people are perhaps still a little unclear of what jQuery Impromptu really is. Its not just a lightbox or dialog. Its actually a small framework to process forms utilizing ajax; and along the way it happened to solve the ugly default confirm and alert problem.
It works by first allowing the user to supply html for display in the prompt. The user can supply as many fields as they like and style them to fit their needs. Then, with strategic callback functions you can validate and/or complete the prompt form. The common framework example is generally defined like the following:
$.prompt(txt,{
buttons:{Ok:true, Cancel:false},
submit: function(v,m){
//parameter v is the value clicked, m is the message at the time it was submitted
//validate our fields, return true if it validates, false if not
//returning false will hold the prompt open
//returning true will proceed to the callback function
},
callback: function(v,m){
//we passed validation process our form!
}
});
This small framework will allow you to process forms consistently, so no matter what type form you’re processing, you can they all follow the same process. Taking it one step further, lets say we need to retrieve all the values in our form so we can validate them. We would add a line like the following:
$.prompt(txt,{
buttons:{Ok:true, Cancel:false},
submit: function(v,m){
var vals = m.find(':input');
if(v){
//user clicked 'Ok', so validate
}
},
callback: function(v,m){
var vals = m.find(':input').serializeArray();
if(v){ //send with Ajax!
$.post('mypage.php',{ var0: vals[0].value },function(){});
}
}
});
There you have it, about as simple as it gets for ajax forms. Download it and give it a whirl, or look at a couple demos.
Related posts:
23 Responses
Luis
03|Dec|2008 1Hey man, nice work, I was testing the Impromptu, exactly the example demo2, and I saw that have a little bug, when you call the impromptu, and then click in the X button to close the alert window, then you can not invoke again the impromptu. I tested it in google chrome browser. Regards.
trent
03|Dec|2008 2Hey Juis,
Thanks for catching this. Impromptu seems to work correctly, the demo’s are where the error is. I shouldn’t search for elements before checking a button was clicked:
var f = m.find(‘#editfname’).val();
var l = m.find(‘#editlname’).val();
if(v){…}
should be changed to:
if(v){
var f = m.find(‘#editfname’).val();
var l = m.find(‘#editlname’).val();
//…
}
Thanks for reporting this. I will fix the demos!
SRays
09|Dec|2008 3Hi Trent,
Very good work. While testing I was curiouse about Select boxes[dropdowns] being hidden when the overlay was shown and then set the property useiframe to true to force the use of iframe and still the dropdowns are being hidden. Any information on this is greatly appreciated.
trent
10|Dec|2008 4is it doing this in all browsers when you use the useiframe option? or just IE6?
Alex
10|Dec|2008 5Hi Trent,
Could you change top-position of the box to variable? I think it would be great
SRays
10|Dec|2008 6Trent, Thanks for your response. I have checked this only in IE6. After further analysis the select boxes[dropdowns] are visible till it execute’s the code jqif.fadeIn(o.overlayspeed);
Once fadeIn executes the select box disappears, hope this helps you to give me an idea to overcome this.
Thanks for your info.
Chaitu
10|Dec|2008 7Hi Trent,
Thanks for the impromptu plugin. I am trying the get the checkbox value using the message parameter. In IE7/Firefox this is working fine. But in IE6 I am always getting false value eventhough I check the checkbox.
The code I wrote is
var isPublic = m.find(‘#isPublic’).is(‘:checked’);
where isPublic is the id of checkbox element.
Can you help me on this?
trent
11|Dec|2008 8Hey Chaitu,
Just double checking you are using a checkbox and not a radio.. radio you would need to check for name instead of id:
$(“input[name='isPublic']:checked”).val();
Also
var isPublic = m.find(â#isPublicâ).is(â:checkedâ);
should only return you the element, you need to do .val() to get the value of that element(like the one above).
Hope this helps!
trent
11|Dec|2008 9SRays,
I will create some demo’s and hopefully track down why this happens. Please let me know if you beat me to it!
Chaitu
11|Dec|2008 10Hello Trent,
I am sorry. I was trying to post html in previous post and I think the blog parser removed. Can you please remove the previous post?
I used val() and I am getting an javascript error “Object doesn’t support this property or method”.
An example of tested code will be helpful?
Thanks,
Chaitu.
trent
11|Dec|2008 11Try alerting m.find(â#isPublicâ).length to make sure its finding your element. It should output 1 if it finds it. If you get 0 you may need to check your html for errors. IE may not have been able to parse the html passed(if thats the case). If you do have an example you can either email it to me by the contact link at the top of the page
SRays
11|Dec|2008 12Trent,
No luck so far. instead of fadeIn I tried Show, behaviour is same. I will post if I can crack it. But if you get to check this, pls let me know. Thanks
Kev
16|Dec|2008 13Hi Trent,
Impromptu is a great plugin,
I’m having a problem when using it on top of another plugin called jqModal.
If I make a Impromptu plugin appear on top of a jqModal page, if I have a textbox or text area, I cannot seem to type in it. However if i have a button,radio,checkbox or select listbox i can.
trent
16|Dec|2008 14I’ve had a few people mention problems with jqModal. I’m not sure whether the problem is on the jqModal end or Impromptu end. Hopefully when I find a little time in the next few days I can provide a little more input.
Kev
16|Dec|2008 15problem is on jqModal end, when attribute ‘modal’ is set to true, it blocks key strokes outside the jqModal dialog area (http://dev.iceburg.net/jquery/jqModal/#etc):
sorry for wasting your time
Michael Freidgeim
25|Jan|2009 16I need to show popup info message with single close button, but content is located in separate html file. Is it possible to do with Impromptu?
trent
26|Jan|2009 17Yes, its very simple. I do this all the time with json or xml.
jQuery.getScript(‘myJSON.cfm’, function(data,textStatus){
$.prompt(‘test’);
});
This would also work with $.post and $.get, you just simply need to place impromtu within the callback of the ajax post.
pangzh
12|Feb|2009 18function hello(){
var str = ”;
str += “请éæ©èŠçœ®é¡¶ççé¢ïŒ”;
str += “æåºçŠç¹åº “;
str += “æåºå ¬åæ¿ “;
str += “æ容æè² “;
str += “èŠæ éå “;
str += “ææ°é£é “;
str += “ç¹è²ç»è¥ “;
str += “ææ°å®¶å®¶äº “;
str += “”;
str += “”;
str += “”;
$.prompt(str,{buttons: {Ok: true, Cance: false },callback: village_top});
}
function village_top(v,m){
if(v == true){
//var location = m.children(“:radio:checked”).val();
var location = m.find(‘input’).is(‘:checked’);
alert(location.val());
//var location = m.find(“input[@name=location][@checked=checked]“).val();
//alert(location);
var webid = m.children(‘#top_webid’).val();
var infoid = m.children(‘#top_infoid’).val();
alert(infoid);
alert(webid);
}
}
dot work
pangzh
12|Feb|2009 19please help me
trent
12|Feb|2009 20pangzh,
Can you please provide the english translation for the html string passed to the prompt?
Also I have encountered a bug with IE in the past with checkboxes in the call back function, you can’t track whether it’s checked or not(not sure if that’s the case). Also be aware that .children() will only find immediate children, if it is embeded deaper into your object you should use .find(). Hope that helps.
will
13|Feb|2009 21Hello Trent,
I have the same problems than Chaitsu :
IE6 cannot detect the m.find(“#…”).is(“:checked”)
==> It always returns ‘false’
But on FF it works.
Could you tell me how i could resolve that
(may you please reply on mail too)
Thanks for that great plugin
trent
13|Feb|2009 22Is this function within the submit or the callback function? I’ve recently found a bug within ie6 retaining checked attributes when traversing the dom after the elements have been technically removed(in the callback function the prompt is gone, a copy of it is passed to the callback function, where as the submit function actually passes a reference to the dom since the prompt is still alive. So given that The solution might be something like this in my function that calls the prompt:
function myfunc(){
var formvals = {};
$.prompt(‘…’,{
submit: function(v,m){
//save the vals into formvals
formvals.val1 = m.find(‘#val1′).val();
//now do my normal validation….
},
callback: function(v,m){
//now i have access to the submitted formvals and don’t have to traverse the dom again…
}
}
So in the end this actually works out to be faster than writing the selectors twice, we just save them and use them in the callback.
will
13|Feb|2009 23Ok, you’re fully right !
I should thought about it, to get the value in the submit part.
Thanks a lot for your quick answer, you do a really good job, good luck for the next.
Leave a reply