jquery ajax call not executing in firefox

Question

This question is a followup on this question and this one. I am unable to send form field values through jquery's ajax api. The code is as follows:

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>

The welcome function is implemented in 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;

}

The onsubmit handler is not executed even though the dom ready event is used as mentioned in this question.

How can I submit the fields only once using the ajax api from jquery?

Edit:

jsfiddle example from a previous question. Even though the code runs on jsfiddle it fails when run in fire fox.

It's from a previous question with only an input field https://jsfiddle.net/8g0rvgnt/7/ . It works on jsfiddle but not in firefox. — Sebi, Oct 14 '15 at 16:55
Why you're creating the form for changing the password with JavaScript if it is displayed every time? Just put it in the markup and your done. — Andreas, Oct 14 '15 at 16:56
It is a simplified example. In the actual app it's not displayed every time. — Sebi, Oct 14 '15 at 16:59
You are attaching an event to an element that does not exist. Ready runs before onload. — epascarello, Oct 14 '15 at 17:00

Sandeep Nayak · Accepted Answer · 2015-10-14T17:09:44.307

4

Use the on event handler like this:

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

This delegates it, since #changepassword_form_id isn't yet defined on document.ready.

Since, you are using required property on inputs and need to check for filled forms, you can use submit event.

edited Oct 14 '15 at 17:09

answered Oct 14 '15 at 16:55

Sandeep Nayak

4,649
1
22
33

1

This delegates it, since `#changepassword_form_id` isn't yet defined on `document.ready`. – Spencer Wieczorek Oct 14 '15 at 16:56
This works but the request is being sent on each click event, regardless whether the form is filled out or not. – Sebi Oct 14 '15 at 17:03
use `submit` event instead of `click` – Sandeep Nayak Oct 14 '15 at 17:05

Mohd Abdul Mujib · Answer 2 · 2015-10-14T17:08:28.037

You are clearly appending the html dom before the div has even loaded..

Heres a step by step breakup of the flow...

You are loading the .js file inside the <head>.
You are calling the function inside the file which has the following line, document.getElementById("main").innerHTML = changePassword; But, but there is nothing with the id "main" yet!!!
Then the <body> is being loaded, inside which the div with the id "main" is present.

You see the logic?? right??

Not to be nosy, but this problem is the outcome of the wrong design of your code, fixing it with any workaround is only going to cause you further headaches, so I strongly recommend that you update the code design, unless you have really little control over the code, in which case the patch work is your only option.

And if you are going by the patchwork, you can always use the .off.on event delegation which removes the possibilities of event duplication on code rerun.

jquery ajax call not executing in firefox

2 Answers2