JavaScript Problem

[jo3y]

Hi there! I have been getting into writing JavaScript and PHP, using AJAX techniques. I am running into a problem that I know has to be a simple error or overlook on my part, but I can not figure out what.

Basically I am making a very simple content update that will update a text file on the server, and echo the results to a

<P>

element's innerHTML without reloading the page.

Now, on the first click of the form, the technique works. What I can't figure out is, when I click the button again, I get "Message: Object doesn't support this property or method" and it points me directly to the function I am calling with onClick in the XHTML.

If anyone has any insight on this issue it would be very much appreciated!

I'll strip down the code as much as possible.

Here is the XHTML:

// Form
<form>
<textarea id="newContent" rows="4" cols="40"></textarea><br /><br />

<input type="button" value="Change Content" onClick="changeContent()" />
</form>

// P element where contents from PHP are displayed
Show/Load Content:
<p id="showContent" class="spacedText"></p>

Here is the JavaScript:

// Create the Request Object function
function createXMLObject()
{
if (window.XMLHttpRequest)
{
XHRO=new window.XMLHttpRequest();
}
else
{
XHRO=new ActiveXObject("Microsoft.XMLHTTP");
}
textDoc=XHRO;
}

// Push PHP result to P element
function showNewContent()
{
document.getElementById("showContent").innerHTML=textDoc;
}

// This is the function called in the form when clicked
function changeContent()
{
runPHP("changeContent.php");
}

// This calls the PHP
function runPHP(dname)
{
createXMLObject();

changeContent=document.getElementById("newContent").value;
var parameters=("content="+changeContent);
XHRO.open("POST", dname, true);
XHRO.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XHRO.setRequestHeader("Content-length", parameters.length);
XHRO.setRequestHeader("Connection", "close");
XHRO.onreadystatechange = function() {
if(XHRO.readyState == 4 && XHRO.status == 200) 
{
textDoc=XHRO.responseText;
showNewContent();
}
}
XHRO.send(parameters);
} 

The PHP:

header("Content-Type: text/plain");

// Load file
$textDoc = "content.txt";

// Open file for writing
$handle = fopen($textDoc, "w") or die("Unable to Open File");

// Read the new data into a variable
$contents = $_POST["content"];

// Write the new contents to the file
fwrite($handle, $contents);

// Echo results(also verifies info was correctly received
echo $contents;

// Close the file to finalize changes
fclose($handle);

[Fotiman]

Welcome to WebmasterWorld!

1. onClick is not valid XHTML. In XHTML, all attributes must be lowercase, so it should be onclick instead.

2. Your runPHP function redefines your global changeContent. This is why it's important to use "var" to declare your variables, otherwise they get created in the global scope (which is messy and inefficient). In your runPHP function, add "var" before changeContent=... and that should fix the problem you're seeing.

Side note: You might want to read "Why most of us should NOT use XHTML" [webmasterworld.com]

[jo3y]

Thank you so much for your help, I will give it a shot. Also, thanks for this site too. I have used it off and on for nearly 6 years or so now. It kicks butt!

As for the var, for some reason I had it backwards. I thought the var declaration would make it a global variable.

Thanks again.

[jo3y]

Yup that fixed it. I understand now, I used a variable named the same as the function name, so it was getting redefined as a global variable. So one run through was working, but after redefining the changeContent into a variable, causing the second click to attempt to run a variable as a function.

Thanks! I'll give the link you posted a read.