Beginner krijgt Ajax niet aan de praat

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pjotr Bee

Pjotr Bee

28/08/2013 13:11:56
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
    echo("Ajax is Working!");
?>
 
PHP hulp

PHP hulp

21/09/2024 02:57:44
 
- Ariën  -
Beheerder

- Ariën -

28/08/2013 13:16:46
Quote Anchor link
Waarom gebruik je een onClick event? Je kan prima met jQuery een click-event maken:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(document).ready(function(){
  $("#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 -
 
Kris Peeters

Kris Peeters

28/08/2013 13:32:52
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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();
...
}  


---
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
$(document).ready(function(){
  $("#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
 
Pjotr Bee

Pjotr Bee

29/08/2013 07:59:42
Quote Anchor link
Gefixt! Bedankt heren.
Gewijzigd op 29/08/2013 08:00:21 door Pjotr Bee
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.