spenoir
05-08-2007, 06:43 PM
Can anyone see anything wrong with this script or have any tips on using Prototype for ajax requests?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<title>Prototype Form</title>
<script type="text/javascript">
//****************************************
var BtnSubmit = $("submit");
function ajaxcall () {
$("ajaxform").serialize();
new Ajax.Request('createxml.php',
{
method:'get',
onSuccess:
//Get xml node value, used below in parseMyData
function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
//Parse returned XML
function parseMyData(){
var items = responseXML.getElementsByTagName('item');
//alert(images.length);
if (!responseXML.documentElement && responseStream) {
responseXML.load(responseStream);
}
for (var i=0;i< items.length;i++)
{
var x = document.createElement('div');
x.className = 'holder';
var y = document.createElement('h3');
y.appendChild(document.createTextNode(getNodeValue(items[i],'title')));
x.appendChild(y);
var z = document.createElement('p');
z.className = 'desc';
z.appendChild(document.createTextNode('Description: ' + getNodeValue(items[i],'desc')));
x.appendChild(z);
document.getElementById('container').appendChild(x);
}
}
onFailure: function(){ alert('Something went wrong...') }
});
}
</script>
</head>
<body>
<form action="javascript: ajaxcall();" method="get" name="ajaxform" id="ajaxform">
<fieldset><legend>Prototype test</legend>
<label for="title">Title:</label><input type="text" name="title" size="20">
<label for="description">Description</label><input type="text" name="description" size="20">
<input type="submit" id="submit" value="submit" />
</fieldset>
</form>
<div id="container">some XML?</div>
</body>
</html>
Nothing seems to display, although I have had the Ajax.Updater working. I'm sending the request to a php document which creates an xml file from a database. I've used this script before and it has worked. If I can't find anything wrong with my js i'll have a look at the php.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<title>Prototype Form</title>
<script type="text/javascript">
//****************************************
var BtnSubmit = $("submit");
function ajaxcall () {
$("ajaxform").serialize();
new Ajax.Request('createxml.php',
{
method:'get',
onSuccess:
//Get xml node value, used below in parseMyData
function getNodeValue(obj,tag)
{
return obj.getElementsByTagName(tag)[0].firstChild.nodeValue;
}
//Parse returned XML
function parseMyData(){
var items = responseXML.getElementsByTagName('item');
//alert(images.length);
if (!responseXML.documentElement && responseStream) {
responseXML.load(responseStream);
}
for (var i=0;i< items.length;i++)
{
var x = document.createElement('div');
x.className = 'holder';
var y = document.createElement('h3');
y.appendChild(document.createTextNode(getNodeValue(items[i],'title')));
x.appendChild(y);
var z = document.createElement('p');
z.className = 'desc';
z.appendChild(document.createTextNode('Description: ' + getNodeValue(items[i],'desc')));
x.appendChild(z);
document.getElementById('container').appendChild(x);
}
}
onFailure: function(){ alert('Something went wrong...') }
});
}
</script>
</head>
<body>
<form action="javascript: ajaxcall();" method="get" name="ajaxform" id="ajaxform">
<fieldset><legend>Prototype test</legend>
<label for="title">Title:</label><input type="text" name="title" size="20">
<label for="description">Description</label><input type="text" name="description" size="20">
<input type="submit" id="submit" value="submit" />
</fieldset>
</form>
<div id="container">some XML?</div>
</body>
</html>
Nothing seems to display, although I have had the Ajax.Updater working. I'm sending the request to a php document which creates an xml file from a database. I've used this script before and it has worked. If I can't find anything wrong with my js i'll have a look at the php.