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.