[jQuery Select2] Select2 box populaten i.p.v. normale select

[Verwijderd]

Om een normale selectbox te vullen, gebruikt ik onderstaande code. Met de waarden uit 3 andere inputboxen doe ik bij een change een query en dan krijg ik een stukje HTML met options terug om de selectbox te vullen. En dat werkt perfect.

code:

$("#selectbox").load("querymet3variabelen.php?kid=" + $("#veld1").val() + "&pid=" + $("#veld2").val() + "&jid=" + $("#veld3").val() );

Maar nu wil ik er een Select2 box van maken. En dat geeft nogal problemen. Ik ben er al de hele dag mee bezig maar kom er niet uit. Als ik hem zo laat staan, dan wordt de Select2 niet goed gevuld. Ik zie wel resultaten, maar pas als ik op de pulldown klik. En als ik zoiets als onderstaand doe, dan zie ik helemaal niets meer.

code:

$("#selectbox").select2({
  ajax: { 
    url: "querymet3variabelen.php?kid=" + $("#veld1").val() + "&pid=" + $("#veld2").val() + "&jid=" + $("#veld3").val(),
    dataType: 'json'
  }
});

Weet iemand raad?

[jd2210]

Dag Slingeraap,

misschien dat je iets hebt aan deze tutorial:

http://www.southcoastweb.co.uk/jquery-select2-ajax-tutorial/

[ Voor 106% gewijzigd door jd2210 op 10-02-2015 16:58 ]

[R4gnax]

Waarom in hemelsnaam een treinwrak als select2 gebruiken?
Gebruik en style een gewone select tag zo degelijk als je kunt en houdt het daarbij.

Heb je een flinke lijst opties die zo groot wordt dat je die met AJAX moet gaan vullen en een searchfilter box toe moet gaan voegen, dan heb je een heel ander probleem en is een dropdown list sowieso vanuit UX gezien niet meer de correcte keuze.

[Verwijderd]

@ jd2210: Nee helaas, daar had ik niets aan. Krijg het niet aan de praat helaas.
Ik zie zoals gezegd wel mijn resultaten in de Select2 pulldown verschijnen, maar het eerste resultaat van de vorige keer blijft hij altijd bovenin laten zien. (en dat is niet een placeholder).

@ R4gnax: Ja het lijkt wel een beetje overkill met alle code en functies, die Select2. En erg omslachtig blijkbaar, althans voor mijn doeleinden. Maar het leek me zo mooi... Mijn dropdown kan 3 resultaten bevatten maar ook 1000. En ik zou niet weten hoe ik dat anders in mijn webform zou moeten aanpakken. Er moet in mijn formulier toch echt een keuze uit die resultaten gemaakt worden. En dan zoeken door een paar letters te typen lijkt me ideaal. Maar als je iets beters weet, altijd welkom...

Maar hoe moeilijk kan het zijn? Voor mij erg moeilijk want ik heb er naast gisteren nu ook weer 4 uur tevergeefs aan gezeten. Het enige dat binnenkomt na de query is zoiets als:
<option>joehoe</option>
<option>joehoe2</option>
<option>joehoe3</option>
En dat zou dan de nieuwe inhoud van de Select2 moeten worden.

Met een normale select werkt dat zoals gezegd perfect. Met Select2 helaas nog niet...

[Merethil]

Verwijderd schreef op woensdag 11 februari 2015 @ 02:57:
@ jd2210: Nee helaas, daar had ik niets aan. Krijg het niet aan de praat helaas.
Ik zie zoals gezegd wel mijn resultaten in de Select2 pulldown verschijnen, maar het eerste resultaat van de vorige keer blijft hij altijd bovenin laten zien. (en dat is niet een placeholder).

@ R4gnax: Ja het lijkt wel een beetje overkill met alle code en functies, die Select2. En erg omslachtig blijkbaar, althans voor mijn doeleinden. Maar het leek me zo mooi... Mijn dropdown kan 3 resultaten bevatten maar ook 1000. En ik zou niet weten hoe ik dat anders in mijn webform zou moeten aanpakken. Er moet in mijn formulier toch echt een keuze uit die resultaten gemaakt worden. En dan zoeken door een paar letters te typen lijkt me ideaal. Maar als je iets beters weet, altijd welkom...

Maar hoe moeilijk kan het zijn? Voor mij erg moeilijk want ik heb er naast gisteren nu ook weer 4 uur tevergeefs aan gezeten. Het enige dat binnenkomt na de query is zoiets als:
<option>joehoe</option>
<option>joehoe2</option>
<option>joehoe3</option>
En dat zou dan de nieuwe inhoud van de Select2 moeten worden.

Met een normale select werkt dat zoals gezegd perfect. Met Select2 helaas nog niet...

Bedenk ook: Ik heb Select2 nog nooit netjes zien werken op een telefoon of tablet. De standaard select-tags worden netjes gerendered zoals het OS het bedoelt heeft, met standaard controls zodat scrollen e.d. ook echt mogelijk is. Select2 doet het... Minder goed in dat opzicht...

[Verwijderd]

Dat van telfoon of tablet is niet zo'n heel groot probleem Merethil, want de web app waarmee ik bezig ben zal voor 99,9% op een desktop gebruikt gaan worden. Althans, dat is de bedoeling. En de scrollbalk werkt goed (genoeg) in de Select2, het doet gewoon wat het moet doen, ook via de pijltjestoetsen.

Maar of ik de Select2 er nu wel of niet in ga houden, het begint nu meer een principekwestie te worden dat ik het werkend wil hebben. Eergisteren 2 uur ermee gezeten en gisteren 4 uur. Ik probeer het nog een dagje...

[jd2210]

nog eventjes gegoogled en er is een github pagina vol met voorbeelden en demo's

ik denk dat het onderdeel loading remote data je wel van pas kan komen.
dan kan je het overnemen en er een beetje mee spelen om te zien hoe het nou precies in elkaar steekt:

https://select2.github.io/examples.html

Al moet ik me wel aansluiten bij Merethil steeds meer websites worden via de tablet en smartphone bezocht.
ook heb ik het idee dat je jezelf hiermee aardig wat problemen op de hals kan halen.

zeker aangezien het op onze grote vriend ie8 non functioneel is en op ie9 ook niet volledig functioneert.
Ik zou zeker aanraden om het op cross-compatibiliteit te testen als je verder wilt gaan met dit pad.

als de onderstaande bewering correct is:

Initialize Select2 on the <select> element that you want to make awesome.

code:

<script type="text/javascript">
  $('select').select2();
</script>

zou je mogelijk ook eerst je select kunnen vullen en daarna je select2 erop initieren(indien je je data maar éénmalig hoeft op te halen).

[ Voor 20% gewijzigd door jd2210 op 11-02-2015 11:30 ]

[Verwijderd]

Dank je, jd2210. Ik vind de examples op Github nogal vaag. Maar ik ga vandaag de hele dag nog proberen. Ook die tutorial die je eerder postte zal ik nog doorlopen.

Ik heb er vanmorgen ook nog ermee zitten klooien en ben er achter gekomen dat Select2 de data alleen in json kan verwerken. En ik doe een output in normale HTML dus daar zit sowieso een probleem. Ik zal die output eerst naar json moeten overzetten wil het uberhaupt gaan lukken.

Eerst de select vullen en daarna Select2 erop loslaten ging niet lukken in mijn geval.

Nog een aanvulling: mijn web applicatie is alleen voor mensen van het intranet beschikbaar. Inloggen zal dus altijd op de desktop gebeuren, niet op een telefoon of tablet. Daarnaast zou IE8 ook moeten worden ondersteund door Select2, maar die onveilige browser ondersteun ik zelf niet meer. Mijn web app is compatible vanaf IE9 en andere browsers. Verder geen exotische dingen met Select2 behalve wat data vullen en dan zou hij gewoon moeten werken. Als ik hem aan de praat krijg tenminste.

[Merethil]

Verwijderd schreef op woensdag 11 februari 2015 @ 12:44:
Dank je, jd2210. Ik vind de examples op Github nogal vaag. Maar ik ga vandaag de hele dag nog proberen. Ook die tutorial die je eerder postte zal ik nog doorlopen.

Ik heb er vanmorgen ook nog ermee zitten klooien en ben er achter gekomen dat Select2 de data alleen in json kan verwerken. En ik doe een output in normale HTML dus daar zit sowieso een probleem. Ik zal die output eerst naar json moeten overzetten wil het uberhaupt gaan lukken.

Eerst de select vullen en daarna Select2 erop loslaten ging niet lukken in mijn geval.

Nog een aanvulling: mijn web applicatie is alleen voor mensen van het intranet beschikbaar. Inloggen zal dus altijd op de desktop gebeuren, niet op een telefoon of tablet. Daarnaast zou IE8 ook moeten worden ondersteund door Select2, maar die onveilige browser ondersteun ik zelf niet meer. Mijn web app is compatible vanaf IE9 en andere browsers. Verder geen exotische dingen met Select2 behalve wat data vullen en dan zou hij gewoon moeten werken. Als ik hem aan de praat krijg tenminste.

Maar wat is er mis met het normaal maken van een selectbox en daarna dit draaien nadat je selectbox is gevuld:

JavaScript:

$(document).ready(function() {
  $("#id_van_je_selectbox").select2();
});

Dat lijkt me de makkelijkste manier, is ook wat ze aangeven in de examples op github.

[Verwijderd]

Bij het openen van het formulier staat de Select2 er al met de standaard ingevulde waarden uit de database.

Als ik in een andere checkbox iets verander, dan gaat via jquery change de Select2 box nieuwe data ophalen. Het is dan al een Select2 box (geweest). Ik heb het net geprobeerd en ook als ik eerst

code:

$("#id_van_je_selectbox").select2("destroy");
$("#id_van_je_selectbox").load("querymet3variabelen.php?kid=" + $("#veld1").val() + "&pid=" + $("#veld2").val() + "&jid=" + $("#veld3").val() );
$("#id_van_je_selectbox").select2();

doe en hem daarna aanmaak, dan laat ie als eerste resultaat nog steeds het eerste resultaat bij openen van de pagina zien. In de pulldown onder het zoekveld staan wel de goede nieuwe waarden. Dus eigenlijk ben ik dan nog steeds op het punt van mijn eerste post. Misschien is het alleen een refresh probleem van het eerste record (misschien blijft dat als placeholder hangen in Select2?) en moet ik een placeholder meegeven wanneer de nieuwe query binnenkomt. Desnoods "Maak een keuze uit onderstaande" of "Geen records gevonden" indien er niets binnenkomt.

[Merethil]

Verwijderd schreef op woensdag 11 februari 2015 @ 13:11:
Bij het openen van het formulier staat de Select2 er al met de standaard ingevulde waarden uit de database.

Als ik in een andere checkbox iets verander, dan gaat via jquery change de Select2 box nieuwe data ophalen. Het is dan al een Select2 box (geweest). Ik heb het net geprobeerd en ook als ik eerst

code:

$("#id_van_je_selectbox").select2("destroy");
$("#id_van_je_selectbox").load("querymet3variabelen.php?kid=" + $("#veld1").val() + "&pid=" + $("#veld2").val() + "&jid=" + $("#veld3").val() );
$("#id_van_je_selectbox").select2();

doe en hem daarna aanmaak, dan laat ie als eerste resultaat nog steeds het eerste resultaat bij openen van de pagina zien. In de pulldown onder het zoekveld staan wel de goede nieuwe waarden. Dus eigenlijk ben ik dan nog steeds op het punt van mijn eerste post. Misschien is het alleen een refresh probleem van het eerste record (placeholder) en moet ik een placeholder meegeven wanneer de nieuwe query binnenkomt. Desnoods "Maak een keuze uit onderstaande" of "Geen records gevonden" indien er niets binnenkomt.

Waarom laat je de selectbox steeds wijzigen qua inhoud dan?

Edit: Ah dat staat natuurlijk ook in je startpost. Hmmm.. Ik zou zelf de hele selectbox verwijderen, nieuwe selectbox aanmaken en die weer naar een select2 omvormen, als het niet lukt om het ding leeg te gooien en opnieuw te vullen. Misschien minder clean, maar werkt wel vrij rap lijkt me.

[ Voor 10% gewijzigd door Merethil op 11-02-2015 13:14 ]

[Verwijderd]

Omdat de inhoud van de Select2 box afhankelijk is van de gekozen waarde uit een andere selectbox.

Edit: Ja, dat heb ik net nog geprobeerd met die 3 regels. Geen verschil met eerst. Vreemd genoeg verschijnt steeds het eerste record uit de allereerste query nog bovenin. Ik ga eens proberen met een placeholder.

[ Voor 52% gewijzigd door Verwijderd op 11-02-2015 13:21 ]

[Merethil]

Verwijderd schreef op woensdag 11 februari 2015 @ 13:14:
Omdat de inhoud van de Select2 box afhankelijk is van de gekozen waarde uit een andere selectbox.

Edit: Ja, dat heb ik net nog geprobeerd met die 3 regels. Geen verschil met eerst. Vreemd genoeg verschijnt steeds het eerste record uit de allereerste query nog bovenin. Ik ga eens proberen met een placeholder.

Nee je doet nu een destroy in select2 (select2("destroy")). Ik zou zelf gewoon het hele element verwijderen en opnieuw opbouwen.
Het leeghalen van je select2-box kan beter met

JavaScript:

$('#id_van_je_select2').select2('data', null);

Met dezelfde code kan je ook je gegevens inladen lijkt me.

[ Voor 4% gewijzigd door Merethil op 11-02-2015 13:33 ]

[Verwijderd]

Merethil schreef op woensdag 11 februari 2015 @ 13:26:
[...]


Nee je doet nu een destroy in select2 (select2("destroy")). Ik zou zelf gewoon het hele element verwijderen en opnieuw opbouwen.
Het leeghalen van je select2-box kan beter met

JavaScript:

$('#id_van_je_select2').select2('data', null);

Met dezelfde code kan je ook je gegevens inladen lijkt me.

Okee thanks, ik zie nu dat dit beter werkt ja. De 1e entry die bovenin bleef hangen is nu eindelijk compleet weg!

Alleen na opnieuw laden van de Select2 is de eerste regel die je ziet blanco. Daaronder de Select2 zoekbox en daarna pas de resultaten. Normaal staat in die eerste regel het 1e resultaat of het geselecteerde resultaat.

Maar het lijkt wel een cache probleem ofzo. Of er moet iets ververst worden. Wanneer ik nu weer iets verander in de pulldown waarvan deze Select2 afhankelijk is, dan laat ie toch weer het laatste resultaat van de vorige bovenin zien. Ook al wordt met change de select2box leeggehaald elke keer.

Edit: met nog een stukje extra code eronder

code:

$('#id_van_je_select2').select2('data', null);
$('#id_van_je_select2').val(null);

wordt het achterblijvende resultaat vervangen door blanco. Maar je hebt dus wel nog de eerste regel van de pulldown blanco. Daaronder de resultaten wel netjes onder elkaar.

Misschien heeft het met de CSS style class te maken ofzo, die altijd in de html erbij staat bij de select div...Of er gaat toch iets niet helemaal goed met de data bij omzetten van normale select naar select2 (omdat select2 de data blijkbaar als json wil hebben ofzo? dat dan de eerste regel blanco is?)

Ik probeer het nog tot 18:00 uur en anders geef ik het maar op...

[ Voor 25% gewijzigd door Verwijderd op 11-02-2015 14:11 ]

[jd2210]

vraagje:

is het mogelijk om misschien een korte jsfiddle te maken van wat je precies probeert te bereiken.

dan kunnen we misschien nog wat gerichter meekijken naar wat het precies is waarop je vastloopt.
en wat gerichter meedenken.

http://jsfiddle.net/

alleen indien het je niet te veel tijd kost natuurlijk.

[Verwijderd]

Hoi, het duurde een tijdje maar hier een voorbeeld: http://jsfiddle.net/agL9d0vf/4/

Ook al komen er goede waarden mee met de HTML vanaf de externe pagina, in een normale selectbox gaat het dan goed, maar in een select2 box blijft de eerste entry leeg (en dat is verwarrend want dan lijkt het net of er helemaal niets in zit).