onclick ajax send
Het wil me maar niet lukken om een onclick de ajax te laten verzenden.
onclick="zzend()"
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
function zzend(e){
e.preventDefault();
// show loader
$('#result').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#result').html(data.id + '<div class="result" spellcheck="false">'+data.adres+'</div>').fadeIn();
});
}
});
}
});
function zzend(e){
e.preventDefault();
// show loader
$('#result').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#result').html(data.id + '<div class="result" spellcheck="false">'+data.adres+'</div>').fadeIn();
});
}
});
}
});
Wie kan mij helpen?
Gr. Yoeri
Gewijzigd op 22/04/2015 11:54:23 door Yoeri Achterbergen
Corné
Gewijzigd op 22/04/2015 11:17:08 door CNEPHP -
Je hebt dus ook ergens een onclick-event waar je deze functie aan hangt?
Nu wordt namelijk de functie niet "vanzelf uitgevoerd" (getriggerd via een event), daarom gebeurt er ook niets.
Althans, als bovenstaande code volledig is.
Ik had alleen de jquery code in de topic gezet.
Het gaat namelijk om een div element waaraan ik het event wil koppelen.
html:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="zend btn" onclick="zend()">hier komt tekst</div>
<form id="form">
<input id="adres" name="adres"/>
</form>
<div id="result"></div>
<div id="ajaxMessage"><img src="images/ajax-loader.gif" alt="" /> wait</div>
<div id="overlay"></div>
<form id="form">
<input id="adres" name="adres"/>
</form>
<div id="result"></div>
<div id="ajaxMessage"><img src="images/ajax-loader.gif" alt="" /> wait</div>
<div id="overlay"></div>
Jquery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
function zend(e){
e.preventDefault();
// show loader
$('#result').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#result').html(data.id + '<div class="result" spellcheck="false">'+data.adres+'</div>').fadeIn();
});
}
});
}
});
function zend(e){
e.preventDefault();
// show loader
$('#result').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#result').html(data.id + '<div class="result" spellcheck="false">'+data.adres+'</div>').fadeIn();
});
}
});
}
});
Op een of andere manier krijg ik het click event niet aan de praat.
- uniforme werking van JavaScript code, onafhankelijk van de browser
- makkelijke event handling, DOM manipulatie etc.
Als je met jQuery werkt en je gebruikt ergens in je HTML een onclick="..." property die op jQuery acteert dan ben je vrijwel zeker niet op de goede manier bezig.
Daarnaast introduceer je een functie, dat is niet nodig - het enige wat je nodig hebt is een afhandeling van een click-event. Hiertoe maak je eerst een selectie van een of meer elementen (met een selector), waar je vervolgens een event listener aan hangt met een (callback)functie. Deze functie wordt uitgevoerd op het moment dat het event "getriggerd" wordt (in dit geval, als op een van de geselecteerde elementen wordt geklikt).
EDIT: toegegeven, dit is ook een functie maar die vervuilt de globale scope iig niet.
Voorheen was het volgens mij zo (en misschien nog steeds) dat er in sommige browsers helemaal NIET geluisterd werd naar bepaalde events bij bepaalde elementen. Zo kan het dus bijvoorbeeld in browser X gebeuren dat ondanks het feit dat je een onclick-event definieert voor een div (via een onclick="..." property dus), deze helemaal niet getriggerd wordt als hier op geklikt wordt, simpelweg omdat dat event geen betekenis heeft voor dat element in die browser.
Daarom is het des te belangrijker om jQuery de volledige afhandeling te laten verzorgen, om zo de (mogelijke) verschillen tussen de verschillende browsers het hoofd te kunnen bieden.
En dan is er nog iets anders aan de hand: men lijkt niet goed te weten hoe je jQuery / JavaScript code ontwikkelt en debugt. Althans, een heleboel topics op dit (PHP) forum gaat over niet werkende jQuery ("hij doet het niet"). Ik weet niet welke browser jij gebruikt, maar veel browsers hebben tegenwoordig een developer console ingebouwd, toegankelijke via de functietoets F12. Ik gebruiker Firefox, met onder andere de volgende twee addons:
Firebug
Web Developer
Deze addons vertellen mij meteen wanneer er iets mis is. Als ik bijvoorbeeld op jouw "hier komt tekst" link klink krijg ik meteen een foutmelding:
(JavaScript Error: ReferenceError: zend is not defined)
Het probleem is dus niet het probleem, maar de manier waarop je informatie inwint over het probleem (wat niet lukt, omdat je niet weet hoe).
De oorzaak dat je code in eerste instantie niet werkt is omdat de functie "zend" niet in de globale scope (waar je deze gebruikt) bestaat. Je zou dit na kunnen gaan door het $().ready(function() { ... }) blok tijdelijk te commenten. Dan is de functie wel bekend... maar dan krijg je meteen een syntax fout omdat je geen parameter meegeeft. Het meegeven van het event is ook nogal onzinnig, want je wéét wat het triggerend event is, dat is je onclick... Er klopt dus eigenlijk geen biet van deze code. Volgens mij snap je (nog) niet helemaal wat je aan het doen bent.
Om je een eind in de goede richting te sturen:
- hang een id aan je click-div zodat je deze uniek kunt identificeren en verwijder die onclick bras, bijvoorbeeld:
Code (php)
1
<div class="zend btn" id="zend">hier komt tekst</div>
- creeer vervolgens een event listener in jQuery specifiek voor dit element (#zend):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#zend').click(function(e) {
e.preventDefault();
// show loader
// ... de rest als voorheen ...
});
});
//]]>
</script>
//<![CDATA[
$().ready(function() {
$('#zend').click(function(e) {
e.preventDefault();
// show loader
// ... de rest als voorheen ...
});
});
//]]>
</script>
Dat werkt een stuk beter...
Installeer die addons, of verzin een andere manier om informatie tot je te laten komen en zorg dat je weet waar je deze kunt vinden, zodat je deze -in mijn ogen- triviale fouten zelf kunt debuggen.
Ik denk dat ik nog heel vaak ga refereren aan deze post :p.
Gewijzigd op 24/04/2015 13:43:07 door Thomas van den Heuvel
Bedankt voor de uitgebreide uitleg over Jquery. Uiteraard heb ik dit veranderd en mijn div een id meegeven.
In vervolg zal ik dit zeker doen:-)
Gr. Yoeri