Problem with javascript

Question

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

I would switch to jQuery. All of this is simplified and more manageable. — Evan Mulawski
– Evan Mulawski, Commented Jul 17, 2011 at 16:18
@Aditii: If you can use a code library, any of the myriad of JavaScript libraries available may be helpful to use. At the same time, nothing wrong with writing your own code either. — user113716
– user113716, Commented Jul 17, 2011 at 16:22
I am new with all javascript. Can u please explain what is that 'or how can I modify this.. — Aditii
– Aditii, Commented Jul 17, 2011 at 16:23
@Aditii: There are many code libraries available that have pre-written JavaScript code availalbe. They make some of the more challenging aspects of using JavaScript and the DOM a bit easier. AJAX requests are one example. Would you consider using such a library, or are you under a requirement to not use one? — user113716
– user113716, Commented Jul 17, 2011 at 16:26

codeandcloud · Accepted Answer · 2011-07-17 16:42:33Z

3

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>

answered Jul 17, 2011 at 16:42

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aditii Over a year ago

Thanks... I will learn and try this soon. but please explain with my error. What sort of error is this how can I solve that?

treecoder · Accepted Answer · 2011-07-17 17:27:17Z

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.

Shamaila Tahir · Accepted Answer · 2011-07-17 16:27:16Z

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.
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).

answered Jul 17, 2011 at 16:27

Shamaila Tahir

9982 gold badges8 silver badges17 bronze badges

4 Comments

Aditii Over a year ago

I checked with javascript console of CHROME... ERROR IS "Uncaught TypeError: Cannot set property 'innerHTML' of null stateChanged"

cwallenpoole Over a year ago

@Shamaila Chrome works perfectly well for basic JS like this. CSS, on the other hand, it is Firebug or bust.

Shamaila Tahir Over a year ago

@cwallenpoole. Yes chrome developer tools offer many of the functions that firebug supports. For Aditii case, both must be good enough.

Shamaila Tahir Over a year ago

@Aditii, you are setting innerHTML property of a variable whose value is null. document.getElementById("albumstatus") must be returning null.

Collectives™ on Stack Overflow

Problem with javascript

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related