Ramonfincken.com

ramon fincken

Allright ... now to make your AJAX request using Prototype?

Here are some steps, validation is up to you, always use serverside (PHP) validation ! Smile

In the default steps I presume you have some javascript knowledge, whereas in the Steps to make an AJAX request WITH a return value it should be a copy paste job, so scroll down if you want a working snipplet Smile

At the bottom I have placed a quick function call to "just" run an AJAX query without a return value in the case you don't need the output of that query to be shown anywhere ..

Default steps:

Load prototype: ( of course in your javascript folder )
<script type="text/javascript" src="js/prototype.js"></script>

Run updater

Code:

new Ajax.Updater
(
'my_output_id1', url_ajax + 'my_get_action='+ escape(inputvalue),
{ }
);
OR

Just sent a request without a need for a div id to be updated with any results returned by the AJAX request:
Run the request:

Code:

var my_parameters = 'my_post_action=' + escape(inputvalue);
var myAjax = new Ajax.Request(url_ajax, { method: 'post', parameters: my_parameters
});

OR

If you need to trigger some functions when the request has been processed, lets run it like this: ( using the alert() function ):

Code:

var my_parameters = 'my_post_action=' + escape(inputvalue);
var myAjax = new Ajax.Request(url_ajax, { method: 'post', parameters: my_parameters, onSuccess: function(transport) {
alert('Done!');
}
});

Steps to make an AJAX request WITH a return value:

Load prototype: ( of course in your javascript folder )
<script type="text/javascript" src="js/prototype.js"></script>
Load your AJAX definitions:
<script type="text/javascript" src="js/ajax.js"></script>

js/ajax.js contents:

Code:

HTML:

Code:

My first ajax request:
<br/>
<div id="loading"></div>
<br/>
<input type="text" id="my_input_id1" onChange="my_ajax_request1()">
<br/>
<div id="my_output_id1"></div>
js/ajax.php contents:

Code:

<?php
// KISS
if(isset($_GET))
{
print_r($_GET);
}
else
{
echo 'No GET vars found';
}
?>