javascript not working, no errors

Question

Hello,

I have the following javascript code, which loads without error, however the update function does not actually seem functional, as get_Records.php is never loaded. I can not test if get_auction.php is loaded as it is loaded from within get_records.php

One of my main concerns is that I am doing the wrong thing by having update() take the paramters pk and query, as only one of them will ever be used. That seems like a bad hack, and poor logic, but I am not aware of a better way.

Here is the code

var xmlHttp
var layername
var url

function update(layer, part, pk, query) {
    alert ("update");
    if (part=="1") {
        alert ("part 1");
        url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random()
    } else if (part=="2") {
        alert ("part 2");
        url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random()
    }
    xmlHttp=GetXmlHttpObject()
    if(xmlHttp==null) {
        alert("Your browser is not supported?")
    }
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading"
        }
    };
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
}

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
    }
    return xmlHttp;
}

function makewindows() {
    child1 = window.open ("about:blank");
    child1.document.write(<?php echo htmlspecialchars(json_encode($row2["ARTICLE_DESC"]), ENT_QUOTES); ?>));
    child1.document.close(); 
}

I placed alert statements into the update function, andnot one is displayed, indicated the update function is never called?

I do not want to, and cannot use a framework, nor do I have access to use firebug, so please do not suggest these things. I am aware of them and use them when I can.

I would also like to know if calling php from within makewindows() is preferred to having makewindows simply take a parameter.., is there any advantage or disadvantage to each approach?

I seem to get an error when trying to call the function, this is how I am doing it in PHP:

echo "<li><a href='#' onclick=update('Layer3','2','0','hello')'>Link 1</a></li>" .

which makes this html, which should be fine?"\n";

<li><a href='#' onclick='update('Layer3','2','0','hello')'>Link 1</a></li>

edit: I have taken tester101'S advice and changed it to this:

echo '<li><a href="#" onclick="update(\'Layer3\',\'2\',\'0\',\'hello\')">Link 1</a></li>' . "\n";

Which still gives an error. I will probably end up using toms answer, but would like to know why this is not working.

Answer 1

Have you verified that the PHP code returns something sensible? (I assume, that you can view the source code of your html.)

Use good ol' alert-debugging: Insert alert statements (e.g. windows.alert("GetXmlHttpObject started.");) in your code to make sure that you reach them.

JSLint might help you. I tried it, though, and did not find anything really wrong.

Answer 2

If you can open your page in Firefox, I'd check the error console (c-s-J). It has helped me find many, many typos.

Also, your code seems to missing a lot of semicolons. Maybe some of them are optional but...

Answer 3

You could just take Url as a parameter to update(), then you wouldn't need to build the url within and you wouldn't need the 'optional' parameters

Edit (response to comment)

If you have an update() function that just takes url and element id (layer) and updates it based on the result of an AJAX call, you could do something like this to remove the need for optional parameters and using a function to do two different things.

function update(layer, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}


function updateByPk(layer, pk) {
   url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random();
   update(layer, url);
}


function updateByQuery(layer, query) {
   url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random();
   update(layer, url);
}

Then call either, depending on what you want to do:

updateByPk('id_of_div', 2);

or

updateByQuery('id_of_div2', 'query');

e.g. in HTML

<a href="#" onclick="updateByQuery('Layer3', 'hello');">Link 1</a>

or to generate that in PHP

<?php echo '<a href="#" onclick="updateByQuery(\'Layer3\', ' . json_encode($query) . ');">Link 1</a>';

Answer 4

If you can use Firefox and reproduce the error, I would strongly suggest using Firebug as it's really easy to use and step through scripts, set breakpoints, etc. Plus instead of having to use "alert" statements you can use things like console.info("unexpected value x=%o", some_object); and it will log a value to the console (including line #) that you can inspect later w/o interrupting your script.

edit: in fact, if you're using PHP on the server, you can use FirePHP to help debug on the client.

Answer 5

With regards to your concerns, as far as I am aware JavaScript does not complain if you dont give it all the arguments.

e.g

function myFunction(var1, var2, var3, var4){

calling this function like:

myFunction('test1','test2');

does not produce an error.

It is similar to putting a default next to an argument, the default being in javascript as null or undefined.

You can test for this by checking:

if(null != var3){

Might help you clean up that function a little; Also you can harvest a small ajax class from the web which will tidy up your javascript somewhat. There are plenty of wrapping functions out there that encapsulate the xmlHttpRequest object, allowing cross browser usage with identical results.

Let me know if you need any help. I have some confidence that if you find some prebuilt ajax methods (jQuery has some great functionality!), the task you are trying to achieve will be much easier.

Answer 6

Mismatched parentheses in

child1.document.write(<?php echo htmlspecialchars(json_encode($row2["ARTICLE_DESC"]), ENT_QUOTES); ?>));

Answer 7

onclick=update('Layer3','2','0','hello')'>Link 1

I don't know if it is a typo but this line should be

onclick="update('Layer3','2','0','hello')">Link 1

This code will cause errors and never call update, because the single quote after onClick= terminates at ('. Use double quotes.

onclick='update('Layer3','2','0','hello')'>Link 1

Answer 8

Maybe too many newlines?

In most languages, you have either newline as command separator, or ";". In JavaScript, you have both: the newline sometimes works as ";"

Try this instead, see if that helps:

function update(layer, part, pk, query) {
   alert ("update");
   if (part=="1") {
      alert ("part 1");
      url = "get_auction.php?cmd=GetAuctionData&pk="+pk+"&sid="+Math.random()
   } else if (part=="2") {
      alert ("part 2");
      url = "get_records.php?cmd=GetRecordSet&query="+query+"&sid="+Math.random()
   }
   // and so on...
}

The only thing different is the formatting: the opening curly is on the same line as the construct that uses it ('if','else','function',...).