Select gegevens uit JQuery variabele
ik zit hier met een probleem, waarschijnlijk is de oplossing even eenvoudig als de vraag, maar ik kom er niet uit :|
Ik heb op een webpagina een autocomplete staan, met heel wat mogelijke gegevens (variabele availableTags). Bij implementatie werkt dit perfect.
Nu ik wil daarnaast ook een button maken, waarmee men kan doorgaan.
Bedoeling is dat indien men hierop klikt, de id geselecteerd word.
Stel dus ik vul in "Ami Bia", dan moet uit de variabele availableTags de bijhorende id (5094301) geselecteerd worden.
Hieronde het script van de auto-complete, welke werkt.
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
$(function() {
var availableTags = [
{
label: "Ami Bia",
value: "2002-02-04",
id: "5094301"
},{
label: "An Lae",
value: "2002-07-14",
id: "5055975"
},...*KNIP*
*KNIP*...,{
label: "Wa Ze",
value: "2003-05-16",
id: "5074982"
},
];
$( "#tags" ).autocomplete({
minLength: 2,
source: availableTags,
focus: function( event, ui ) { return false; },
select: function( event, ui ) {
$( "#tags" ).val( ui.item.label );
$( "#results").text(ui.item.id);
$.post("post-gegevens.php", { lifenummer: ui.item.id }, function(data) {
$('#stap2').append(data);
$(".stap2").show("slow");
$(".stap1").hide("slow");
});
return false;
}
});
});
var availableTags = [
{
label: "Ami Bia",
value: "2002-02-04",
id: "5094301"
},{
label: "An Lae",
value: "2002-07-14",
id: "5055975"
},...*KNIP*
*KNIP*...,{
label: "Wa Ze",
value: "2003-05-16",
id: "5074982"
},
];
$( "#tags" ).autocomplete({
minLength: 2,
source: availableTags,
focus: function( event, ui ) { return false; },
select: function( event, ui ) {
$( "#tags" ).val( ui.item.label );
$( "#results").text(ui.item.id);
$.post("post-gegevens.php", { lifenummer: ui.item.id }, function(data) {
$('#stap2').append(data);
$(".stap2").show("slow");
$(".stap1").hide("slow");
});
return false;
}
});
});
Hieronder het basisscript van de drukknop, maar deze is dus nog onvolledig
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$('.Submitstap1').click(function() {
var gegevens = $("#ui-id-1").text();
$.post("post-gegevens.php", { naam : gegevens }, function(data) {
$('#stap2').append(data);
$(".stap2").show("slow");
$(".stap1").hide("slow");
})
return false;
});
});
var gegevens = $("#ui-id-1").text();
$.post("post-gegevens.php", { naam : gegevens }, function(data) {
$('#stap2').append(data);
$(".stap2").show("slow");
$(".stap1").hide("slow");
})
return false;
});
});
Hopelijk helpen jullie me verder met dit probleem, want geen enkele website op het wereldwijde web kon me helpen....
Alvast bedankt!
* edit: Code-tags aangepast
** Alle code's die gepost zijn, werken op mijn localhost, dus moest er toevallig een ;/)/} ontbreken, ligt het aan mijn copy/paste kwaliteiten ;--
Gewijzigd op 16/01/2013 14:29:21 door Olivier Peeters
Daar kan je ze ook opnieuw lezen, bij het klikken op de knop.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$('.Submitstap1').click(function() {
var gegevens = $("#ui-id-1").text();
$.post(
"post-gegevens.php",
{
naam : gegevens,
lifenummer: $("#results").text()
},
...
var gegevens = $("#ui-id-1").text();
$.post(
"post-gegevens.php",
{
naam : gegevens,
lifenummer: $("#results").text()
},
...
als ik dit test werkt dit niet ($_POST[lifenummer] = ""). Ik denk dat de results enkel gevuld wordt indien men klikt op de autocomplete-lijst....
Allezinds, het zal op een andere manier moeten dus :-(
Olivier Peeters op 16/01/2013 15:24:55:
... Ik denk dat de results enkel gevuld wordt indien men klikt op de autocomplete-lijst ...
Wel ja.
Eerst wordt een item van de lijst geselecteerd.
Dan komt dat resultaat in een div (of iets anders...)
Die waarde in de div wordt gelezen
Uiteraard betekent dit dat de gebruiker eerst een item van de autocomplete lijst moet selecteren.
Zie jij dit anders?
Of anders snap ik niet precies wat je laatste probleem is.
En bij klikken moet dan uit de Jquery array de juiste lifenumemr (id dus) geselecteerd worden.
Snap jae (of is het nog steeds onduidelijk)?
De gebruiker typt exact iets wat in de lijst staat, maar klikt niet op het item.
Je wil dan toch de id hebben (alsof de gebruiker wel had geklikt).
Indien de gebruiker iets typt dat niet exact overeen komt met een item, moet er geen id worden doorgestuurd.
Is dit de bedoeling?
---
Iets anders:
Wanneer de gebruiker een item aanklikt, ga je de id onmiddellijk doorsturen.
Blijft dit de bedoeling?
In dat geval zou het dus niet de bedoeling zijn dat de gebruiker nog op de knop kan drukken; anders wordt die id mogelijks twee keer doorgestuurd.
---
Zie ik het nu juist?
het 1e deel klopt.
Inderdaad, als er geklikt wordt op een item zal er eveneens doorgestuurd worden. Maar ik het de functie zodanig gemaakt de dat knop verdwijnt (& disabled) vanzodra er iets word doorgestuurd. Men zou dus, theoretisch , maar een keer gegevens kunnen doorsturen.
Vriendelijke groeten,
Olivier Peeters
JQueryUI autocomplete zal zelf alleen het id updaten als er met de muis op een option geklikt wordt. (of met de pijltjes toetsen en dan enter of met tab)
bij de api staan echter een aantal option methodes beschreven waarmee je volgens mij je doel kunt bereiken.
dit is de url:
http://api.jqueryui.com/autocomplete/#method-option
Ik denk dat je deze method zult moeten aanroepen nadat de gebruiker op de button klikt en alvorens het formulier verder te verzenden/af te handelen.
Groet Frank
Gewijzigd op 19/01/2013 13:45:17 door Frank Nietbelangrijk
van harte dank voor jou hulp, maar ik ben niet zo vertrouwd met al die APi's. Heb hier vroeger ook neit veel van begrepen, dus ik weet echt niet hoe dit te begrijpen/toe te passen.
Heb ook al wat gegoogled maar dat helpt echt niet (*).
Alvast bedankt
Vriendelijke groeten,
Olivier Peeters
(*) Ik heb al enkele dingen geprobeerd, niets werkte. Hopelijk kom ik niet over als iemand die iets voorgekauwd moet krijgen, maar gewoon een hulp om te starten is al voldoende? =)