CODEWITHSUNDEEP
javascriptjquery
J.Doe
J.Doe

Reputation: 187

Uncaught TypeError: Cannot read property 'removeChild' of null without using removeChild

I don't use removeChild() and neither I try remove something before's there something.

jquery-3.3.1.min.js:2 Uncaught TypeError: Cannot read property 'removeChild' of null
    at m (jquery-3.3.1.min.js:2)
    at Function.globalEval (jquery-3.3.1.min.js:2)
    at text script (jquery-3.3.1.min.js:2)
    at Ut (jquery-3.3.1.min.js:2)
    at k (jquery-3.3.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)
    at Object.send (jquery-3.3.1.min.js:2)
    at Function.ajax (jquery-3.3.1.min.js:2)
    at Function.w._evalUrl (jquery-3.3.1.min.js:2)
    at Re (jquery-3.3.1.min.js:2)

I receive with $.ajax html and I .html() it into a div container.

$(".kontakt").click(function(a) {
      $('.opt-out').fadeOut();
      a.stopPropagation()
      a.preventDefault()

      $.ajax({async: true,
      type: "POST",
       url: "classes/handle.ajax.class.php",
       data: {
            class: "kontakt"
       },
       success: function(a) {
         $(".link-container").html(a)
         $('.link-container').fadeIn();
         blur();
       }
     })
})

Upvotes: 4

Views: 12459

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

Looking at the source code, I found how ajax is being setup:

jQuery.ajaxSetup( {
    accepts: {
        script: "text/javascript, application/javascript, " +
            "application/ecmascript, application/x-ecmascript"
    },
    contents: {
        script: /\b(?:java|ecma)script\b/
    },
    converters: {
        "text script": function( text ) {
            jQuery.globalEval( text ); /* note to this method */
            return text;
        }
    }
} );

So, let's look at globalEval method:

globalEval: function( code ) {
  DOMEval( code );
},

And now dive into DOMEval method:

function DOMEval( code, doc, node ) {
  doc = doc || document;

  var i,
    script = doc.createElement( "script" );

  script.text = code;
  if ( node ) {
    for ( i in preservedScriptAttributes ) {
      if ( node[ i ] ) {
        script[ i ] = node[ i ];
      }
    }
  }
  /* removeChild is being called */
  doc.head.appendChild( script ).parentNode.removeChild( script );
}

Where, you may know the parentNode is null and calling removeChild on null throws an error. Here, in the preceding code, you can see the script has text property assigned which value is set as code. The code is argument of DOMEval method. Which actually is the text argument as you can find in ajaxSetup.

The ajaxSetup is being called on ajax method (you can look into the source). Which has url and options arguments. And in the options argument you can find dataType property is used. And if the dataType is not set, it will guess its type in which the server may return a response of null or {}.

So, I suggest you to set the proper dataType while using jQuery.ajax. This should fix your issue.

Update:

Well, if the response returned by the server is malformed then also it may throw you an error. Thus, verify the server is returning good response. As per your comment, I debugged the code and found response is not returning quite good.

You have the following html in your response as well which is causing the issue:

<head>
<meta name='robots' content='noindex'>
</head>

Please remove them from the response source, then this should fix the issue.

Upvotes: 3

Related Questions