Mootools Ajax form
Opgelost: zat bij de doc van 1.1.1 te kijken oid, niet bij de nieuwe documentatie (die overigens heel onhandig werkt).
Hallo allemaal,
sinds vanavond ben ik aan het stoeien met Ajax, en om het mijzelf gemakkelijk te maken dacht ik een library/framework te gebruiken. Daarom heb ik jQuery gedownload, toen ik dat niet aan de praat kreeg heb ik mootools gedownload.
Het is alleen niet zo makkelijk als het lijkt. Het wil namelijk niet erg lukken en daarom ben ik hier ;)
Ik neem het voorbeeld van de site bijna leterlijk over (http://demos111.mootools.net/Ajax.Form)
De html, de css en het javascript.
Ik heb de action van het script veranderd naar test.php en het bestand test.php aangemaakt in de zelfde map waar ook index.php staat.
test.php bevat de volgende inhoud:
Op index.php staat het volgend
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled 2</title>
<script src="mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('myForm').addEvent('submit', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
var log = $('log_res').empty().addClass('ajax-loading');
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>
<style type="text/css">
<!--css hetzelfde als de voorbeeld -->
</style>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="test.php" method="get">
<div id="form_box">
<div>
<p>First Name:</p>
<input type="text" name="first_name" value="John" />
</div>
<div>
<p>Last Name:</p>
<input type="text" name="last_name" value="Q" />
</div>
<div>
<p>E-Mail:</p>
<input type="text" name="e_mail" value="[email protected]" />
</div>
<div>
<p>MooTooler:</p>
<input type="checkbox" name="mootooler" value="yes" checked="checked" />
</div>
<div>
<p>New to Mootools:</p>
<select name="new">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="hr"><!-- spanner --></div>
<input type="submit" name="button" id="submitter" />
<span class="clr"><!-- spanner --></span>
</div>
</form>
<div id="log">
<h3>Ajax Response</h3>
<div id="log_res"><!-- spanner --></div>
</div>
<!--Knip-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled 2</title>
<script src="mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('myForm').addEvent('submit', function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
var log = $('log_res').empty().addClass('ajax-loading');
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>
<style type="text/css">
<!--css hetzelfde als de voorbeeld -->
</style>
</head>
<body>
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="test.php" method="get">
<div id="form_box">
<div>
<p>First Name:</p>
<input type="text" name="first_name" value="John" />
</div>
<div>
<p>Last Name:</p>
<input type="text" name="last_name" value="Q" />
</div>
<div>
<p>E-Mail:</p>
<input type="text" name="e_mail" value="[email protected]" />
</div>
<div>
<p>MooTooler:</p>
<input type="checkbox" name="mootooler" value="yes" checked="checked" />
</div>
<div>
<p>New to Mootools:</p>
<select name="new">
<option value="yes" selected="selected">yes</option>
<option value="no">no</option>
</select>
</div>
<div class="hr"><!-- spanner --></div>
<input type="submit" name="button" id="submitter" />
<span class="clr"><!-- spanner --></span>
</div>
</form>
<div id="log">
<h3>Ajax Response</h3>
<div id="log_res"><!-- spanner --></div>
</div>
<!--Knip-->
Wat is het probleem? Ik krijg wel de 'load'-afbeelding, maar nooit het resultaat.
Ik weet zeker dat index.php en test.php in dezelfde map staan.
Wat nu?
Alvast bedankt!
Gewijzigd op 01/01/1970 01:00:00 door Citroen Anoniem Graag
Er zijn nog geen reacties op dit bericht.