Ajax Отправить форму, используя Post / blockUI / ajaxform - PullRequest
Новая
       3

Ajax Отправить форму, используя Post / blockUI / ajaxform

1 голос
/ 15 марта 2012

У меня есть форма (три группы флажков), где пользователи могут выбирать устройства, а затем выбирать команды для запуска на них. После проверки, какие устройства и команды пользователь хочет запустить, они нажимают кнопку продолжения.

Прямо сейчас, я просто отправляю данные формы через POST на другую страницу PHP, где информация декодируется. Затем информация об устройстве извлекается из БД и вставляется в качестве параметров в скрипт TCL, который запускается с помощью команды PHPs EXEC. Сценарий возвращается ~ 15 секунд.

Однако вместо того, чтобы загружать другую страницу, я хотел бы заблокировать страницу с помощью JS $ .blockUI (), отправить форму, дождаться возврата сценария, а затем отобразить возвращенное содержимое там, где ранее была форма расположен. Затем, очевидно, разблокировать пользовательский интерфейс.

Я использую Zend Framework для своего проекта. У меня есть следующее:

Форма декларации: 

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

Три разные группы флажков (это динамически генерируемая форма): 

"<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 />";

Мои знания javascript / ajax ОЧЕНЬ ОЧЕНЬ ОЧЕНЬ ОЧЕНЬ ограничены. Это первое, что я сделал в JS. Остальная часть сайта в значительной степени чистая PHP / HTML. Вот что я пытался сделать для JS. Очевидно, это не работает. 

<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>

На моей странице выполнения PHP я просто покажу вывод сценария прямо сейчас. Было бы лучше сделать это и по-другому?

Спасибо всем за любой вклад. Я застрял и понятия не имею, куда идти отсюда.

Кевин

1 Ответ

1 голос
/ 15 марта 2012

Два решения:

Решение первое:
В настоящее время разблокировка называется инициацией Ajax-запроса, но вы должны сделать это после того, как ответ будет возвращен. Добавьте разблокировку к полной функции: 

<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>

Решение 2:
Сделайте AJAX синхронным, установив для параметра async значение false. Это заблокирует браузер: 

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