weergave zoekactie Ajax
1. suggestie.html (zoekveld incl. Jacascript)
2. doe_suggestie.php (query)
3. XHConn (JS bestand)
Na de suggestie kan ik dus op de naam klikken en standaard verwijst deze naar doe_iets.php. Maar mijn plan is om dat zoekveld in een ander groot formulier te breien. Ik wil dus dat het resultaat in dezelfde pagina tevoorschijn komt na klikken. Normaal gesproken geen probleem maar met ajax is er geen form tag e.d. dus ik zou niet weten waar te beginnen. wie kan helpen?
dit is mijn php pagina:
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
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
<?php
require_once("dbConf.inc");
$invoer = $_POST["invoer"];
//query
$query = mysql_query("SELECT * FROM cms_users WHERE name LIKE '".$invoer."%' LIMIT 0, 50") or die( mysql_error() );
/* BELANGRIJK: zorg voor de juiste header: het MIME type "text/xml"
anders pakt Javascript het geretourneerde XML object niet! */
header('Content-Type: ' . "text/xml");
echo "<suggesties>";
while( $resultaten = mysql_fetch_assoc( $query ) ) {
echo "<suggestie>" . $resultaten['name'] . "\n</suggestie>";
}
echo "</suggesties>";
?>
require_once("dbConf.inc");
$invoer = $_POST["invoer"];
//query
$query = mysql_query("SELECT * FROM cms_users WHERE name LIKE '".$invoer."%' LIMIT 0, 50") or die( mysql_error() );
/* BELANGRIJK: zorg voor de juiste header: het MIME type "text/xml"
anders pakt Javascript het geretourneerde XML object niet! */
header('Content-Type: ' . "text/xml");
echo "<suggesties>";
while( $resultaten = mysql_fetch_assoc( $query ) ) {
echo "<suggestie>" . $resultaten['name'] . "\n</suggestie>";
}
echo "</suggesties>";
?>
en dit mijn html:
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title></title>
<script type="text/javascript" src="XHConn.js"></script>
<script type="text/javascript">
function doe_suggestie()
{
if( !document.getElementById || !document.getElementsByTagName) return false;
var myConn = new XHConn();
if( !myConn ) return false;
var invoer = "&invoer=" + invoer_veld.value;
/* functie die uitgevoerd wordt als het laden klaar is */
var fnWhenDone = function(oXML)
{
var suggesties = oXML.responseXML.getElementsByTagName("suggestie");
var suggestie_lijst = "<ul>";
for(var c = 0; c < suggesties.length; c++)
{
suggestie_lijst += "<li><a href=\"doe_iets.php?woord=" + suggesties[c].firstChild.nodeValue + "\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "</ul>";
suggestie_container.innerHTML = suggestie_lijst;
}
/* connecten met PHP script */
myConn.connect("doe_suggestie.php", "POST", invoer, fnWhenDone);
}
function opzetten()
{
var invoer_veld = document.getElementById("invoer_veld");
var suggestie_container = document.getElementById("suggestie_container");
invoer_veld.onkeyup = doe_suggestie;
}
window.onload = opzetten;
</script>
</head>
<body>
<p>Vul hier een stuk van een woord in</p>
<input type="text" size="20" id="invoer_veld" name="invoer">
<div id="suggestie_container"></div>
</body>
</html>
<html>
<head><title></title>
<script type="text/javascript" src="XHConn.js"></script>
<script type="text/javascript">
function doe_suggestie()
{
if( !document.getElementById || !document.getElementsByTagName) return false;
var myConn = new XHConn();
if( !myConn ) return false;
var invoer = "&invoer=" + invoer_veld.value;
/* functie die uitgevoerd wordt als het laden klaar is */
var fnWhenDone = function(oXML)
{
var suggesties = oXML.responseXML.getElementsByTagName("suggestie");
var suggestie_lijst = "<ul>";
for(var c = 0; c < suggesties.length; c++)
{
suggestie_lijst += "<li><a href=\"doe_iets.php?woord=" + suggesties[c].firstChild.nodeValue + "\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "</ul>";
suggestie_container.innerHTML = suggestie_lijst;
}
/* connecten met PHP script */
myConn.connect("doe_suggestie.php", "POST", invoer, fnWhenDone);
}
function opzetten()
{
var invoer_veld = document.getElementById("invoer_veld");
var suggestie_container = document.getElementById("suggestie_container");
invoer_veld.onkeyup = doe_suggestie;
}
window.onload = opzetten;
</script>
</head>
<body>
<p>Vul hier een stuk van een woord in</p>
<input type="text" size="20" id="invoer_veld" name="invoer">
<div id="suggestie_container"></div>
</body>
</html>
die andere lijkt mij overbodig....
Gewijzigd op 01/01/1970 01:00:00 door Rob
Code (php)
1
2
3
2
3
for(var c = 0; c < suggesties.length; c++) {
suggestie_lijst += "<li><a href=\"doe_iets.php?woord=" + suggesties[c].firstChild.nodeValue + "\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "<li><a href=\"doe_iets.php?woord=" + suggesties[c].firstChild.nodeValue + "\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
door bijvoorbeeld:
Code (php)
1
2
3
2
3
for(var c = 0; c < suggesties.length; c++) {
suggestie_lijst += "<li><a href=\"javascript:document.getElementById('invoer_veld').value='" + suggesties[c].firstChild.nodeValue + "'\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "<li><a href=\"javascript:document.getElementById('invoer_veld').value='" + suggesties[c].firstChild.nodeValue + "'\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
Het kan ook met onclick, of beter nog met attachEvent & addEventListener, maar dan zou je je lijst via het DOM moeten opbouwen en moet je in detail weten hoe closures werken. Dit is de nasty maar werkende oplossing :)
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
<input type="text" size="20" id="invoer_veld" name="invoer">
maar kan ik de rest er onder zetten?
Zoja, ze hebben allemaal een uniek id nodig, name maakt niet zoveel uit. Ik zit even te kijken naar je code, maar als je nu bij 'onfocus' het veld dat gefocussed wordt op 'invoer_veld' zet dan zou dat niet zo moeilijk moeten zijn.
Die for-lus wordt dan:
Code (php)
1
2
3
2
3
for(var c = 0; c < suggesties.length; c++) {
suggestie_lijst += "<li><a href=\"javascript:invoer_veld.value='" + suggesties[c].firstChild.nodeValue + "'\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "<li><a href=\"javascript:invoer_veld.value='" + suggesties[c].firstChild.nodeValue + "'\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
en je opzetten()-functie wordt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function opzetten()
{
var suggestie_container = document.getElementById("suggestie_container");
// alle velden (id's) die zo'n suggest handler moeten hebben
var velden = ['invoer_veld_1', 'invoer_veld_2'];
for(var i = 0; i < velden.length; i++)
{
var veld = document.getElementById(velden[i]);
veld.onfocus = function(event) {
event = event || window.event; // IE kent window.event, FF kent hem als eerste argument
invoer_veld = event.target;
}
veld.onkeyup = doe_suggestie;
}
}
{
var suggestie_container = document.getElementById("suggestie_container");
// alle velden (id's) die zo'n suggest handler moeten hebben
var velden = ['invoer_veld_1', 'invoer_veld_2'];
for(var i = 0; i < velden.length; i++)
{
var veld = document.getElementById(velden[i]);
veld.onfocus = function(event) {
event = event || window.event; // IE kent window.event, FF kent hem als eerste argument
invoer_veld = event.target;
}
veld.onkeyup = doe_suggestie;
}
}
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
1. de huidige, maar dan ietsjes aangepast. Je maakt er een invul-functie bij en geeft de waarden aan die functie als argumenten. Voor een paar niet al te grote waarden is dit geen probleem, maar waneer het lappen tekst, of tekst met speciale karakters betreft is het riskant.
2. het DOM Event Model & Closures. Alle waarden blijven binnen Javascript, en via addEventListener / addEvent verbind je een functie aan het klikken op een item in je lijstje. Maar dan moet je ook je lijstje opbouwen via het DOM.
Ik kan manier 1 wel even uitleggen (2 ook wel, maar dat kost wat meer tijd :P) maar kan je dan eerst even beschrijven wat voor velden je in je formulier hebt, en hoe je suggest XML, wat je PHP uitvoert, eruit ziet?
edit: je situatie herinnerde me aan een script dat ik een jaar of 2 geleden heb gemaakt. Dat doet min of meer dat wat jij wilt, alleen met csv in plaats van XML.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
ik heb echt een heleboel velden in het formulier waar men verschillende opties kan kiezen voor producten. Maar de velden waar het om gaat zijn velden die we nu steeds handmatig elke keer adhv lijsten kopieren en plakken. Als we bv het veld hebben 'salescode' dan zou daar de naam van de agent met de afdeling en email al ingevuld moeten zijn. vb velden:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<input name="Sales_Code" type="text" id="Sales_Code" size="11" maxlength="11">
<input name="agent " type="text" id="agent " size="20" maxlength="30">
<input name="Email_adres" type="text" id="Email adres " size="20" maxlength="30">
<input name="department" type="text" id="department " size="20" maxlength="30">
<input name="agent " type="text" id="agent " size="20" maxlength="30">
<input name="Email_adres" type="text" id="Email adres " size="20" maxlength="30">
<input name="department" type="text" id="department " size="20" maxlength="30">
en daarvoor en daarna dus nog een heleboel andere velden. Maar als ik de manier heb om deze vier te laten vullen op bv alleen salescode of naam zodat de rest vanzelf gaat dan ben ik al een heel eind.
Gewijzigd op 01/01/1970 01:00:00 door Rob