使用Post / blockUI / ajaxform的Ajax提交表单

Question

I have a form (three groups of checkboxes) where users can choose devices and then choose commands to run on them. After checking which devices and commands the user wants to run, they click a continue button.

Right now, I just have the form data being sent via POST to another PHP page where the info is decoded. Then, the device's information is pulled from a DB and is inserted as parameters into a TCL script which is run using PHPs EXEC command. The script takes ~15 seconds to return.

However, instead of having to load another page, I would like to block the page using JS $.blockUI(), submit the form, wait for the script to return, and then display the returned content where the form was previously located. Then, obviously unblock the UI.

I am using Zend Framework for my project. I have the following:

Form declaration:

<form name="runcommands" action="/commands/execute/" method="post">

Three different check box groups (this is a dynamically generated form):

"<input type='checkbox' name='globalcommand.$id' value='$id' />$command<br />";
"<input type='checkbox' name='projectcommand.$id' value='$id' />$command<br />";
"<input type='checkbox' name='device.$id' value='$id' />$hostname<br />";

My javascript/ajax knowledge is VERY VERY VERY limited. This is the first thing I've ever done in JS. The rest of the site is pretty much pure PHP/HTML. Here is what I've attempted for the JS. Obviously, it doesn't work.

<script type="text/javascript">
        // Globals
        // prepare the form when the DOM is ready 

        var formd = ""; 

        $(document).ready(function() { 
            //$('#messageCenter').hide();

            //Form Ajax
            var options = { 
                beforeSubmit: beforeSubmit,  // pre-submit callback 
                success: showResponse  // post-submit callback 
            }; 
            $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

            $.ajax({
                type: "post",
                url: "/commands/execute/",
                data: {
                    formd: formd,
                    serverResponse: data.message
                },
                complete: finishAjax
            });
            $.unblockUI();

        }); 

        function finishAjax (data) {
            var ret = data.responseText;
            alert(ret);
        }

        function beforeSubmit (formData, jqForm, options) { 
            formd = $.param(formData); 
            $.blockUI();
            return true; 
        } 

        function showResponse(responseText, statusText, xhr, $form)  { 
            ret = responseText;
            alert(ret);
        } 

    </script>

In my execute PHP page, I just echo out the script's output for right now. Would it be better to do that another way as well?

Thank anyone for any input. I am stuck and have no idea where to go from here.

Kevin

Answer 1

Two solutions:

Solution one:
Currently the unblock is called the initiation of the Ajax request, but what you want to do is do after the response is returned. Add the unblock to the complete function:

<script type="text/javascript">
    // Globals
    // prepare the form when the DOM is ready 

    var formd = ""; 

    $(document).ready(function() { 
        //$('#messageCenter').hide();

        //Form Ajax
        var options = { 
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: showResponse  // post-submit callback 
        }; 
        $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

        $.ajax({
            type: "post",
            url: "/commands/execute/",
            data: {
                formd: formd,
                serverResponse: data.message
            },
            complete: finishAjax
        });
    }); 

    function finishAjax (data) {
        var ret = data.responseText;
        alert(ret);
        $.unblockUI();
    }

    function beforeSubmit (formData, jqForm, options) { 
        formd = $.param(formData); 
        $.blockUI();
        return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form)  { 
        ret = responseText;
        alert(ret);
    } 

</script>

Solution 2:
Make the ajax synchronous by setting the async option to false. This will block the browser:

 $.ajax({
        type: "post",
        url: "/commands/execute/",
        async: false,
        data: {
            formd: formd,
            serverResponse: data.message
        },
        complete: finishAjax
    });