Hi all, first time posting so forgive any mistakes on this post.
I'm trying to run a very simple ajax application on one of my pages. The application works if placed in its own HTML file, but fails when included in the WP pages editor. Any tips or methods of debugging would be appreciated.
Here is the code, again, very simple:
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
<form name="f1">
<p>word: <input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("../cgi-bin/simple-ajax-example.cgi")'></p>
<div id="result"></div>
</form>
The CGI script:
#!/usr/local/bin/perl -w
use CGI;
$query = new CGI;
$secretword = $query->param('w');
$remotehost = $query->remote_host();
print $query->header;
print "<p>The secret word is <b>$secretword</b> and your IP is <b>$remotehost</b>.</p>";
Again, all I'm doing is pasting the AJAX code into the WP page editor. Feel free to see the form here: http://gnucom.cc/blog/?page_id=161 .