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

Question

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

Прямо сейчас, у меня просто данные формы отправляются через POST на другую страницу PHP, где информация декодируется. Затем информация устройства извлекается из БД и вставляется как параметры в сценарий TCL, который запускается с использованием команды PHP 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 я просто откликнулся на вывод скрипта прямо сейчас. Было бы лучше сделать это по-другому?

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

Kevin

Answer 1

Два решения:

Solution один:
В настоящее время разблокируют называется инициация запроса 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({ 
     type: "post", 
     url: "/commands/execute/", 
     async: false, 
     data: { 
      formd: formd, 
      serverResponse: data.message 
     }, 
     complete: finishAjax 
    });