Problem with javascript

I am using particular JavaScript to check if the value is stored in database... I am getting problem its not showing status as it hang up after loading image. WHile if I use same javascript with other file its working good. Everything thing is alright that is query on other page showalbumstatus.php

JAVASCRIPT

function showalbumstatus(name) {
    document.getElementById("albumstatus").innerHTML = "<img src= photos/loading.gif>";
    xmlHttp = GetXmlHttpObject();
  开发者_JS百科  if (xmlHttp == null) {
        alert("Your browser does not support AJAX!");
        return;
    }
    var url = "showalbumstatus.php";
    url = url + "?";
    url = url + "album=" + name;
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function stateChanged() {
    if (xmlHttp.readyState == 4) {
        document.getElementById("albumstatus").innerHTML = xmlHttp.responseText;
    }
}

I am using onblur command on page onblur="showalbumstatus(form1.name.value);"

I checked the using JavaScript Console of Chrome exact error is: Uncaught TypeError: Cannot set property 'innerHTML' of null stateChanged

Are you are willing to use any of the javascript libraries. Mind you, its a giant leap of faith. You may get confused at the syntax initially. You would be good if you note that its just another JavaScript library and keep learning JavaScript.

Here is how your code looks like in jQuery

<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
    $("#albumstatus").html("<img src= photos/loading.gif>");
    $.ajax({
        url: 'showalbumstatus.php',
        type: 'GET',
        contentType: 'application/json',
        data: '{}',
        success: function(response) {
            $("#albumstatus").html(response);
        },
        error: function(a, b, c) {
            $("#albumstatus").text("Error!");
        }
    });
</script>

First check whether document.getElementById("albumstatus") is null -- and if so, you got the problem first hand.

The error you're getting is a TypeError -- which means that the type of a variable does NOT support the operation you are performing on it.

Also try these...

onblur="showalbumstatus(form1.name.value);" -- this is an extremely BAD way to register event handlers -- do this...

elem.onblur = function() {
 // event handler code goes here...
};

var url = "showalbumstatus.php"; -- instead of this, try the absolute URL like this..

var url = "http://example.com/showalbumstatus.php"; and see if it works.

Also, inspect the error console for the response you're getting from the server for the ajax call -- see if that's alright.

Finally, i have to point out, ultimately you're going to want to ditch this way of doing ajax in your JS apps -- go learn some platform lib -- jQuery, Prototype, MooTools.

1. Put an alert in showalbumstatus to see if onblur event is being fired or not. It is also possible that event is firing but evaluation of form1.name.value is failing with error. So you might want to our an alert there as well for testing.

2. If all turns out to be well with your event handler, next thing is to check whether stateChanged is called or not.

The best way of debugging javascript is to use firebug (an extenstion for FireFox).