Mootools ajax request

Question

i need a tips, how to make a AJAX request with mootools, when some value from a dropdown list is selected, i mean to catch this event + make a ajax request to a external php page. And on this php page i need to run a mysql query. Thanks.

<form name ="f1" action=""> <select id="myr" NAME ="s1" onChange = "GetSelectedItem()"> <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> <OPTION VALUE = "girls">Male seeking Female</OPTION> <OPTION VALUE = "mens">Female seeking Male</OPTION> <OPTION VALUE = "mens">Male seeking Male</OPTION> <OPTION VALUE = "girls">Female seeking Female</OPTION> </select> </form>

php

$dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql'); $dbname = 'ratings'; mysql_select_db($dbname) or die('Error connecting to database'); $sql = "TRUNCATE TABLE rabid_ratings"; $re = mysql_query($sql) or die(mysql_error()); echo "done";

mootools

<script type="text/javascript"> window.addEvent('domready',function(){ var myRequest = new Request({ url: 'truncate.php', method: 'post', onRequest: function(){ }, onSuccess: function(responseText){ alert("done!"+ responseText); }, onFailure: function(){ alert("failed"); } }); $('myr').addEvent('change', function(event){ event.stop(); myRequest.send(); }); }); </script>

KJYe.Name · Accepted Answer · 2011-03-01 20:09:38Z

Add a change even to your select drop down. Let's name the id of it "mydropdown":

$('mydropdown').addEvent('change', function(){ //do your request (AJax) here });

Here is the demo from Mootools. You can also use Request.HTML or Request.JSON depends on what you are seeking to return.

Simple Request W/ Mootools

Update: Example based off what you present

First let's see if your ajax is setup correctly by using the following simple ajax code. Once you get this working, then we can explore the PHP side. So, please try the following codes:

html:

<select id="myr" NAME ="s1"> <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> <OPTION VALUE = "girls">Male seeking Female</OPTION> <OPTION VALUE = "mens">Female seeking Male</OPTION> <OPTION VALUE = "mens">Male seeking Male</OPTION> <OPTION VALUE = "girls">Female seeking Female</OPTION> </select>

generic truncate php that echos whatever post var we send it:

<?php echo $_POST['s1']; ?>

Mootools, when on success should output "done! ":

window.addEvent('domready', function(){ var myRequest = new Request({ url: 'truncate.php', method: 'post', onRequest: function() { }, onSuccess: function(responseText) { alert("done! " + responseText); }, onFailure: function() { alert("failed"); } }); $('myr').addEvent('change', function(event) { event.stop(); var data = this.name + '=' + this.value; //s1=<option value>, which is the post data we are sending to the php script myRequest.send(data); }); });

I dont want to return anything, i need only to run a query which is on this external php file, which method i should use ?
@Doolkin you can do a normal post or get if you don't want anything returned, but Request will do.
Either will do. But if the query you're running on the server is doing something more than just fetching some info (update/delete/create records) then you should use POST - otherwise some errant web spider could stumble over your php script and delete everything.
@kjy112 ye, but can you show me an example, because right now i'm pretty confused, thanks.
@Doolkin click on the link there's an example there. Just basically click on the JavaScript tag and etc and it'll show the appropriet code. Mootool's demo section basically shows exactly how to perform each task.

Collectives™ on Stack Overflow

Mootools ajax request

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related