[snipplet] Prototype AJAX request with and without a return value in a div element ..

By.

min read

Share

Allright … now to make your AJAX request using Prototype?

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

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

[b:0838be4895]At the bottom [/b:0838be4895]I have placed a quick function call to "just" run an[b:0838be4895] AJAX query without a return value[/b:0838be4895] in the case you don’t need the output of that query to be shown anywhere ..

[b:0838be4895]Default steps:[/b:0838be4895]
[list=1:0838be4895]
[*:0838be4895]Load prototype: ( of course in your javascript folder )
<script type="text/javascript" src="js/prototype.js"></script>

[list:0838be4895]
[*:0838be4895]Run updater
[code:1:0838be4895] new Ajax.Updater
(
‘my_output_id1’, url_ajax + ‘my_get_action=’+ escape(inputvalue),
{ }
); [/code:1:0838be4895]

[*:0838be4895][b:0838be4895]OR[/b:0838be4895]

[*:0838be4895]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:1:0838be4895] var my_parameters = ‘my_post_action=’ + escape(inputvalue);
var myAjax = new Ajax.Request(url_ajax, { method: ‘post’, parameters: my_parameters
});[/code:1:0838be4895]

[list:0838be4895][*:0838be4895][b:0838be4895]OR[/b:0838be4895]
[*:0838be4895]If you need to trigger some functions when the request has been processed, lets run it like this: ( using the alert() function ):
[code:1:0838be4895] 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!’);
}
});[/code:1:0838be4895]

[/list:u:0838be4895][/list:u:0838be4895][/list:o:0838be4895]

[b:0838be4895]Steps to make an AJAX request WITH a return value:[/b:0838be4895]
[list=1:0838be4895]
[*:0838be4895]Load prototype: ( of course in your javascript folder )
<script type="text/javascript" src="js/prototype.js"></script>

[*:0838be4895]Load your AJAX definitions:
<script type="text/javascript" src="js/ajax.js"></script>

[*:0838be4895]js/ajax.js contents:
[code:1:0838be4895]var url_ajax = "./js/ajax.php?";

function my_ajax_request1()
{
var inputvalue = document.getElementById(’my_input_id1’).value;

if(!validateinput(inputvalue))
{
alert(’No valid input’);
return;
}

// Optional
document.getElementById(’loading’).innerHTML = ‘Sending request ..’;

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

// Optional
document.getElementById(’loading’).innerHTML = ”;
}

function validateinput(input)
{
// Validation is up to you, always use serverside (PHP) validation !
return true;
}[/code:1:0838be4895]

[*:0838be4895]HTML:
[code:1:0838be4895]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>[/code:1:0838be4895]

[*:0838be4895]js/ajax.php contents:
[code:1:0838be4895]<?php
// KISS
if(isset($_GET))
{
print_r($_GET);
}
else
{
echo ‘No GET vars found’;
}
?>[/code:1:0838be4895]

[/list:o:0838be4895]

[b:0838be4895]Steps to make an AJAX request WITHOUT a return value:[/b:0838be4895]
See above, but use this one:

Note, the onSuccess is optional !

[code:1:0838be4895] new Ajax.Request(url_ajax + ‘my_get_action=’+ escape(inputvalue), {
method: ‘get’,
onSuccess: function(transport) {
// Optional
alert(’Done !’);
}
});[/code:1:0838be4895]

Leave a Reply

Your email address will not be published. Required fields are marked *