jquery ajax звонок не выполняется в firefox

Этот вопрос является вопросом на this вопрос и this один. Я не могу отправить значения полей формы через ajax api jquery. Код выглядит следующим образом:jquery ajax звонок не выполняется в firefox

index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 

<link rel="stylesheet" type="text/css" href="index.css"> 

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script type="text/javascript" src="index.js"></script> 

</head> 

    <body onload="welcome()"> 

     <div class id="main"></div> 

    </body> 
</html>

Отрадное функция реализована в index.js:

index.js

function welcome() 
{ 
    view_account(); 
} 

function get_form_data_with_token($form){ 
    var unindexed_array = $form.serializeArray(); 
    var indexed_array = {}; 

    $.map(unindexed_array, function(n, i){ 
     indexed_array[n['name']] = n['value']; 
    }); 

    indexed_array['token'] = 'adafdafdgfdag'; 

    return indexed_array; 
} 

$(document).ready(function(){ 
    $("#changepassword_form_id").submit(function(e){ 
      var uri, method, formId, $form, form_data; 
      // Prevent default jquery submit 
      e.preventDefault(); 
      e.stopImmediatePropagation(); 

      uri = location.protocol + '//' + location.host + "/change_password"; 
      method = "POST"; 
      formId = "#changepassword_form_id"; 

      $form = $(formId); 
      form_data = get_form_data_with_token($form); 

      alert("form_data: token = " + form_data['token'] + " password3 = " + form_data['l_password3'] + " password4 = " + form_data['l_password4']); 

      // Set-up ajax call 
      var request = { 
       url: uri, 
       type: method, 
       contentType: "application/json", 
       accepts: "application/json", 
       cache: false, 
       // Setting async to false to give enough time to initialize the local storage with the "token" key 
       async: false, 
       dataType: "json", 
       data: form_data 
      }; 
      // Make the request 
      $.ajax(request).done(function(data) { // Handle the response 
       // Attributes are retrieved as object.attribute_name 
       console.log("Data from change password from server: " + data); 
       alert(data.message); 
      }).fail(function(jqXHR, textStatus, errorThrown) { // Handle failure 
         console.log(JSON.stringify(jqXHR)); 
         console.log("AJAX error on changing password: " + textStatus + ' : ' + errorThrown); 
        } 
      ); 

    }); 
}); 

function view_account() 
{ 
    var changePassword; 

    changePassword = "<form action=\"/change_password\" id=\"changepassword_form_id\" method=\"post\">"; 
    changePassword = changePassword + "<br><label>Old Password: </label><input id=\"password3\" type=\"password\" name=\"l_password3\" required><br>"; 
    changePassword = changePassword + "<br><label>New Password: </label><input id=\"password4\" type=\"password\" name=\"l_password4\" required><br><br>"; 
    changePassword = changePassword + "<input type=\"submit\" value=\"Change Password\">"; 
    changePassword = changePassword + "</form>"; 

    // Replace the original html 
    document.getElementById("main").innerHTML = changePassword; 

}

onsubmit обработчик не выполняется, даже если событие готовности дома используется, как указано в this вопрос.

Как я могу отправить поля только один раз, используя ajax api из jquery?

Edit:

jsfiddle пример из предыдущего вопроса. Несмотря на то, что код работает на jsfiddle, он терпит неудачу при запуске в fire fox.

источник

2015-10-14 Sebi

Не могли бы вы приложить jsfiddle? –

Это из предыдущего вопроса только с полем ввода https://jsfiddle.net/8g0rvgnt/7/. Он работает на jsfiddle, но не в firefox. – Sebi

Почему вы создаете форму для смены пароля с помощью JavaScript, если он отображается каждый раз? Просто поместите его в разметку и сделайте. – Andreas

Используйте обработчик событий on как это:

$(document).on("submit","#changepassword_form_id",function(e){ 
    ...code here... 
});

Это делегирует его, так как #changepassword_form_id еще не определена на document.ready.

Поскольку вы используете свойство required на входах и вам нужно проверить заполненные формы, вы можете использовать событие submit.

источник

2015-10-14 16:55:31

Это делегирует это, поскольку '# changepassword_form_id' еще не определен в' document.ready'. –

Это работает, но запрос отправляется на каждое событие клика, независимо от того, заполняется ли форма или нет. – Sebi

использовать 'submit' вместо' click' –

Вы явно прилагая html dom перед DIV имеет даже загружен ..

Heres шаг за шагом распада потока ...

Вы загружая .js файл внутри <head> ,
Вы вызываете функцию внутри файла, которая имеет следующую строку: document.getElementById("main").innerHTML = changePassword;Но, но с идентификатором «main» еще ничего нет!
Затем <body> загружается, внутри которого DIV с идентификатором «главной» присутствует.

Вы видите логику ?? правильно??

Не быть любопытным, но эта проблема является результатом неправильного дизайна вашего кода, исправление его каким-либо обходным путем приведет к дальнейшим головным болям, поэтому я настоятельно рекомендую вам обновить дизайн кода, если только вы имеют действительно небольшой контроль над кодом, и в этом случае исправление является вашим единственным вариантом.

И если вы идете по лоскутной одежде, вы всегда можете использовать делегацию событий .off.on, которая устраняет возможности дублирования событий при повторном запуске кода.

источник

2015-10-14 17:01:22

jquery ajax звонок не выполняется в firefox

ответ

Смежные вопросы