AJAX code werkt niet
ik heb op AJAX te leren een tutorial gevolgd, deze.
Nu ik heb dan het voorbeeld proberen toepassen, maar bij mij worden er geen resultaten gevonden.
Code:
search.php
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$gegevens = array(
'test', 'test2', 'foo', 'bar', 't'
, 'help', 'hello', 'dit is fijn', 'ford',
'etc', 'enzovoort', '...', 'en zo zijn er veel woorden',
'dit is een lange tekst', 'lalalala', 'tralala', 'PHP',
'OOP', 'JavaScript', 'AJAX power!', 'w00t',
'ik ben koen', 'koen', 'speelmeijer', 'is',
'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort'
, 'hehe');
if(isset($_GET['zoek']) && $_GET['zoek'] != "") {
foreach($gegevens as $v) {
if(strstr($v, $_GET['zoek'])) {
echo '<a href="http://www.sitemasters.be/tutorials/27/1/433/AJAX/AJAX_XMLHttpRequest_object_en_live_search#">'. $v .'</a><br />';
}
}
}
?>
$gegevens = array(
'test', 'test2', 'foo', 'bar', 't'
, 'help', 'hello', 'dit is fijn', 'ford',
'etc', 'enzovoort', '...', 'en zo zijn er veel woorden',
'dit is een lange tekst', 'lalalala', 'tralala', 'PHP',
'OOP', 'JavaScript', 'AJAX power!', 'w00t',
'ik ben koen', 'koen', 'speelmeijer', 'is',
'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort'
, 'hehe');
if(isset($_GET['zoek']) && $_GET['zoek'] != "") {
foreach($gegevens as $v) {
if(strstr($v, $_GET['zoek'])) {
echo '<a href="http://www.sitemasters.be/tutorials/27/1/433/AJAX/AJAX_XMLHttpRequest_object_en_live_search#">'. $v .'</a><br />';
}
}
}
?>
test.php
<table width="100%">
<tr>
<td valign="top" width="301">
<input type="text" size="50" name="zoek" onkeyup="sendRequestSearch(this.value);" />
</td>
<td valign="top">
<div id="zoek_resultaten" style="border:1px solid #000000"></div>
</td>
</tr>
</table>
<script>
function createRequestObject() {
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
}
</script>
<script>
function sendRequestSearch(iets) {
http.open('get', 'search.php?zoek='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
</script>
<script>
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("zoek_resultaten").innerHTML = http.responseText;
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
}
</script>
Wie ziet de fout?
Groeten,
Olivier
Groeten,
Olivier
JQuery gezocht en livesearch gevonden & werkend gekregen! Nu kennis verder bijschaven ;-)
En deze toepassen op een MySQL database! Ik hou jullie op de hoogte!
Groeten,
Olivier
ik probeer nu een tablesorter uit, om mijn gegevens te sorteren. VOlgende tekst gevolgt: http://tablesorter.com/docs/
Volgende code maar ze werkt niet. Wat doe ik fout?
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="./tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
Groeten,
Olivier
Doe zo eens:
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
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
<html>
<head>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});
</script>
</body>
</html>
<head>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>[email protected]</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>[email protected]</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});
</script>
</body>
</html>
Gewijzigd op 25/06/2012 09:56:15 door Kris Peeters
ikzelf had de fout net zelf ook al gevonden. Bedankt voor de opmerking alvast!
Nu ik zit ik met een andere vraag. Is het mogelijk om via JQuery of AJAX de data uit een database te filteren. Ik heb bijvoorbeeld twee categorieën: Geslacht & Training.
Ik zou hier graag filters op maken (Man/Vrouw & BEN/PUP/MIN). Afhankelijk van welke filter er geselecteerd is zou de SELECT van de MySQLdatabase aangepast meoten worden. Enig idee of dit mogelijk is?
Groeten,
Olivier
Kijk ook eens hier: jQuery post
Gewijzigd op 26/06/2012 16:07:35 door Olivier Peeters