Melding laten verdwijnen
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
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
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
if (ok) {
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
} else {
// doe ook iets voor als het misgaat...
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
}
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
<div id="postResult" style="display: none;">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
if (ok) {
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
} else {
// doe ook iets voor als het misgaat...
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
}
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
<div id="postResult" style="display: none;">
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
<h4> <i class="icon fa fa-check"></i>Opgeslagen!</h4>
Het onderwerp is succesvol opgeslagen.
</div>
</div>
De melding verschijnt ook nadat er op submit is geklikt. En na 3 seconden verdwijnt de melding weer.
Maar als daarna nog een keer op submit wordt geklikt (zonder het herladen van de pagina) gebeurt er niks meer, terwijl dezelfde melding zou moeten verschijnen.
Hoe komt dat?
- Bij de tweede keer $.post geeft deze misschien een andere status terug als HTTP 200 OK waardoor de succes functie niet wordt uitgevoerd. Aangezien $('#postResult').show(); in deze functie staat (waarom eigenlijk?) zal de foutmelding niet getoond worden in dat geval.
- Je javascript stopt vanwege een fout. In google-chrome druk op F12 en dan op console.
Ook kun je onder Network kijken welke status de AJAX responses hebben en of er soms een PHP foutmelding optreedt.
Wat bedoel je precies met het volgende:
Bij de tweede keer $.post geeft deze misschien een andere status terug als HTTP 200 OK waardoor de succes functie niet wordt uitgevoerd. Aangezien $('#postResult').show(); in deze functie staat (waarom eigenlijk?) zal de foutmelding niet getoond worden in dat geval.
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
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
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
function(ok) { // callback functie die wordt uitgevoerd na terugontvangen (JSON) resultaat
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
$('#postResult').show();
}, // einde callback functie
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
Zie hier voor statussen: https://nl.wikipedia.org/wiki/Lijst_van_HTTP-statuscodes
Je geeft aan de $.post functie in aantal parameters mee. De eerste is de URL die aangeroepen moet worden.
De tweede de post-data en de derde is hetgene dat uitgevoerd moet worden ALS er een correct antwoord (met HTTP status 200) terugkomt van de server. Maar wat als er geen correct antwoord komt? dan wordt dat dus niet uitgevoerd.
Indien je iets wilt inbouwen dat bij een fout wordt uitgevoerd of ALTIJD wordt uitgevoerd kijk dan in jquery documentatie naar .fail() en .always()
Toevoeging op 18/02/2016 21:29:06:
Dit is een betere schrijfwijze:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
);
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
);
Gewijzigd op 18/02/2016 21:36:47 door Frank Nietbelangrijk
Heb je enig idee hoe dat moet? Ik heb zelf dit geprobeerd, maar dat ging fout:
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
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
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
// als je document klaar is met laden...
$().ready(function() {
// als het formulier #theForm wordt gesubmit...
$('form#theForm').submit(function(e) {
// vang het submit event af, jQuery/AJAX handelt dit immers af
e.preventDefault(); // het default gedrag is dat het formulier gePOST wordt, en dat willen we niet
$('#postResult').hide();
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
.done(function( data ) {
$('#postResult').html('Gelukt!');
}
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
}
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
}
'json' // geef een "hint" over het type van de terug te ontvangen data
);
});
});
//]]>
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.post(
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').html('Gelukt!');
})
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
'shared/saveItem.php?itemID=<?php echo $itemID; ?>', // het script waar je naartoe POST
$('#theForm').serialize(), // verzamel alle form data in 1x (naam, content)
null, // we gebruiken .done() dus deze is niet nodig
'json' // geef een "hint" over het type van de terug te ontvangen data
)
.done(function( data ) {
$('#postResult').html('Gelukt!');
})
.fail(function() {
$('#postResult').html('Er is een fout opgetreden!');
})
.always(function( data ) {
$('#postResult').show();
setTimeout(function(){ $('#postResult').hide(); }, 3000);
});
Toevoeging op 18/02/2016 22:38:15:
dat moet je dan dus invoegen in plaats van regel 11 t/m 25.
Gewijzigd op 18/02/2016 22:58:29 door Frank Nietbelangrijk
Code (php)
1
2
3
2
3
setTimeout(function(){
document.getElementById('postResult').innerHTML = '';
}, 3000);
document.getElementById('postResult').innerHTML = '';
}, 3000);
Dit is de reden dat je na de eerste keer niets meer ziet, je kiepert hier effectief permanent alle inhoud weg (met andere woorden, je maakt de postResult div helemaal leeg), dan is er daarna ook niets meer om weer te geven.
Een eenvoudigere oplossing was dus gewoon daar $('#postResult').hide() neerzetten in plaats van ...innerHTML = ''...
Toevoeging op 19/02/2016 14:48:11:
En dit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function(ok) {
if (ok) {
setTimeout(function() {
document.getElementById('postResult').innerHTML = '';
}, 3000);
} else {
setTimeout(function() {
document.getElementById('postResult').innerHTML = '';
}, 3000);
}
$('#postResult').show();
},
if (ok) {
setTimeout(function() {
document.getElementById('postResult').innerHTML = '';
}, 3000);
} else {
setTimeout(function() {
document.getElementById('postResult').innerHTML = '';
}, 3000);
}
$('#postResult').show();
},
Kun je, als je toch niets met "ok" doet, verkorten tot:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function(ok) {
$('#postResult').show();
setTimeout(function() {
$('#postResult').hide();
}, 3000);
},
$('#postResult').show();
setTimeout(function() {
$('#postResult').hide();
}, 3000);
},
EDIT: maar hiermee sla je mogelijk mijn eerdere advies in de wind. Zorg ervoor dat op een of andere manier de STATUS wordt gecommuniceerd en toon niet simpelweg een boodschap...
De oplossingsstrategie die Frank beschrijft gaat volgens mij meer over de situatie waarin het netwerkverkeer zijn taak niet naar behoren kan verrichten, dus wanneer een website niet reageert of een foutcode teruggeeft.
Waar ik het over heb is dat je applicatie zelf bericht of een INSERT-query (of wat het ook was) is geslaagd. Als jij altijd simpelweg hetzelfde bericht teruggeeft/toont dan zou er ten onrechte vanuit gegaan kunnen worden dat de query is geslaagd. Het zou zo kunnen zijn dat het PHP-script een (nietszeggende) respons retourneert (met HTTP status code 200) terwijl de query is mislukt. Er is dan dus geen enkele manier om vast te stellen dat de query is geslaagd of mislukt. Dit heb ik je nu al een aantal keren proberen uit te leggen maar volgens mij is het kwartje nog niet gevallen.
Gewijzigd op 19/02/2016 14:58:03 door Thomas van den Heuvel