rain13 Posted March 18, 2011 Share Posted March 18, 2011 Does anyone know why GetAverage() returns me undefined instead of string it receives from server? GetAverage(); should return me average rating.Preview: http://autoit.net.ee/rate/rate.phpwhen you move mouse on stars and then away again you can see Average: undefined <?php$file = "rate.txt";$user = $_GET["r"];if (strlen($user) >= 1){$fData = FileRead($file);$fData = explode("|",$fData);if ($user == "get") {echo $fData[1]/$fData[0];exit(0);}$fData[0]++;$fData[1] += $user;FileWrite($file,$fData[0]."|".$fData[1]);echo $fData[1]/$fData[0];exit(0);}$fData = FileRead($file);$fData = explode("|",$fData);$average = $fData[1]/$fData[0];function FileRead($sFile){ $fd = fopen ($sFile , "r"); if ($fd) { if (filesize($sFile) > 0){ $fstring = fread ($fd , filesize ($sFile)); fclose($fd); return $fstring; }else{ fclose($fd); return ""; } } else{ echo '<font color="#FF0000">ERROR:</font> Can not read file '.$sFile; return false; }}function FileWrite($sFile,$sString){if (strlen($sString) > 0){ $hFile = fopen($sFile, 'w+'); if ($hFile){ fwrite($hFile, $sString); fclose($hFile); return true; }}return false;}?><html><head> <title>Javascript Change Image Onmouseover</title> <style type="text/css"> p { font-family:Verdana; font-weight:bold; font-size:11px } img { cursor:pointer; } </style> <script language="javascript" type="text/javascript"> var average = GetAverage(); //var average = "abc" function mouseOverImage(n) { document.getElementById("txt").innerHTML = n; for (i=1;i<=n;i++) { document.getElementById("img"+i).src = "0.png"; } } function mouseOutImage() { document.getElementById("txt").innerHTML = "Average: "+average; for (i=5;i>=1;i--) { document.getElementById("img"+i).src = "1.png"; } } function Rate(i){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; document.getElementById("txt").innerHTML = "Average: "+ average; } } ajaxRequest.open("GET", "rate.php?r="+i, true); ajaxRequest.send(null); } function GetAverage(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ return ajaxRequest.responseText; } } ajaxRequest.open("GET", "rate.php?r=get", true); ajaxRequest.send(null); } </script></head><body><table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img id="img1" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(1)" onmouseout="mouseOutImage(5)" onmousedown="Rate(1)"/><img id="img2" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(2)" onmouseout="mouseOutImage(4)" onmousedown="Rate(2)"/><img id="img3" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(3)" onmouseout="mouseOutImage(3)" onmousedown="Rate(3)"/><img id="img4" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(4)" onmouseout="mouseOutImage(2)" onmousedown="Rate(4)"/><img id="img5" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(5)" onmouseout="mouseOutImage(1)" onmousedown="Rate(5)"/></td> </tr> <tr> <td id="txt"> <?php echo "Average: ".$average?> </td> </tr> </tbody></table></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 18, 2011 Share Posted March 18, 2011 You're trying to set average to the return value of GetAverage, but the only thing GetAverage returns is false if the XHR object couldn't be created. If you want that to return the value that the server returned then your request must be synchronous, not asynchronous. You send the request, wait for the response, and then return the result. Javascript will be basically paused while it's waiting for the response, so you might see a bigger delay. Otherwise, set the value of average in the readystate handler. Link to comment Share on other sites More sharing options...
rain13 Posted March 18, 2011 Author Share Posted March 18, 2011 I still don't get it. Why Rate(i) works? but GetAverage() does'nt? GetAverage() is same as Rate expect it return ajaxRequest.responseText instead of setting it txt's value. You see GetAverage() is copied and then modified. but works exactly the same way Rate() does. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 18, 2011 Share Posted March 18, 2011 The readystate handler for the Rate function updates the page directly, the handler in the GetAverage function does not, it tries to return a value. Values returned from a readystate handler don't go anywhere. GetAverage() is same as Rate expect it return ajaxRequest.responseText instead of setting it txt's valueNo, it doesn't. The readystate handler returns a value, not GetAverage. GetAverage only returns false if the XHR object couldn't be created, otherwise it doesn't return anything at all (i.e., undefined).Look into synchronous requests, even though Javascript has to wait for the response you'll be able to have the function return it. Link to comment Share on other sites More sharing options...
thescientist Posted March 18, 2011 Share Posted March 18, 2011 in otherwords, assign the responseText from getAverage instead of returning it (like you are doing in Rate()) Link to comment Share on other sites More sharing options...
rain13 Posted March 18, 2011 Author Share Posted March 18, 2011 Thanks for advise.Here's working code (hopefully it helps someone who is trying to do similar thing) <?php$file = "rate.txt";$user = $_GET["r"];if (strlen($user) >= 1){$fData = FileRead($file);$fData = explode("|",$fData);if ($user == "get") {echo $fData[1]/$fData[0];exit(0);}$fData[0]++;$fData[1] += $user;FileWrite($file,$fData[0]."|".$fData[1]);echo $fData[1]/$fData[0];exit(0);}$fData = FileRead($file);$fData = explode("|",$fData);$average = $fData[1]/$fData[0];function FileRead($sFile){ $fd = fopen ($sFile , "r"); if ($fd) { if (filesize($sFile) > 0){ $fstring = fread ($fd , filesize ($sFile)); fclose($fd); return $fstring; }else{ fclose($fd); return ""; } } else{ echo '<font color="#FF0000">ERROR:</font> Can not read file '.$sFile; return false; }}function FileWrite($sFile,$sString){if (strlen($sString) > 0){ $hFile = fopen($sFile, 'w+'); if ($hFile){ fwrite($hFile, $sString); fclose($hFile); return true; }}return false;}?><html><head> <title>Javascript Change Image Onmouseover</title> <style type="text/css"> p { font-family:Verdana; font-weight:bold; font-size:11px } img { cursor:pointer; } </style> <script language="javascript" type="text/javascript"> var average = GetAverage(); //var average = "abc" function mouseOverImage(n) { document.getElementById("txt").innerHTML = n; for (i=1;i<=n;i++) { document.getElementById("img"+i).src = "0.png"; } } function mouseOutImage() { document.getElementById("txt").innerHTML = "Average: "+average; for (i=5;i>=1;i--) { document.getElementById("img"+i).src = "1.png"; } } function Rate(i){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; document.getElementById("txt").innerHTML = "Average: "+ average; } } ajaxRequest.open("GET", "rate.php?r="+i, true); ajaxRequest.send(null); } function GetAverage(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ average = ajaxRequest.responseText; } } ajaxRequest.open("GET", "rate.php?r=get", true); ajaxRequest.send(null); } </script></head><body><table style="text-align: left;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img id="img1" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(1)" onmouseout="mouseOutImage(5)" onmousedown="Rate(1)"/><img id="img2" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(2)" onmouseout="mouseOutImage(4)" onmousedown="Rate(2)"/><img id="img3" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(3)" onmouseout="mouseOutImage(3)" onmousedown="Rate(3)"/><img id="img4" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(4)" onmouseout="mouseOutImage(2)" onmousedown="Rate(4)"/><img id="img5" src="1.png" width="24" height="24" alt="image rollover" onmouseover="mouseOverImage(5)" onmouseout="mouseOutImage(1)" onmousedown="Rate(5)"/></td> </tr> <tr> <td id="txt"> <?php echo "Average: ".$average?> </td> </tr> </tbody></table></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.