Beginner krijgt Ajax niet aan de praat

Door Pjotr Bee op 28-08-2013 13:11

1.297 views

Help! Ik heb mijn code terug gebracht tot het simpelste voorbeeld wat je kan verzinnen, maar toch
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:

<?php
echo("Ajax is Working!");
?>

Ariën

28-08-2013 13:16 gewijzigd op 28-08-2013 13:18

Waarom gebruik je een onClick event? Je kan prima met jQuery een click-event maken:


 $(document).ready(function(){
  $("#button").click(function() {
 //hier je AJAX-handeling.
 });
});

Het komt er op neer dat je verder je ready-event vergeten was.

Kris Peeters

28-08-2013 13:32 gewijzigd op 28-08-2013 14:16

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:

<input type="Submit" id="button" class="button" value="ButtonTekst" onclick="post(event);">
...
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:


$(document).ready(function(){
  $("#button").click(function(e) {  // de e niet vergeten
  e.preventDefault();
 //hier je AJAX-handeling.
 });
});

Pjotr Bee

29-08-2013 07:59 gewijzigd op 29-08-2013 08:00

Gefixt! Bedankt heren.

Reageren

Inloggen om te reageren