How to pass variables to a function?

[nicolus]

Hello,

I am trying to developp a star rating script, but I have a bug.

Here is my Javascript:

<script type="text/javascript">
<!-- 
function request(callback, id, note) {
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 ¦¦ xhr.status == 0)) {
callback(xhr.responseText);
document.getElementById("test").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("test").style.display = "inline";
}
};
  xhr.open("GET", "script_vote.php?id=" + id + "&note= " + note + "", true);
  xhr.send(null);
}
function readData(sData) {
document.getElementById('reponseAjax').innerHTML = (sData); 
}
request(readData);
</script>

HTML/PHP:

<?php
$id = 'prizee';
echo'<div id="reponseAjax">
<ul class="vote" id="ul_notation">
 <li class="note-actu" style="width:0%;" id="note"></li>
 <li><a onclick="request(readData, "'.$id.'", "1"); return false;" href="script_vote.php?id=mince&note=1" title="1 sur 5" class="un"></a></li>
 <li><a onclick="request(readData, "'.$id.'", "2"); return false;" href="script_vote.php?id=mince&note=2" title="2 sur 5" class="deux"></a></li> 
 <li><a onclick="request(readData, "'.$id.'", "3"); return false;" href="script_vote.php?id=mince&note=3" title="3 sur 5" class="trois"></a></li>
 <li><a onclick="request(readData, "'.$id.'", "4"); return false;" href="script_vote.php?id=mince&note=4" title="4 sur 5" class="quatre"></a></li>
 <li><a onclick="request(readData, "'.$id.'", "5"); return false;" href="script_vote.php?id=mince&note=5" title="5 sur 5" class="cinq"></a></li>
</ul>'
?>
</div><div id="test" style="display: none;"><p style="margin-top:10px; margin-bottom:5px;">Chargement en cours...</p></div>
</body>

The problem is that the script doesn't work on the html/php part, the stars are not displayed.

What s the problem? I think "request(readData, "'.$id.'", "4")" ?

Kind regards
nico

[Fotiman]

Initial glance, and that looks suspect. You should, however, instead post the actual HTML output (view the page and then do view source). I suspect your output will look somehting like this:

<li><a onclick="request(readData, "prizee", "1"); return false;" ...

Note, the opening quote before prizee will act as the end quote for the onclick handler. That should instead be a single quote or an escaped quote. Instead of:
"'.$id.'"
Try this:
\''.$id.'\'

[nicolus]

It seems the problem is here : function request(callback, id, note)

Because after delete id and note, the script is working (but there is nor id or note forwarded)
SNIP

thx

[edited by: Fotiman at 2:06 pm (utc) on Jan. 22, 2010]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]

[daveVk]

onclick="request(readData, \"'.$id.'\", \"3\"); return false;"

You should not have bare " between matching quotes shown in blue, as Fotiman noted.

[Fotiman]

1. If your page is XHTML, then you need to wrap your JavaScript code in a complex CDATA block, or alternatively move the script to an external file (recommended)

2. You are calling request(readData); at the end of your script block. This will execute, which will then result in this:
document.getElementById("test").style.display = "none";
That bit of code might execute before the rest of your page has finished loading, so that line will error because there is not element with id "test" defined yet. If you're going to call request(readData), you need to wait for the "test" element to be ready first. You could call that function on the window 'load' event to prevent that problem.

3. Try validating [validator.w3.org] your HTML. Sometimes that can provide a clue.