Cant create simple html enhanced modal dialog loaded by ajax

Question

I have some wizard-like pages in my application, its keeping state while navigating between small steps, the navigation is not linear and everything works well without one line of javascript in a "progressive enhancement" way.

In my application, to users with javascript enabled, i want turn flow above in a set of dialogs by loading each complete step in a dialog by ajax, process the action of step and close dialog, each step will have the own script embedded to execute on dialog load and intercept some step ui events.

The problem is that JQuery UI Dialog want create action buttons i cant give the button creation to plugin, its ask for buttons metadata and i already have complete functional page with form, buttons, data entry and everything i need to do my work, its working, its done, i Only want load it on a Dialog that manage window specific things to me, like Title bar, Drag by title bar, Close button on title bar, Close event to my cleanup, stretch to fit my dialog content, load in modal mode with overlay.

I cant find a way to intercept the button click inside dialog by script embedded on dialog step, the button inside dialog must post data by ajax but it will post togheter the main page in a normal page posting.

I found some very old plugins but i like JQuery UI, its simple and looks good, looking for something without iframe, i read about:

boxy: http://onehackoranother.com/projects/jquery/boxy/tests.html

simplemodal: http://www.ericmmartin.com/projects/simplemodal/

jqModal: http://dev.iceburg.net/jquery/jqModal/

@liho1eye : putting comments now

Edit: With help of @liho1eye i reach it:

<script type="text/javascript">
    //-------------------------------------------------
    var url_trg = '@Url.Content("~/Teste/opendialog")';
    var url_prl = '@Url.Content("~/Images/waitplease.gif")';
    //-------------------------------------------------
    function onloadpartial() {
        /*setupDialog("#opendialog", "#tempcontent", "section[id='main']", url_trg);*/
        configDetailDialog(url_trg, "#tempcontent", "section[id='main']", "Detail", "#opendialog");
    }
    //-------------------------------------------------
    function configDetailDialog(trgurl, containerselector, contentselector, dlgtitle, buttonselector) {
        //-------
        $(document).ajaxError(
            function (event, jqXHR, ajaxSettings, thrownError) {
                alert('[event:' + event + '], ' +
                        '[jqXHR:' + jqXHR + '], ' +
                        '[jqXHR_STATUS:' + jqXHR.status + '], ' + 
                        '[ajaxSettings:' + ajaxSettings + '], ' +
                        '[thrownError:' + thrownError + '])');
            });
        //-------
        $.ajaxSetup({ cache: false });
        //-------
        $(buttonselector).click(function (event) {
            event.preventDefault();
            openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle);
        });
        //-------
    }
    //-------------------------------------------------
    function openAjaxDialog(trgurl, containerselector, contentselector, dlgtitle) {
        $.ajax({
            type: 'GET',
            url: trgurl,
            context: document.body,
            success: function (data) {
                var dlg = $(data).find(contentselector);
                $('#dlgdetail').remove();
                $(containerselector).append("<div id='dlgdetail'/>");
                $('#dlgdetail').append(dlg);
                $('#dlgdetail')
                    .css("border", "solid")
                    .dialog({
                        autoOpen: true,
                        modal: true,
                        title: dlgtitle,
                        open: function () {
                            configDetailDialog();
                        },
                        close: function (event, ui) {
                            $('#dlgdetail').remove();
                        }
                    })
                    .find("form").submit(function (event) {
                        alert('clicou ' + event);
                        var form = $(this);
                        var faction = "http://" + window.location.host + trgurl;
                        var fdata = form.serialize() + "&action:savedialog=savedialog";
                        $.ajax({                            
                            type: "POST",
                            url: faction,
                            data: fdata,
                            success: function (result) {
                                alert(result);
                            }
                        });
                        event.preventDefault();
                        $('#dlgdetail').dialog('close');
                    });
            }
        });
    }
    //-------------------------------------------------
</script>
-------------------------------------------------

Answer 1

I honestly think your dialog creation code is really overcomplicated with unnecessary DOM manipulation, which is immediately undone by dialog creation.

Regardless... I read you question as "How do I rewrite AJAXed forms to submit via AJAX?".

Well, simple. Add this function in the global scope

var rewriteForms = function();
{
    $('#dlgdetail').find("form").submit(function()
    {
        var form = $(this);
        $('#dlgdetail').load(form.attr("action"), form.serializeArray(), rewriteForms);
        return false;
    });
}

Then simply call after dialog was created

rewriteForms();

This will take care of all forms (assuming they are submitted by <button type="submit">...</button> and not via js code). If there are some buttons or links that do something custom, then you need to handle them to in the same manner as shown above.