Uncaught TypeError: Cannot read property 'appendChild' of undefined after Ajax call

Question

I wanted to replace my html with the new Ajax response html but this error shows in the console and my script files are not loading correctly. Apparently this error comes in the file "jquery-1.10.1.min.js". Following is my ajax code which I used to replace with the html in the success function.

$(function() {
         $('#addcustomer-done').click(function() {

       var formData = new FormData($('#submit_form')[0]);

       //---------------------- AJAX CALL 1 -----------------------------------------//
       $.ajax({
            // headers : {
                      // 'X-CSRF-Token' : document.getElementsByName('csrfmiddlewaretoken')[0].value
                  // },
            url : "/savecustomer/",
            type : "POST",

             data:formData,
             contentType: false,
             cache: false,
             processData: false,
             async: false,

             cache:false,
             contentType: false,
             processData: false,


            success : function(data) {
                alert(data);

                $("html").html("");
                $("html").html(data);
            }

I'm a beginner at ajax. Kindly guide me how to get rid of this error. Thanks in advance.

Answer 1

Dont clear the elements inside html tags. Use an element present in the dom to append the value. Also remove async:false from your ajax. Because ajax should run asynchronously.

$(function() {
    $('#addcustomer-done').click(function() {
        var formData = new FormData($('#submit_form')[0]);
        $.ajax({
            url: "/savecustomer/",
            type: "POST",

            data: formData,
            success: function(data) {
                console.log(data);
                $("#id of element inside tab").append(data);
            }
        });
    });
});