Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts

    Call one AJAX function from another

    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.

    Code:
    <!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>
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.
    Last edited by ohgod; 10-22-2008 at 02:43 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •