Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' error

Question

I am having a problem with some inherited code - it is a wall app something like FB where registered users can post topics. A lot of the code is JS and jQuery and I know little about either.

When posting a topic the topic gets added to the database but the screen does not show the topic until it is refreshed but it should show immediately - when I look in Developer Tools I get the error:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

When I expand the error I get:

curCSS  @   jquery-1.8.3.js:6825
jQuery.extend.css   @   jquery-1.8.3.js:6782
isHidden    @   jquery-1.8.3.js:6587
defaultPrefilter    @   jquery-1.8.3.js:8797
Animation   @   jquery-1.8.3.js:8697
doAnimation @   jquery-1.8.3.js:9034
jQuery.extend.dequeue   @   jquery-1.8.3.js:1895
(anonymous function)    @   jquery-1.8.3.js:1938
jQuery.extend.each  @   jquery-1.8.3.js:611
jQuery.fn.jQuery.each   @   jquery-1.8.3.js:241
jQuery.fn.extend.queue  @   jquery-1.8.3.js:1931
jQuery.fn.extend.animate    @   jquery-1.8.3.js:9044
jQuery.fn.(anonymous function)  @   jquery-1.8.3.js:9129
(anonymous function)    @   script.js:52
fire    @   jquery-1.8.3.js:974
self.fireWith   @   jquery-1.8.3.js:1084
done    @   jquery-1.8.3.js:7803
callback    @   jquery-1.8.3.js:8518

Line 52 in script.js is:

$('#loadpage').prepend($(response).fadeIn('slow'));

I am hoping this isn't something fixed in jQuery 1.9.x and above as upgrading breaks too many things at the moment to make it viable but I have no idea where to begin troubleshooting this

I found three questions with the same error but wasn't able to get any ideas from the answers probably due to mylack of JS knowledge.

Have made some progress - I updated to jQUery 1.9.1 and this time the same happened but the error changed. This time the error became:

Uncaught TypeError: Cannot set property 'cur' of undefined

pointing to the same line in script.js

A quick search found Uncaught TypeError with fadeIn in jQuery 1.9 which recommended changing the line:

$('#loadpage').prepend($(response).fadeIn('slow'));

to:

$('#loadpage').prepend($(response).show());

When I do this there are no longer any errors but it still does not quite work correctly - when the new post is posted there is a new entry added to the list but it is a duplicate of the previous post. So for example,

Post 1
Post 2
Post 3

If I post a new post called Post 4 then it displays as:

Post 1
Post 1
Post 2
Post 3

When I refresh it then shows correctly as Post 4 etc so feels like some progress but still not quite there

Response is defined in:

    $('#post').click(function(){
        var a = $("#wm").val();
        if(a != "")
        {
            var keepID = $('#keepID').val();
            var posted_on = $('#posted_on').val();

            $.post("wall.php?value="+a+'&x='+keepID+'&p='+posted_on, {
            }, function(response){
                //console.log(response);        

                //$('#load').prepend($(response).fadeIn('slow'));
                $('#load').prepend($(response).show());
                $("#wm").val("");
            });
        }


    });

This script is fricking horrific!

Answer 1

You'll probably need to insert the element before showing it. Try this:

$('#post').click(function(){
    var a = $("#wm").val();
    if(a != "")
    {
        var keepID = $('#keepID').val();
        var posted_on = $('#posted_on').val();

        $.post("wall.php?value="+a+'&x='+keepID+'&p='+posted_on, {
        }, function(response){
            $(response).prependTo($('#load')).fadeIn('slow');
            $("#wm").val("");
        });
    }
});

If that doesn't work, there must be an error in the php script or in the GET params you are passing