Melding laten verdwijnen

Het is een beetje gissen maar hier een paar denkbare mogelijkheden

- 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.

Ik heb er al iets tussenuit gehaald, maar het probleem blijft.
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.

<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>

Als je een pagina opvraagt door een URL in te typen in je browser dan stuurt je browser een verzoek (request) naar de desbetreffende server. Op zijn beurt antwoord de server met een response (antwoord). In de response geeft deze ook een status mee. status HTTP 200 betekent dat alles in orde is. Bij (nagenoeg) alle andere is er iets fout. De jQuery $.post functie stuurt ook een request naar een webserver. Voor de webserver is dit net zo een normaal request als iedere andere en ook hier zal deze als het allemaal goed verloopt een status HTTP 200 geven.

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()

[size=xsmall]Toevoeging op 18/02/2016 21:29:06:[/size]

Dit is een betere schrijfwijze:

$.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);
	}
);

Super bedankt Frank! Ik probeer jouw code in de mijne te weven, maar dat lukt me niet.
Heb je enig idee hoe dat moet? Ik heb zelf dit geprobeerd, maar dat ging fout:

<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>

zoiets denk ik ...

$.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);
});

[size=xsmall]Toevoeging op 18/02/2016 22:38:15:[/size]

dat moet je dan dus invoegen in plaats van regel 11 t/m 25.

Thanks het werkt!

Simpelweg omdat iets werkt maakt het nog niet juist.

setTimeout(function(){
    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 = ''...

[size=xsmall]Toevoeging op 19/02/2016 14:48:11:[/size]

En dit

function(ok) {
    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:

function(ok) {
    $('#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.