未捕获的TypeError：在Ajax调用后无法读取未定义的属性'appendChild'

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);
            }
        });
    });
});