Help figuring out why this JavaScript isn't sending the request

[horseatingweeds]

https://crux.baker.edu/~bwarri01/cs332a/w4/ajax_project

 

I'm putting this together for a class, that's why it is so contrived. It's a simple integer converter, to hexadecimal and binary, on onkeyup for the text input, using a php script to do the converting. There's also a 'save' button that saves the numbers to a text file. All of this works well enough. I've also added a 'clear' button to clear the file--which isn't working.

 

I'm using two GET variables. q carries the integer and r carries the indicator to the php script telling it what to do.

 

The php script that clears the text file works if I visit it directly: https://crux.baker.edu/~bwarri01/cs332a/w4/ajax_project/script.php?r=c

 

So I guess the request isn't being made by the JavaScript for some reason, or perhaps I'm not calling it properly. I don't know. I could use some advice.

 

Thanks

[AyKay47]

post the relevant code directly onto this thread please.

[horseatingweeds]

Ok, here is the Ajax:

 

        function clear() {
            var xmlhttp;

            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("readout").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "script.php?r=c", true);
            xmlhttp.send();

        }

 

Here's the html:

 

    <div id="container">
        <h2>Integer Converter</h2>
        <div class="calculator">

            <form action="">
            Integer:
            <input id="int" type="text" onkeyup="convert(this.value)" />
            
            <p>
            Binary:
            <span id="binary"></span>
            </p>
            <p>
            Hexadecimal:
            <span id="hex"></span>
            </p>

            <input type="button" value="Save" id="1" name="1" onclick="save()" />
            <input type="button" value="Clear" id="2" name="2" onclick="clear()" />
            </form>
        </div>
    </div>
    <div id="readout">
        
    </div>

 

Here is the piece of the php script, although, like I said, it works when I access it directly:

 

else if ($r == 'c') {
  $filename = 'data.txt';
  // Let's make sure the file exists and is writable first.
  if (is_writable($filename)) {

      if (!$handle = fopen($filename, 'w')) {
           echo "Cannot open file ($filename)";
           exit;
      }

      if (fwrite($handle, "") === FALSE) {
          echo "Cannot write to file ($filename)";
          exit;
      }
      fclose($handle);
      $response = "";
   }
}

[AyKay47]

a couple of things we need to see before I can make any suggestions:

 

1. have you tried any debugging steps? i.e adding an alert() to the onreadystatechange function to see if your script is even sending a request.

 

2. please show more of the php script that handles the ajax request, from the snippet given, not much can be said, what does $r hold? etc..

[horseatingweeds]

Thanks AyKay47,

 

I put an alert() statement in the top of the clear() function, and it does not appear when I click the 'clear' button, so I guess the JavaScript isn't running at all. Does that mean the problem is in how I'm calling it in the html?

 

            <form action="">
            Integer:
            <input id="int" type="text" onkeyup="convert(this.value)" />
            
            <p>
            Binary:
            <span id="binary"></span>
            </p>
            <p>
            Hexadecimal:
            <span id="hex"></span>
            </p>

            <input type="button" value="Save" id="1" name="1" onclick="save()" />
            <input type="button" value="Clear" id="2" name="2" onclick="clear()" />
            </form>

 

The php script is working properly when I call it directly ("script.php?r=c"), so the problem is not likely there. Here it is thought:

 

<?php
ini_set('display_errors',1); 
error_reporting(E_ALL);


//get the q parameter from URL
$q=$_GET["q"];
$r=$_GET["r"];

if ($r == 'h') {
  if ($q=='')
  $response = "No conversion.";
  else if ($q > 4294967295)
  $response = "To large to convert!";
  else
	  $response = dechex($q);
}


else if ($r == 'b') {
  if ($q=='')
  $response = "No conversion.";
  else if ($q > 4294967295)
  $response = "To large to convert!";
  else
	$response = decbin($q);
}


else if ($r == 's') {
  $filename = 'data.txt';

  $q=$_GET["q"];

  if ($q=='')
  $content = $q . "No conversion.";
  else if ($q > 4294967295)
  $content = $q . "To large to convert!";
  else {

  $content = $q . "|" . decbin($q) . "|" . dechex($q) . "\n";
  }


  // Let's make sure the file exists and is writable first.
  if (is_writable($filename)) {

      // In our example we're opening $filename in append mode.
      // The file pointer is at the bottom of the file hence
      // that's where $somecontent will go when we fwrite() it.
      if (!$handle = fopen($filename, 'a')) {
           echo "Cannot open file ($filename)";
           exit;
      }

      // Write $somecontent to our opened file.
      if (fwrite($handle, $content) === FALSE) {
          echo "Cannot write to file ($filename)";
          exit;
      }
      fclose($handle);
      
      $handle = fopen($filename, 'r');
      $response = fread($handle, filesize($filename));
      fclose($handle);
  } 
  else {
      echo "The file $filename is not writable";
  }  
}

else if ($r == 'c') {
  $filename = 'data.txt';
  // Let's make sure the file exists and is writable first.
  if (is_writable($filename)) {

      if (!$handle = fopen($filename, 'w')) {
           echo "Cannot open file ($filename)";
           exit;
      }

      if (fwrite($handle, "") === FALSE) {
          echo "Cannot write to file ($filename)";
          exit;
      }
      fclose($handle);
      $response = "";
   }
}

else
  $response = "Didn't clear!";


//output the response
echo $response;
?>

 

 

[AyKay47]

well, since the save() function is called just fine according to what you previously stated, this makes me believe that clear() should be called as well. This is starting to sound like there might be a syntax error in the javascript somewhere, if you really want to be sure, remove everything in clear() and just have

 

function clear()
{
   alert("test");
}

 

I don't see anything syntactically wrong with your ajax request code. Really, depending on the browser that you are using, you should be using a debugging tool for any JavaScript that you write, may it be Firefox's "firebug" or chromes developer tools.

Also, as per usual, whenever I notice someone using javascript to make an ajax request, i must point them in the direction of jquery's ajax api. Very easy and powerful.

 

http://api.jquery.com/jQuery.ajax/

 

 

[horseatingweeds]

Weird. I found the problem. It was the use of 'clear' as the function name. I changed it to 'test' and now to 'clean' and the same code runs and works properly. I wonder why that is.

[AyKay47]

stupid mistake I made, clear() is reserved by javascript and cannot be used as a function name. my apologies for overlooking something simple like that.

[horseatingweeds]

Thanks AyKay47. I had a feeling it was something like this. I looked up "JavaScript reserved words" and found nothing indicating 'clear'.