jQuery Modal AJAX Form

May 19th, 2010

I wanted to load forms through a jQuery dialog, but could not locate a suitable simple solution. After a bit of code hacking, I have created a decent solution. Hope you find it useful.

This solution requres jQuery (I built with v1.4.2), jQueryUI (v1.8.0+).
[code lang=”js”]<script type="text/javascript">
function formdialog(url){
$.getJSON(url+"/form", function(data){
$(‘<div><form id="formdialog">’+data["form"]+'</form></div>’).dialog({
title: data["title"],
modal: true,
buttons: {
"Save": function(){
$.post(url+"/process", $("#formdialog").serialize());
$(this).dialog("close");
// You may have problems with this destroying the form
// before it has saved.
$(this).remove();
},
"Cancel": function(){$(this).dialog("close");}
}
});
});
}
</script>[/code]

WordPress - Entries (RSS) and Comments (RSS) - © 2011 Ben Dauphinee