Virusscanner tips?
shoutbox.js
Gesponsorde koppelingen
PHP script bestanden
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<?php
$(document).ready(function(){
/**
* Globale variablen die worden gezet zodra deze pagina wordt geladen.
* De volgende attributen hebben met elkaar te maken
*
* - inputUser: Deze variable is gekoppeld met het input veld naam. ( nick ) Alle informatie wordt in deze variable opgeslagen
* - inputMessage: Deze variable is gekoppeld met het veld waarin het bericht kan worden getypt. ( message ) Alle informatie wordt in deze variable opgeslagen
* - loading: Deze variable is gekoppeld aan het AJAX load gifje.
* - messageList: Deze variable is gekoppeld aan de ul waarin de berichten worden weergegeven.
*/
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");
/**
* Deze functie haalt alle recente berichten op. Via een AJAX request wordt dit door PHP afgehandeld.
* Deze functie wordt aangeroepen als men de eerste keer op de webpage komt maar ook als er een nieuw bericht is toegevoegd.
*/
function updateShoutbox()
{
// Laat de lijst met de berichten verdwijnen
messageList.hide();
// Laat het gifje met de AJAX-loader te voorschijn komen
loading.fadeIn();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=update",
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt het gifje met de AJAX-loader verborgen
loading.fadeOut();
// De lijst met alle berichten wordt gevuld met data
messageList.html(data.responseText);
// De lijst met berichten wordt weer te verschijn gehaald.
messageList.fadeIn(2000);
}
});
}
/**
* Functie om te kijken of alle velden zijn ingevoerd
* De volgende velden worden gecontroleerd of deze niet leeg zijn
*
* - Naam ( nick )
* - Bericht ( message )
*/
function checkForm()
{
if(inputUser.attr("value") && inputMessage.attr("value"))
{
return true;
}
else
{
return false;
}
}
// Voor de eerste keer de shoutbox updaten om zo recente berichten te kunnen weergeven
updateShoutbox();
/**
* Als er op de submit button is gedrukt worden de volgende procedures op volgorde behandeld
*
* - Controleren of alle velden zijn ingevuld
* - Nieuwe variablen worden gedefinieerd ( nick, message )
* - De submit button wordt gedeactiveerd
* - Er word een nieuwe tekst geplaatst in de button ( Laden ... )
* - De nieuwe gegevens worden verzonden door AJAX, PHP pakt deze gegevens op en verzend deze gegevens naar de database.
* - Als de data verzonden is wordt de functie 'updateShoutbox' aangeroepen en wordt de submit button weer geactiveerd
*/
$("#form").submit(function()
{
// Controleren of alle velden zijn gevuld
if(checkForm())
{
// Definieer nieuwe variablen met de inhoud van de velden
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
// Deactiveer de submit button en vul deze met een nieuwe tekst
$("#send").attr({ disabled:true, value:"Laden..." });
$("#send").blur();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt de data geladen in de lijst met berichten
messageList.html(data.responseText);
// De functie updateShoutbox wordt aangeroepen om zo de lijst met berichten te vernieuwen en deze up te date te houden.
updateShoutbox();
// De submit button wordt weer geactiveerd en de oorspronkelijke tekst wordt weer getoond
$("#send").attr({ disabled:false, value:"Verzenden" });
}
});
}
else
{
// Niet alle velden zijn gevuld, melding geven doormiddel van een alert box
alert("Niet alle velden zijn gevuld!");
}
// Omdat wij een refresh van de pagina willen voorkomen returnen wij hem false
return false;
});
});
?>
$(document).ready(function(){
/**
* Globale variablen die worden gezet zodra deze pagina wordt geladen.
* De volgende attributen hebben met elkaar te maken
*
* - inputUser: Deze variable is gekoppeld met het input veld naam. ( nick ) Alle informatie wordt in deze variable opgeslagen
* - inputMessage: Deze variable is gekoppeld met het veld waarin het bericht kan worden getypt. ( message ) Alle informatie wordt in deze variable opgeslagen
* - loading: Deze variable is gekoppeld aan het AJAX load gifje.
* - messageList: Deze variable is gekoppeld aan de ul waarin de berichten worden weergegeven.
*/
var inputUser = $("#nick");
var inputMessage = $("#message");
var loading = $("#loading");
var messageList = $(".content > ul");
/**
* Deze functie haalt alle recente berichten op. Via een AJAX request wordt dit door PHP afgehandeld.
* Deze functie wordt aangeroepen als men de eerste keer op de webpage komt maar ook als er een nieuw bericht is toegevoegd.
*/
function updateShoutbox()
{
// Laat de lijst met de berichten verdwijnen
messageList.hide();
// Laat het gifje met de AJAX-loader te voorschijn komen
loading.fadeIn();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=update",
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt het gifje met de AJAX-loader verborgen
loading.fadeOut();
// De lijst met alle berichten wordt gevuld met data
messageList.html(data.responseText);
// De lijst met berichten wordt weer te verschijn gehaald.
messageList.fadeIn(2000);
}
});
}
/**
* Functie om te kijken of alle velden zijn ingevoerd
* De volgende velden worden gecontroleerd of deze niet leeg zijn
*
* - Naam ( nick )
* - Bericht ( message )
*/
function checkForm()
{
if(inputUser.attr("value") && inputMessage.attr("value"))
{
return true;
}
else
{
return false;
}
}
// Voor de eerste keer de shoutbox updaten om zo recente berichten te kunnen weergeven
updateShoutbox();
/**
* Als er op de submit button is gedrukt worden de volgende procedures op volgorde behandeld
*
* - Controleren of alle velden zijn ingevuld
* - Nieuwe variablen worden gedefinieerd ( nick, message )
* - De submit button wordt gedeactiveerd
* - Er word een nieuwe tekst geplaatst in de button ( Laden ... )
* - De nieuwe gegevens worden verzonden door AJAX, PHP pakt deze gegevens op en verzend deze gegevens naar de database.
* - Als de data verzonden is wordt de functie 'updateShoutbox' aangeroepen en wordt de submit button weer geactiveerd
*/
$("#form").submit(function()
{
// Controleren of alle velden zijn gevuld
if(checkForm())
{
// Definieer nieuwe variablen met de inhoud van de velden
var nick = inputUser.attr("value");
var message = inputMessage.attr("value");
// Deactiveer de submit button en vul deze met een nieuwe tekst
$("#send").attr({ disabled:true, value:"Laden..." });
$("#send").blur();
/**
* Hier verzend AJAX alles naar PHP
*/
$.ajax({
type: "POST",
url: "shoutbox.php",
data: "action=insert&nick=" + nick + "&message=" + message,
complete: function(data)
{
// Wanneer de data is verzonden via AJAX naar PHP wordt de data geladen in de lijst met berichten
messageList.html(data.responseText);
// De functie updateShoutbox wordt aangeroepen om zo de lijst met berichten te vernieuwen en deze up te date te houden.
updateShoutbox();
// De submit button wordt weer geactiveerd en de oorspronkelijke tekst wordt weer getoond
$("#send").attr({ disabled:false, value:"Verzenden" });
}
});
}
else
{
// Niet alle velden zijn gevuld, melding geven doormiddel van een alert box
alert("Niet alle velden zijn gevuld!");
}
// Omdat wij een refresh van de pagina willen voorkomen returnen wij hem false
return false;
});
});
?>