[FX.php List] Multiple AJAX with 1 JavaScript function?

Wed May 23 12:34:40 MDT 2007

Hi Joel, 

I recently started using LAJAX and Lance Hallberg was very generous with
helping me out with this same problem.  I am NOT much of a JavaScript
user, so forgive my ignorance when I try to describe what little I do know.

One thing he wrote was, "First, to be sure, LAJAX is self instantiating so
you do not want to  
create multiple instances of it."  So you only need to define the function
once at the top of the page (or call the LAJAX.js file).

	<script language="JavaScript" src="LAJAX.js"></script>

He gave me some tips and this is what I came up with which works for
multiple LAJAX instances on one page.

I place this in the <head>:

	<script type='text/javascript'>
		var url='process_some_data.php';
		var url2='process_some_other_data.php';
		var divID=null;

		// my 1st handler
		function updatePost()
		{
			if(LAJAX.state() == 4) {
	 			document.getElementById(divID).innerHTML=LAJAX.result();
	 		} else {
				document.getElementById(divID).innerHTML="<img src='loading.gif'
/>Loading... ";
	 		}
		}

		// my 2nd handler
		function updateGet()
		{
			if(LAJAX.state() == 4) {
	 			document.getElementById(divID).innerHTML=LAJAX.result();
	 		} else {
				document.getElementById(divID).innerHTML="<img src='loading.gif'
/>Loading... ";
	 		}
		}
	</script>

You can assign several url variables (url, url2, url3...) if you have more
than one area on the page that needs to use LAJAX to process different
types of data.  The divID=null establishes divID as a global variable
within JavaScript.  Notice that you must also edit the updatePost() and
updateGet() functions to use divID instead of 'postDIV' and 'getDIV' in
the original LAJAX script.  I also added an animated 'loading.gif' to
spice things up.  visit http://ajaxload.info/

Then within the body you'll use PHP to give each returned FM record a
unique <div id='...'> and <form name='...'> so LAJAX can update or reload
specific records within their own div:

	<div id='record<?php echo $recordID; ?>'>

	<form name="form<?php echo $recordID; ?>" id="form<?php echo $pid; ?>">
		<input type="hidden" id="recordID" name="recordID" value="<?php echo
$recordID; ?>"/>
		<input type="hidden" id="moredata" name="moredata" value="1"/>
	</form>

	<a href="javascript:divID='record<?php echo $recordID; ?>';
LAJAX.post(url,updatePost,
	'recordID='+document.form<?php echo $recordID; ?>['recordID'].value+
	'&moredata='+document.form<?php echo $recordID;
?>['moredata'].value);">EDIT</a>

	</div>

I hope this points you in the right direction, and I hope my explanation
makes sense.

Kevin Becker

On Tuesday, May 22, 2007 at 10:09 PM -0500 Joel wrote:
>Message: 3
>Date: Tue, 22 May 2007 17:28:10 -0700
>From: Joel Shapiro <jsfmp at earthlink.net>
>Subject: [FX.php List] Multiple AJAX with 1 JavaScript function?
>To: "FX.php Discussion List" <fx.php_list at mail.iviking.org>
>Message-ID: <E0A31D73-A762-4FA9-A71E-110DC42C6A80 at earthlink.net>
>Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
>
>Hi all
>
>I'm pulling a list of course-offering titles via FX.  For each  
>returned title, I want to have an AJAX (LAJAX) link to "Check for  
>upcoming classes".  I'm currently having the php generate one  
>'serialized' JavaScript function for each returned course-offering  
>(which works fine), but I'm wondering if there's a way to have just  
>one JavaScript function and somehow use unique parameters for each  
>result and respective DIV.
>
>Here's what my generated code looks like:
>---------------------------------------------
>function FindUpcoming0() {
>	if(LAJAX.state() == 4) {
>			document.getElementById('getDIV0').innerHTML=LAJAX.result();
>		} else {
>			document.getElementById('getDIV0').innerHTML="Fetching data ... "  
>+ LAJAX.state();
>		}
>}
>
>function FindUpcoming1() {
>	if(LAJAX.state() == 4) {
>			document.getElementById('getDIV1').innerHTML=LAJAX.result();
>		} else {
>			document.getElementById('getDIV1').innerHTML="Fetching data ... "  
>+ LAJAX.state();
>		}
>}
>
>// ETC...
>---------------------------------------------
>
>The generated links are:
><a href="javascript:LAJAX.get(url,FindUpcoming0,'id=123');">
><a href="javascript:LAJAX.get(url,FindUpcoming1,'id=456');">
>etc...
>
>I'm looking for some kind of generic FindUpcoming() function that I  
>could pass a '13' to, so that the results would display in DIV13.   
>I've tried a few ways but couldn't get anything to work.  Is this  
>possible, or do I really need a unique js function for each call?
>
>TIA,
>-Joel