Ajax вызов перед отправкой формы не работает

Question

У меня есть веб-приложение Spring MVC - JSP. Перед отправкой определенной формы мне нужно заполнить ввод текстового значения с помощью JS/jQuery, чтобы форма POSTed содержала эту информацию. Это текстовое значение является результатом вызова ajax, который должен выполняться при нажатии кнопки отправки, но до отправки данных формы на контроллер. Соответствующие части кода в моем JSP являются следующие:

<script> 
       //Gets from model a new valid file code number 
       function getFileCodeNumber(res){ 
        $.ajax({ 
         type: "post", 
         url: "getFileCodeNumber", 
         cache: false, 
         data: { department: $("#department").val(), docType: $("#docType").val() }, 
         success: res, 
         error: function(){ alert('Error while request..');} 
        }); 
       } 
      </script> 

    <script> 
       $(function() { 
        //Other JS code 
        $("#submitForm").click((function(event) { 
         if($("#chkLanguage").prop('checked')){ 
            //some stuff 
         }else{ 
          getFileCodeNumber(function(data){ 
            //do some stuff with 'data' 
          }); 
         } 
        })); 
       }); 
      </script> 

    <form:form id="form" class="form-horizontal" method="post" action="AddDoc" commandName="document" enctype="multipart/form-data"> 
    <div class="row" style="text-align:center;"> 
        <input id="submitForm" type="submit" class="btn btn-primary btn-lg" name="commit" value="Finish"> 
       </div> 
       </br> 
      </form:form> 

Просто, чтобы вы знаете, вызов Ajax отлично работает при вызове из другого триггера действия в том же JSP, но при вызове из «нажмите кнопку» функция возвращает ошибку предупреждения, но отображается на экране менее 1 секунды, и поэтому я не могу сказать вам, что она говорит. Кстати, Firebug выбрасывает «NS_ERROR_NOT_AVAILABLE: приглашение, отмененное пользователем». Обратите внимание, что я попытался заменить триггер «click» для «submit», что происходит точно так же. Я предполагаю, что форма будет отправлена ​​до того, как вызов ajax будет полностью выполнен, но я ожидал, что «отправлю» и «нажмите» функции, чтобы выполнить свою работу перед отправкой данных.

У кого-нибудь есть ключ?

EDIT: Я узнал, что предупреждение, которое я не смог увидеть, печатает код ошибки вызова ajax. Тем не менее, я проверил функцию контроллера, которая дает ответ на этот вызов, и я видел, как он успешно завершается и получает ожидаемое значение. Более того, когда я вызываю эту функцию из другого триггера в одном JSP, он работает отлично. Просто, чтобы вы могли видеть простой код в контроллере:

@RequestMapping(value = "getFileCodeNumber", method = RequestMethod.POST, headers = "Accept=*/*") 
    public @ResponseBody 
    String getFileCodeNumber(@RequestParam(value = "department", required = true) String department, 
      @RequestParam(value = "docType", required = true) String docType) { 
     int n = cdocs.getNewCode(department, docType); 
     if (n == 0) { 
      return "EEEE"; 
     } else { 
      char[] zeros = new char[4]; 
      Arrays.fill(zeros, '0'); 
      DecimalFormat df = new DecimalFormat(String.valueOf(zeros)); 
      System.out.println(df.format(n)); 
      return df.format(n); 
     }//END_IF 
    }//END_METHOD 

Любые идеи?

Answer 1

Вместо того, чтобы выполнять javascript при нажатии кнопки submitbutton, используйте обычную кнопку и выполните функцию отправки из сценария.

Answer 2

Попробуйте это:

function getFileCodeNumber(res) { 
    return $.ajax({ 
     type: "post", 
     url: "getFileCodeNumber", 
     cache: false, 
     data: { 
      department: $("#department").val(), 
      docType: $("#docType").val() 
     }, 
     success: res, 
     error: function() { 
      alert('Error while request..'); 
     } 
    }); 
} 

$("#submitForm").click(function (event) { 
    event.preventDefault(); 
    if ($("#chkLanguage").prop('checked')) { 
     //some stuff 
    } else { 
     getFileCodeNumber(function (data) { 
      //do some stuff with 'data' 
     }).done(function() { 
      $('#form').get(0).submit(); 
     }); 
    } 
}); 

Answer 3

Вы могли бы сделать что-то вроде этого:

function getFileCodeNumber(res){ 
    $.ajax({ 
     type: "post", 
     url: "getFileCodeNumber", 
     cache: false, 
     data: { department: $("#department").val(), docType: $("#docType").val() }, 
     success: res, 
     error: function(){ alert('Error while request..');} 
    }) 
} 

$(function() { 
    if($("#chkLanguage").prop('checked')){ 
     //some stuff 
     $("#form").submit(); 
    }else{ 
     getFileCodeNumber(function(data){ 
     //do some stuff with 'data' 
     }).done(function(){ 
      $("#form").submit(); 
     });; 
    } 
});