Editable dropdown-menu
Hieronder zal ik toelichten wat ik graag wil bereiken met het bovenstaande onderwerp.
Op mijn website heb ik een aantal dropdown-menu waar een waarde uit gekozen kan worden.
Het probleem waar ik nu tegen aanloop is dat wanneer een gebruiker voor de eerste keer gegevens gaat invoeren, dan is de dropdown-menu leeg en moet hij eerst op een ander pagina enkele gegevens invoeren, alvorens hij de onderstaande url kan gebruiken.
Ik ben op het net gaan zoeken naar mogelijk oplossingen en kwam snel achter het nieuwe HTML 5 element: datalist.
Ik ben direct aan de slag gegaan met datalist en statisch werkt het prima, maar dynamisch, dus icm PHP wil het nog niet lukken.
En, voordat ik me hier verder in verdiep wil ik graag jullie advies hebben en heb ik de volgende vragen:
1. Is het datalist element de juiste oplossing voor mij om een item toe te voegen aan leeg dropdown menu, waar vervolgens een gebruiker de waarde kan kiezen?
2. Of kan ik me beter richten op Ajax icm PHP?
3. of is een jQeury icm PHP een betere keuze?
4. of is er een betere oplossing?
URL: http://dev.pc-on-rails.nl/user_registration/med_insert.php
username: [email protected]
pass: test1
Alvast bedankt voor het meedenken.
Quote:
2. Of kan ik me beter richten op Ajax icm PHP?
3. of is een jQeury icm PHP een betere keuze?
3. of is een jQeury icm PHP een betere keuze?
Dit komt op het zelfde neer. AJAX is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver. Daardoor hoeven dergelijke pagina's niet in hun geheel ververst te worden. Dus je kan bijvoorbeeld na een klik op een knop, of een bepaalde tijd wachten je document die je opvraagt realtime invoegen zonder refreshes.
jQuery is niets meer dan een handig JavaScript Framework om DOM (de structuur van je HTML) aan te kunnen passen, en heeft ook ingebouwde AJAX-functionaliteit in een paar simpele regels.
Edit: datalists wordtn niet ondersteund in Safari. Dus als je een auto-complete wilt, kan je je je richten op jQueryUI, de uitbreidingsset van het jQUery-framework die een scala aan krachtige dynamische scripts kent.
Gewijzigd op 10/01/2017 20:26:07 door - Ariën -
Bedankt voor je reactie.
Uit je reactie kan ik dus opmaken, dat ik dus twee keuzes heb ipv 3, nl jQuery of het nieuwe element datalist van HTML 5. En, ik weet dat Safari datalist (nog) niet ondersteunt, maar andere grote browsers zoals Chrome, FF en IE ondersteunt het wel. Dus is de keuze snel gemaakt voor me.
Ook wil ik de ontwikkeling van mijn website eenvoudig houden, daar ik geen kennis en ervaring heb met jQuery.
Ik ga verder met data list en zal hier wat codes plaatsen voor feedback/issues.
Als er nog wat tips/tutorials zijn, dan hoor ik dat graag.
Tnx!
De autocomplete van jQueryUI is cross-browser compatibele en makkelijk te installeren als je op de site van jQueryUI zelf kijkt.
Gewijzigd op 11/01/2017 09:17:15 door - Ariën -
- Ariën - op 11/01/2017 08:46:02:
Dus iPad/iPhone gebruikers vallen buiten de boot, wist je dat?
De autocomplete van jQueryUI is cross-browser compatibele en makkelijk te installeren als je op de site van jQueryUI zelf kijkt.
De autocomplete van jQueryUI is cross-browser compatibele en makkelijk te installeren als je op de site van jQueryUI zelf kijkt.
Om eerlijk te zijn, heb ik niet gedacht aan iPad/iPhone gebruiker..
Dus dat is een goede.
Ik heb gezocht naar een jQuery autocomplete, want dit is wat ik moet hebben, toch? Maar er zijn te veel sites die het aanbieden en eigenlijk door de bomen zie ik het boos niet meer..
Is er een link/website die het eenvoudig/stap voor stap uitlegt wat ik moet doen en wat ik nodig heb om dynamisch een dropdown-menu aanmaakt en om zelf gegevens in te voeren als het nodig is?
Tnx!
- Ariën - op 11/01/2017 09:41:04:
Beste - Ariën -,
Ik heb gekeken naar die website, maar echt wijzer ben ik niet geworden.
Wanneer twee letters van een vogel intypt, dan krijg je wel een aantal opties. Dit is opzich wel goed, maar wat ik wil gaat verder dan dit en zal het hieronder toelichten:
1. Een gebruiker voert de naam van een medicijn in
2. Als de naam van het medicijn reeds bestaat in de DB, dan moet de naam van het medicijn als een optie voorkomen.
3. Het ingevoerde/gekozen naam wil ik straks opvangen met PHP en opslaan in de Mysql DB.
Hopelijk is mijn vraag nu duidelijk.
Tnx!
Die autocomplete krijgt zijn data uit een PHP-bestand die JSON output serveert:
In mijn geval hoe ik de data ophaal, werkt het dus als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
if (isset($_GET['term']) && $_GET['term'] != '') {
$sql = "SELECT afk AS afkorting, plaats
FROM plaatsen WHERE plaats LIKE('".$db->real_escape_string($_GET['term'])."%')
ORDER BY plaats";
$suggest_query = $db->query($sql);
$searchresults = array();
}
while($suggest = $suggest_query->fetch_assoc()) {
$searchresults[] = array(
"label" => utf8_encode($suggest['plaats']),
"id" => $suggest['afkorting']);
}
echo json_encode($searchresults);
?>
if (isset($_GET['term']) && $_GET['term'] != '') {
$sql = "SELECT afk AS afkorting, plaats
FROM plaatsen WHERE plaats LIKE('".$db->real_escape_string($_GET['term'])."%')
ORDER BY plaats";
$suggest_query = $db->query($sql);
$searchresults = array();
}
while($suggest = $suggest_query->fetch_assoc()) {
$searchresults[] = array(
"label" => utf8_encode($suggest['plaats']),
"id" => $suggest['afkorting']);
}
echo json_encode($searchresults);
?>
Gewijzigd op 11/01/2017 13:00:54 door - Ariën -
Sinds gisteren ben ik aan de slag gegaan met jquery voor mijn uitdaging/probleem.
En, omdat jouw suggestie niet helemaal duidelijk was ben ik wat gaan zoeken op YT en kwam het volgende YT-video tegen: https://www.youtube.com/watch?v=YqMtE8UO-xw.
De stappen die daarin worden uitgelegd heb ik gevolgd/uitgevoerd en ik krijg idd een pre-defind lijst, zoals men dat noemt :), uit de medicinescompany tabel uit de DB.
Echter, vind ik deze opzet niet praktisch/logisch en mijn probleem is niet volledig opgelost helaas:
1. suggest.php; doet een query in de DB voor betreffende form vakje, maar het zou mij logischer klinken om de code van dit bestand samen te voegen in med_insert.php, toch?
2. Momenteel worden alle bedrijfsnamen weergegeven, maar ik wil het kunnen selecteren en later opslaan in DB en volgens mij als de code van suggest.php ingevoerd wordt in med_insert, dan kan ik het me $_POST array opvangen toch en opslaan in DB?
3. Initieel wordt de pre-defined lijst niet weergegeven, maar een paar seconden later wel of na een refresh van het pagina. Volgens mij heeft een delay of een vertraging van een paar seconden. En, ik vraag me af of dit standaard gedrag van jQeury of heeft het te maken met trage verbinding hier?
4. Ook wil ik graag dat dat alleen de bedrijfsnamen worden weergegeven die enkel overeenkomen met de ingelogde gebruiker.
Indien je het wil, dan zal ik de alle gerelateerde code hier plaatsen.
Alvast bedankt voor het meedenken.
Gewijzigd op 12/01/2017 10:57:50 door Mohamed nvt
Mohamed nvt op 12/01/2017 10:51:56:
1. suggest.php; doet een query in de DB voor betreffende form vakje, maar het zou mij logischer klinken om de code van dit bestand samen te voegen in med_insert.php, toch?
Nee. Wat het zijn twee verschillende taken die worden uitgevoerd. Standaard haalt hij uit de datalist de namen op uit je database. Het invoeren in de database is een taak apart, en die kan je dan verwerken in med_insert.php. Het bestand om het op te halen zou je dan med_select.php kunnen noemen. Of alle AJAX-scripts in een overkoepelende ajax.php plaatsen met een GET-waarde om te bepalen welke taak je wilt doen... (ajax.php?action=med_select...). Net wat je makkelijk vindt.
Quote:
2. Momenteel worden alle bedrijfsnamen weergegeven, maar ik wil het kunnen selecteren en later opslaan in DB en volgens mij als de code van suggest.php ingevoerd wordt in med_insert, dan kan ik het me $_POST array opvangen toch en opslaan in DB?
Is het de bedoeling dat je meerdere dingen kan selecteren in een text-veld?
Want dan moet je een andere interface hebben zodat je ze kan selecteren, waarna ze in beeld blijven waarna je de rest op kan zoeken. Voor een gelijkwaardig project gebruik ik overigens TagIt.
Ik heb geen idee of je dit bedoelt, maar je kan er een auto-complete aan hangen.
Quote:
3. Initieel wordt de pre-defined lijst niet weergegeven, maar een paar seconden later wel of na een refresh van het pagina. Volgens mij heeft een delay of een vertraging van een paar seconden. En, ik vraag me af of dit standaard gedrag van jQuery of heeft het te maken met trage verbinding hier?
Ik merk er in het algemeen weinig traags aan, je zou in de Web Developer tools van je browser kunnen kijken naar de laadtijd die er ontstaat bij het aanroepen van je script via AJAX.
Quote:
4. Ook wil ik graag dat dat alleen de bedrijfsnamen worden weergegeven die enkel overeenkomen met de ingelogde gebruiker.
Dat kan, aan de hand van het sessiesysteem of wat jij maar gebruikt om inlog-sessie mee te onthouden, kan je prima de selectie afstemmen op een bepaald persoon.
Quote:
maar het zou mij logischer klinken om de code van dit bestand samen te voegen in med_insert.php, toch?
Mogelijk in tegenstelling tot wat eerder gesuggereerd werd is het prima mogelijk en lijkt het mij ook verstandig en wenselijk om alle acties die betrekking hebben op een script onder te brengen in dat script. Je moet er echter wel voor zorgen dat deze acties in afzondering aanspreekbaar zijn. Hier heb ik je ook al eerder op attent gemaakt.
Quote:
Initieel wordt de pre-defined lijst niet weergegeven, maar een paar seconden later wel of na een refresh van het pagina. Volgens mij heeft een delay of een vertraging van een paar seconden
Bij autocompletes is het sowieso verstandig om een kleine timeout te hebben tijdens het typen voordat er een request uitgaat voor de getypte term want elk request resulteert in één, of zeer waarschijnlijk meerdere, queries.
Als dit nog steeds traag is na het verlagen of verwijderen van enige timeout zul je eens moeten gaan kijken waar deze vertraging vandaan komt. Zijn bijvoorbeeld de (tekstuele) kolommen waar je op zoekt geïndexeerd?
(wederom) Breek dit alles eens letterlijk en figuurlijk in verschillende stukken.
Gewijzigd op 12/01/2017 15:14:39 door Thomas van den Heuvel