Reactie naar gebruiker toe na het afhandelen van een actie
Ik ben al een paar manieren op een rijtje gaan zetten die ik ben tegen gekomen
- Niet het formulier tonen, maar een div met de tekst "Actie geslaagd, ga terug naar home" (iets in die richting)
- Zelfde als hierboven maar dan ook nog het formulier tonen
- Zelfde als hierboven maar dan met een ajax script
- Ajax script laten uitvoeren en een popup tonen "Actie geslaagd"
- Zelfde als hierboven met een redirect naar iets van home
- Formulier als popup tonen met Bewaar/Bewaar en sluit/Sluit waarbij je popup sluit nadat het formulier is afgehandeld, en een fout wordt weergegeven met een alert
- Bewaar/Bewaar en sluit/Sluit zonder de popup
Ik ben benieuwd wat jullie voorkeur heeft/gebruiken :)
Aangezien je over Ajax spreekt, doet iets me vermoeden dat je spreekt over valse popup's; die geïntegreerd zijn in het venster. Zoals bv. bij lightbox.
Wat mij betreft is dit laatste okay.
Chris NVT op 12/12/2012 12:20:58:
Je kunt na een submit een div echo'en die bijvoorbeeld in je css z-index: 1200 heeft zodat hij boven op alle andere div's komt te liggen. Dan oogt het als een pop-up maar is het geen echte, is gebruikersvriendelijker en werkt altijd ook als er mensen met pop-up blockers werken
Ik was zowieso niet van plan om met popups te gaan werken, het is meer om te inventariseren wat mensen fijn vinden te gebruiken (en dus niet de implementatie). Ik ben bezig met het maken van een applicatie waarbij dit nogal vaak voor komt en ben gewoon benieuwd naar de mogelijke manieren om dit te doen (en de meest gebruiksvriendelijke)
Maar mensen die niet veel verstand hebben hoe websites worden gemaakt, die intereseert het niets hoe een foutmelding of een succesmelding eruit ziet. Als ze maar zeker weten dat hun actie is gelukt/mislukt.
En nog even een vraagje: wat is eigenlijk de hoogste z-index bij css?
Is er wel een maximaal getal?
En wat is het laagste getal? -1200 bijvoorbeeld ofzo?
Gewijzigd op 12/12/2012 13:53:01 door Mark Hogeveen
Dan zou ik gewoon boven het formulier een melding geven in het groen wanneer een submit succesvol is, en in het rood wanneer er iets fout is gegaan.
Vooral omdat je aangeeft dat het vaker voor komt, lijkt me een subtiele regel bovenaan het formulier meer dan voldoende en niet telkens een soort van pop-up/overlay van een pagina.
@Harry:
Er bestaat niet echt een maximale hoogte of laagte voor de z-index. Wel is aan te raden om niet te uitbundig te gaan werken, aangezien je dan al snel het overzicht kunt verliezen wat nu welke hoogte heeft.
Dit is een richtlijn, maar hopelijk komen mensen nooit aan deze 'absurde' getallen in de praktijk.
Quote:
Browser Max z-index value When exceeded, value changes to:
Internet Explorer 6 2147483647 2147483647
Internet Explorer 7 2147483647 2147483647
Internet Explorer 8 2147483647 2147483647
Firefox 2 2147483647 *element disappears*
Firefox 3 2147483647 0
Safari 3 16777271 16777271
Safari 4 2147483647 2147483647
Opera 9 2147483647 2147483647
Internet Explorer 6 2147483647 2147483647
Internet Explorer 7 2147483647 2147483647
Internet Explorer 8 2147483647 2147483647
Firefox 2 2147483647 *element disappears*
Firefox 3 2147483647 0
Safari 3 16777271 16777271
Safari 4 2147483647 2147483647
Opera 9 2147483647 2147483647
Gewijzigd op 12/12/2012 14:04:31 door Chris PHP
Ik zou dit voorstellen:
Je maakt een klassiek <form>. Je zorgt dat het formulier perfect kan werken voor gebruikers die javascript af zetten.
Je gebruikt javascript om te valideren.
Controleren of een waarde goed geformatteerd is (bv. het moet een getal zijn, of een mail adres...) kan je meestal met javascript zonder Ajax.
Met Ajax kan je controleren op unieke waarden. Username, e-mailadres, ...
Na het invullen van de username (bv. met onblur() ) ga je achter de rug van de gebruiker de naam naar de server sturen om te zien of het nog beschikbaar is.
Met het Ajax antwoord laat je een berichtje zien naast/boven de <input>. (eventueel met een image (duim omhoog/omlaag; smiley; check/kruis ...) ).
Ik vind het persoonlijk heel erg storend wanneer ik een volledig formulier moet doorsturen en dan twee of drie keer moet verzenden na berichten over 'al bezet', 'paswoord moet dit of dat bevatten', ...
Daar is asynchroon valideren een grote meerwaarde voor het gebruikersgemak
Hou zeker rekening met de tips van de post boven mij.
Je hebt de placeholder: zie http://www.w3schools.com/html5/att_input_placeholder.asp
Je hebt nieuwe data types, zoals <input type="email"> die al controleren of de formattering goed is.
Dat alles verlicht het werk.
LEDfan nvt op 12/12/2012 15:28:01:
Ik gebruik zelf Noty om notificaties weer te geven. Bv. als het formulier fouten bevat laat ik een rode 'popup' komen en dan de niet of fout ingevulde formulieren maak ik dan rood. (Of zet ik meer uitlegbij) Je hebt ook een groene notificatie, bv. als het formulier is geslaagd. Ik heb zelf op een niet zo'n nette manier ervoor gezorgd dat de noty auto weg gaat.
Hou zeker rekening met de tips van de post boven mij.
Hou zeker rekening met de tips van de post boven mij.
Ja ik denk dat ik ook zoiets ga gebruiken als dat Noty. Ik had al iets in die trend geschreven, maar ik ga het zeker bekijken thanks!
Kris Peeters op 12/12/2012 15:48:00:
Trouwens, niet vergeten dat de vernieuwde HTML ook al veel voor je betekent.
Je hebt de placeholder: zie http://www.w3schools.com/html5/att_input_placeholder.asp
Je hebt nieuwe data types, zoals <input type="email"> die al controleren of de formattering goed is.
Dat alles verlicht het werk.
Je hebt de placeholder: zie http://www.w3schools.com/html5/att_input_placeholder.asp
Je hebt nieuwe data types, zoals <input type="email"> die al controleren of de formattering goed is.
Dat alles verlicht het werk.
Cool maar ik heb mijn validatie afhandeling al geschreven. Ik zoek meer een leuke, gebruiksvriendelijke manier om het weer te geven
Een voorbeeldje waar je misschhien inspiratie uit kan halen
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (!empty($_GET['ajax'])) {
// ajax afhandeling; dus validatie
if (isset($_POST['username'])) {
if (strtolower($_POST['username']) === 'homer') {
echo 0;
}
else {
echo 1;
}
}
exit; // na een Ajax verzoek wil je niet dat de rest ook wordt uitgevoerd
}
else {
// verwerking formulier
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validatie</title>
<style>
#username_message img {
height: 30px;
}
</style>
</head>
<body>
<h1>Registreer je in de "No Homer's Club"</h1>
<form action="" method="post" id="my_form">
<input id="username" name="username" type="text"/> User Name <span id="username_message"></span> <br>
<input id="email" name="email" type="text"/> Email <br>
<input type="submit" value="GO" id="submit"/>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) { // dit wordt uitgevoerd op het moment dat de pagina geladen is en de DOM klaar is om te gebruiken
$('#username').blur(function() {
$.ajax({
type: "POST",
url: '?ajax=1',
data: {username: escape($(this).val())},
success: function(data) {
if (data == 1) {
$('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/decadd20a19589239f51b02b33f3e343/1168309/Approve48x48.gif" title="beschikbaar">');
$('#username').css({borderColor: 'auto'});
}
else {
$('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/9e1f2d3ee2b962db0567c62ae8999e32/1168387/Thumbs-down48x48.gif" title="Username niet meer beschikbaar"> Dit is de "No Homer\'s Club!!"');
$('#username').css({borderColor: 'red'});
}
}
});
});
});
</script>
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (!empty($_GET['ajax'])) {
// ajax afhandeling; dus validatie
if (isset($_POST['username'])) {
if (strtolower($_POST['username']) === 'homer') {
echo 0;
}
else {
echo 1;
}
}
exit; // na een Ajax verzoek wil je niet dat de rest ook wordt uitgevoerd
}
else {
// verwerking formulier
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Validatie</title>
<style>
#username_message img {
height: 30px;
}
</style>
</head>
<body>
<h1>Registreer je in de "No Homer's Club"</h1>
<form action="" method="post" id="my_form">
<input id="username" name="username" type="text"/> User Name <span id="username_message"></span> <br>
<input id="email" name="email" type="text"/> Email <br>
<input type="submit" value="GO" id="submit"/>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) { // dit wordt uitgevoerd op het moment dat de pagina geladen is en de DOM klaar is om te gebruiken
$('#username').blur(function() {
$.ajax({
type: "POST",
url: '?ajax=1',
data: {username: escape($(this).val())},
success: function(data) {
if (data == 1) {
$('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/decadd20a19589239f51b02b33f3e343/1168309/Approve48x48.gif" title="beschikbaar">');
$('#username').css({borderColor: 'auto'});
}
else {
$('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/9e1f2d3ee2b962db0567c62ae8999e32/1168387/Thumbs-down48x48.gif" title="Username niet meer beschikbaar"> Dit is de "No Homer\'s Club!!"');
$('#username').css({borderColor: 'red'});
}
}
});
});
});
</script>
</body>
</html>
Je kan nog veel meer wanneer je met JSON werkt. Dan kan je iets echo'en als
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
json_encode(array(
'success' => 1,
'message' => 'Username beschikbaar',
'border_color': 'auto'
));
?>
json_encode(array(
'success' => 1,
'message' => 'Username beschikbaar',
'border_color': 'auto'
));
?>
en heb je dus veel meer speelruimte in javascript.
Gewijzigd op 12/12/2012 17:46:20 door Kris Peeters