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+).

<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>
WordPress - Entries (RSS) and Comments (RSS) - © 2011 Ben Dauphinee