Beginner krijgt Ajax niet aan de praat
werkt ajax nog steeds niet.
Het voorbeeld zou de tekst "Ajax is working" vanaf de server naar de div="result" op de client moeten tonen.
Dit gebeurt echter niet.
Iemand enig idee wat er nog verkeerd kan zijn ?
test.php:
<!doctype html>
<html>
<head>
<title>Wijzig SQL-Statement</title>
<script src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
<form>
<textarea name="tekstvar" id="tekstvar">TekstareaTekst.</textarea>
<input type="Submit" id="button" class="button" value="ButtonTekst" onclick="post();">
</form>
<p>Result:</p>
<div id="result"></div>
<script type="text/javascript">
function post()
{
var var1 = $('#button').val();
var var2 = $('#tekstvar').val();
$.post('testajax.php',{postvar1:var1,postvar2:var2},
function(data)
{
$('#result').html(data);
});
}
</script>
</body>
</html>
testajax.php:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$("#button").click(function() {
//hier je AJAX-handeling.
});
});
$("#button").click(function() {
//hier je AJAX-handeling.
});
});
Het komt er op neer dat je verder je ready-event vergeten was.
Gewijzigd op 28/08/2013 13:18:19 door - Ariën -
Pjotr Bee op 28/08/2013 13:11:56:
Iemand enig idee wat er nog verkeerd kan zijn ?
Het formulier wordt verzonden (en de pagina wordt verlaten). Javascript krijgt niet meer de tijd en gelegenheid om verder te doen
Als je doet wat je nu wil doen, moet je altijd de submit van het formulier tegenhouden.
Zoals je code nu is: kan je dit doen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<input type="Submit" id="button" class="button" value="ButtonTekst" onclick="post(event);">
...
function post(e) {
e.preventDefault();
var var1 = $('#button').val();
...
}
...
function post(e) {
e.preventDefault();
var var1 = $('#button').val();
...
}
---
Zoals hier boven al is gezegd: jQuery biedt je de mogelijkheid om al de onClick(), onSubmit() ... uit de HTML te halen.
Dat wordt dus:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function(){
$("#button").click(function(e) { // de e niet vergeten
e.preventDefault();
//hier je AJAX-handeling.
});
});
$("#button").click(function(e) { // de e niet vergeten
e.preventDefault();
//hier je AJAX-handeling.
});
});
Gewijzigd op 28/08/2013 14:16:23 door Kris Peeters
Gewijzigd op 29/08/2013 08:00:21 door Pjotr Bee