hinch
10-21-2008, 02:42 PM
OK I'll start off warning you i'm using prototype. Though I suspect the error is more a simple logic issue than anything else (or my lack thereof)
I have 2 simple ajax functions one requests the contents of a db table and the other adds to it.
on page load the list function is called.
If someone fills in an input box clicks add it adds the value to the db then onSuccess: recalls the list function (initially called on page load).
Now I know its actually performing the call to the get function as its clearing the value of the input box however its not refreshing the list you have to do a complete page refresh for that to happen.
Below is the page code + ajax the php code for the cat get is just simple selects and inserts no black magic there.
<!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" xml:lang="en" lang="en" >
<head>
<title>Bob</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script>
function catget() {
var url = './catajax.php';
var pars = 'action=get';
var myAjax = new Ajax.Updater({success: 'catlist'},url,
{
method:'post',
parameters: pars,
onFailure: reportError
});
document.getElementById('inputcat').value='';
}
function catadd() {
var inputtext = $F('inputcat');
var url = './catajax.php';
var pars = 'action=add&input=' + inputtext;
var myAjax = new Ajax.Updater({success: 'cataddresult'},url,
{
method:'post',
parameters: pars,
onFailure: reportError,
onSuccess: catget()
});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
</head>
<body onload="catget();">
<div id="pagewidth" >
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="maincol" > Main Content Column </div>
<div id="leftcol" >
<strong>Categories</strong>
<p id="catlist"></p>
<p> </p>
<p> </p>
<p id="cataddresult"></p>
<p align="center">
<input type="text" value="" id="inputcat" />
<input type="button" value="Create Category" onclick="catadd();"/>
</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I have 2 simple ajax functions one requests the contents of a db table and the other adds to it.
on page load the list function is called.
If someone fills in an input box clicks add it adds the value to the db then onSuccess: recalls the list function (initially called on page load).
Now I know its actually performing the call to the get function as its clearing the value of the input box however its not refreshing the list you have to do a complete page refresh for that to happen.
Below is the page code + ajax the php code for the cat get is just simple selects and inserts no black magic there.
<!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" xml:lang="en" lang="en" >
<head>
<title>Bob</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script>
function catget() {
var url = './catajax.php';
var pars = 'action=get';
var myAjax = new Ajax.Updater({success: 'catlist'},url,
{
method:'post',
parameters: pars,
onFailure: reportError
});
document.getElementById('inputcat').value='';
}
function catadd() {
var inputtext = $F('inputcat');
var url = './catajax.php';
var pars = 'action=add&input=' + inputtext;
var myAjax = new Ajax.Updater({success: 'cataddresult'},url,
{
method:'post',
parameters: pars,
onFailure: reportError,
onSuccess: catget()
});
}
function reportError(request)
{
alert('Sorry. There was an error.');
}
</script>
</head>
<body onload="catget();">
<div id="pagewidth" >
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="maincol" > Main Content Column </div>
<div id="leftcol" >
<strong>Categories</strong>
<p id="catlist"></p>
<p> </p>
<p> </p>
<p id="cataddresult"></p>
<p align="center">
<input type="text" value="" id="inputcat" />
<input type="button" value="Create Category" onclick="catadd();"/>
</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>