Ajax вызов дважды

Question

Я использую вызов ajax для загрузки файлов PDF. После запуска кнопки загрузки ajax вызывает два раза. Я проверил весь код. Но не получилось. Пожалуйста, помогите мне :)

Мой код, HTML:

<div class="uk-form-row"> 
     <div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div> 
     <div id="targetUpload"></div> 
     <label class="uploadLbl">Upload Book:</label> 
     <div class="uploadWrap"> 
      <input name="pdfFile" id="pdfFile" type="file" size="30" /> 
      <input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" /> 
     </div> 
    </div> 

Ajax код:

function uploadPDF(){ 
$("#frm").attr("action","upload.php"); 
$("#loadingPDFUpload").show(); 
$("#frm").ajaxForm({ 
    target: '#targetUpload', 
    complete: function(){ 
     $("#loadingPDFUpload").hide(); 
    } 
}).submit();} 

Answer 1

У вас есть кнопка отправки вызова функции, но затем функция использует Формы submit метод , Вероятно, это вызывает двойной вызов функции.

Я вижу, что вы используете jQuery и плагин формы jQuery, поэтому это относительно легко исправить. Я бы создал обработчик событий непосредственно в JavaScript, чтобы избежать беспорядочной разметки. Удалить атрибут onclick вашей кнопки отправки:

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" /> 

Затем сделать что-то вроде этого в коде:

$(document).ready(function() { 
    $('#frm').submit(function(e) { 
     e.preventDefault(); //stops the default submit action 
     $('#loadingPDFUpload').show(); 
     $(this).attr('action', 'upload.php'); 
     $(this).ajaxForm({ 
      target: '#targetUpload', 
      complete: function(){ 
       $("#loadingPDFUpload").hide(); 
      }); 
     }); 
    }) 
}); 

Answer 2

Вы используете форму кнопку отправки для запуска вашего АЯКС вызова

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" /> 

Поэтому, когда вы вызываете , нажмите, который вызывает функцию uploadPDF(), которая также отправляет вашу форму после submit() функция. Вот почему функция вызывает вызов два раза.

Answer 3

Попробуйте удалить отправку в конце запроса ajaxForm. Он представляет форму снова. Также, пожалуйста, обновите свой HTML-код. Я ничего не вижу.

Answer 4

Функция uploadPDF() должна возвращать false, чтобы предотвратить обычную отправку формы.

как в документации пример кода

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});