CODEWITHSUNDEEP
javascriptjqueryhtmlajaxforms
Sebi
Sebi

Reputation: 4532

jquery ajax call not executing in firefox

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.

Upvotes: 1

Views: 165

Answers (2)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

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.

Upvotes: 4

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

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

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

  1. You are loading the .js file inside the <head>.

  2. 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!!!

  3. 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.

Upvotes: 0

Related Questions