Tijden veranderen
Div refresh
De vorige werkte niet naar behoren. te veel bugs en fouten.
Maar wat ik nu zoek is een div refresh.
Heb al gekeken op http://w3schools.com/ajax/default.asp
maar op de een of andere manier wil het niet lukken.
Google ook al afgezocht maar de een zegt dit en de ander dat.
En een paar scripts geprobeerd maar het wil niet zoals ik wil.
Misschien iemand van jullie een Idee?
Met vriendelijke groet,
Thomas de vries.
Jquery zal wel kunnen. maar het moet dit doen.
heb een form met de volgende atributen
name="naam"
name="bericht"
hidden="chatten"
submit name="chat"
Nu wil ik dus dat het volgende gebeurt.
Als het form wordt gepost.
En de naam en bericht is niet ingevuld dit eerst door php wordt gecontroleerd
(dit kan ik zelf).
Dan als 1 of meerdere velden niet goed zijn dat ie dat dus in die div laat zien.
Als het wel goed is dan dus de spul toevoegen aan de database.
en dan moet nog ook zonder dat ik dus de sumbit gebruik de div refreshen.
Maar wel zo dat ie dus niet de form mee stuurt met de lege velden.
EDIT:
P.s.
Heb het al gevonden wat ik zocht goed en klein systeem en doet precies wat ie moet doen.
Gewijzigd op 04/01/2011 20:19:12 door thomas de vries
(ik zou ook zoiets wel kunnen gebruiken :P)
Gewijzigd op 04/01/2011 21:00:11 door Write Down
Hij herlaad nog steeds de gehele pagina.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
Toevoeging op 04/01/2011 23:43:06:
Met dit script wordt dus een externe pagina steeds herladen (hier response.php). Het script werkt op het eerste zicht goed.
Wat ik dus zoek en heb wel wat met prototype.
(gaat niet zoals het moet maar goed).
Maar dit wordt dus zoeken tot je een ons weegt.
Heb van alles al geprobeerd.
dit is wat ik tot nu toe heb.
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function minichat(text,name,ipadress) {
new Ajax.Updater('chatwindow', '/pages/chat1.php', {
method: 'post',
requestTimeout: 5,
parameters: { text: text, name: name, ipadress: ipadress},
evalScripts: true
});
}
var t = true;
t = window.setTimeout('minichat()', 5000000);
</script>
<style type="text/css">
#chatwindow {
margin-left:15px;
left:0px;
top:0px;
width:500px;
height:450px;
border-collapse:collapse;
background-color:#999;
}
#ubb {
margin-left:15px;
top:360px;
left:10px;
width:500px;
height:31px;
}
#chatsysteem {
margin-left:15px;
top:360px;
width:500px;
height:60px;
}
.mytext
{
width:100%;
margin-bottom:10px;
background-color: #999;
border:#000;
}
.mytext1
{
width:28%;
margin-bottom:10px;
background-color: #999;
border:#000;
}
</style>
</head>
<body>
<div id="chatwindow"></div>
<div id="ubb"></div>
<div id="chatsysteem">
<form method="POST" id="myform" onsubmit="minichat(document.getElementById('chat').value); document.getElementById('chat').value = ''; return false;">
<table width="100%" border="1">
<tr>
<td width="10%" valign="top">Naam:</td>
<td><input type="text" class="mytext1" id="naam" name="naam" maxlength="16" width="16"/></td>
</tr>
<tr>
<td width="10%" valign="top">Bericht:</td>
<td><input type="text" class="mytext" id="chat" name="chat" maxlength="50" /></td>
</tr>
</table>
<div id="button">
<input type="hidden" name="ipadress" id="ip" value="127.0.0.1" />
<input type="hidden" name="chatten" id="chatten" />
<input type="submit" name="verzend" value="Chatten" />
</div>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function minichat(text,name,ipadress) {
new Ajax.Updater('chatwindow', '/pages/chat1.php', {
method: 'post',
requestTimeout: 5,
parameters: { text: text, name: name, ipadress: ipadress},
evalScripts: true
});
}
var t = true;
t = window.setTimeout('minichat()', 5000000);
</script>
<style type="text/css">
#chatwindow {
margin-left:15px;
left:0px;
top:0px;
width:500px;
height:450px;
border-collapse:collapse;
background-color:#999;
}
#ubb {
margin-left:15px;
top:360px;
left:10px;
width:500px;
height:31px;
}
#chatsysteem {
margin-left:15px;
top:360px;
width:500px;
height:60px;
}
.mytext
{
width:100%;
margin-bottom:10px;
background-color: #999;
border:#000;
}
.mytext1
{
width:28%;
margin-bottom:10px;
background-color: #999;
border:#000;
}
</style>
</head>
<body>
<div id="chatwindow"></div>
<div id="ubb"></div>
<div id="chatsysteem">
<form method="POST" id="myform" onsubmit="minichat(document.getElementById('chat').value); document.getElementById('chat').value = ''; return false;">
<table width="100%" border="1">
<tr>
<td width="10%" valign="top">Naam:</td>
<td><input type="text" class="mytext1" id="naam" name="naam" maxlength="16" width="16"/></td>
</tr>
<tr>
<td width="10%" valign="top">Bericht:</td>
<td><input type="text" class="mytext" id="chat" name="chat" maxlength="50" /></td>
</tr>
</table>
<div id="button">
<input type="hidden" name="ipadress" id="ip" value="127.0.0.1" />
<input type="hidden" name="chatten" id="chatten" />
<input type="submit" name="verzend" value="Chatten" />
</div>
</form>
</div>
</body>
</html>
Maar wat ie hier dus doet is dus de div refreshen(GOED DUS).
maar wat ie nog meer doet is niet de hele pagina refreshen.(ook goed).
Maar wat ie niet goed doet is dat ik niet kan controleren via php op invoer.
Want na de tijd van laten we zeggen 10 sec post ie het form toch of het nu is ingevuld of niet.
En als ik dit doe op chat1.php
if($_POST['text'] == "")
{
$error = "Vergeten wat in te vullen";
}
En dan op de chat.php
na de </form> tag dan laat ie de error niet zien.
Dus is nog niet helemaal wat ik moet hebben.
Maar goed ga naar bed morgen tot 5 uur werken. dus lekker lang nadenken.
Of anders een kant en klaar chat systeem weghalen. zien wel