...

View Full Version : Call one AJAX function from another



hinch
10-21-2008, 03: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>&nbsp;</p>
<p>&nbsp;</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>

tomws
10-21-2008, 06:34 PM
Still learning prototype's ajax myself, but here's quick glance. Aren't callbacks just the function name? If so, in catadd(), change onSuccess: catget() to onSuccess: catget

ohgod
10-22-2008, 02:40 PM
well, it looks like you're using Updater wrong to me. you're skipping the container declaration and moving straight to options.

new Ajax.Updater(container, url[, options]) is the correct setup.

http://www.prototypejs.org/api/ajax/updater

also, unless i'm missing something "success" should be "onSuccess"

http://www.prototypejs.org/api/ajax/options



anyhoo, if you don't tell it what to update... it won't update it :)


also, please note the example "About evalScripts and defining functions" on the first link. prototype does want you to wrap the second function you want to call in a function, as you'll see.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum