[AJAX][JavaScript][PHP]Dynamiczne ładowanie danych do <SELECT> dropdown list(menu) Opcje

[ghastblood]

Witam,

może mnie ktoś nakierować jak powinno działać dynamiczne ładowanie danych do dropdown list(menu). W projekcie nad którym pracuję mam ustawienia w których podaje godzinę oraz stanowisko na którym ma znaleźć się człowiek o danej godzinie. Przez AJAX ładuje daną osobę otwierająć w divie kod z formularzami co ma wykonać na danym stanowisku i przy danej czynności są 2 selecty ze stanowiskie oraz godziną. Przekazanie danych przez get i załadowanie 3 pliku do diva mija się z celem. Jak mógł bym coś takiego wykonać?

Wydaję mi się że najlepiej było by pobrać wolne stanowiska oraz godziny do tablicy i przez ajax operować danymi z tablicy dla przykładu

1. Odbiór paczki | 10:00 | 12
2. Dostarczenie paczki | 11:00 | 1

czyli jak wybieram godzinę 10:00 to w select option pojawia mi się wolne stanowiska o tej godzinie. zmianna godziny na 9:00 spowoduje zmiane listy ze wolnymi stanowiskami. Najlepiej jak jeszcze kolorowało by wolne stanowiska na zielono a zajęte na czerwono.

[Turson]

http://turson.pl/blog/dynamiczne-zalezne-selecty/

[ghastblood]

http://turson.pl/blog/dynamiczne-zalezne-selecty/

hmm, o to chodziło tylko nie da rady się zrobić bez użycia pliku szukaj.php bo teraz to było by tak queue.php odwołuje się do pliku getUser.php a getUser.php do searchQueue.php

fajnie jak dało by się ograniczyć w ogóle do jednego pliku.

[Turson]

Teoretycznie w jednym pliku też się da. Wysyłasz POSTem np. $_POST['ajax'] i sprawdzasz

[PHP] pobierz, plaintext 
if(isset($_POST['ajax'])){
//pobierz dane, zwróć
die(); //kończy dalsze wykonywanie pliku
}
[PHP] pobierz, plaintext 

[ghastblood]

Wszystko ładnie pięknie do póki nie pojawiło się klika selectów z tej samej kategorii.

wybieram zawodnika i na podstawie danych z bazy danych generuje mi formularz.

np. zawodnik uczestniczy w 2 konkurencjach

to generuje mi 6 selectów

konkurencja1 | pawilon | godzina | stanowisko
konkurencja2 | pawilon | godzina | stanowisko

pawilon = select
godzina = select
stanowisko = select


żeby rozróżnić selecty można dodać tablice id="pawilon[id_konkurencji]" name="pawilon[id_konkurencji]"

tylko jak zrobić żeby kod js odczytywał z tablicy zmiane konkuretnego id

[PHP] pobierz, plaintext 
$(document.body).on('change', '#pawilon', function() { 
	$.ajax({
        type: 'POST',
        url: 'searchQueue.php',
        success: function(msg){
            $("#godziny").html(msg);
        }
    })
});
[PHP] pobierz, plaintext 

[Turson]

Przede wszystkim musisz zmienić id pawilon na klasę, ponadto dodać atrybut id_konkurencji, czyli

[HTML] pobierz, plaintext 
<select class="pawilon" id_konkurencji="wstaw tutaj id konkurencji">
[HTML] pobierz, plaintext 

w js pobierasz id:

[JAVASCRIPT] pobierz, plaintext 
$(document.body).on('change', '.pawilon', function() {
    var id_konkurencji = $(this).attr('id_konkurencji');
    $.ajax({
        type: 'POST',
        url: 'searchQueue.php',
        success: function(msg){
            $("#godziny").html(msg);
        }
    })
});
[JAVASCRIPT] pobierz, plaintext 

[ghastblood]

ok, ale teraz muszę kod html wyświetlić w odpowiednim selecie wiec jakoś var id_konkurencji muszę przekazać do odpowiedniego selecta

[Turson]

To znaczy chcesz do selecta wrzucić id_konkurencji czy odpowiedź z żądania ajaxa??

[ghastblood]

odpowiedz w select który odpowiada za konkretną konkurencje.

czyli skoro w pawilon mamy id_konkurencji="1"> to chcemy wyświetlić odpowiedz w select godziny id_konkurencji="1"> następnie jak wybierzemy godzinę to tak samo musimy przekazać odpwiedz do select stanowisko

[Turson]

No ok, ale w czym problem, bo poprzednie posty z przykładami o tym mówią

[ghastblood]

hmm poprzednie posty mówią o jasno określonych id selectów gdzie ma być załadowana odpowiedz u ciebie jest to id="modele" a u mnie godziny. Niby wystarczy zmienić nazwę ale co w przypadku gdy w formularzu musisz wybrać 3,4 lub 5 marek samochodów, modeli i koloru trzeba. Wydaje mi się że najlepszą opcją było by zastosowanie tablic czyli marka[], model[] i kolor[]. Jak było by do wybrania 5 marek to zawsze odpowiedz bedzie się pojawiała w pierwszym selekcie napodkanym przez skrypt. Jak zasotsuje nazwnictwo marka1, marka2 itd to dla każdego pola bede musiał mieć odpowiedni kod JS, a raczej na tym nie na tym a to polegać. Skoro cały formularz jest tworzony dynamicznie na podstawie danych z mysql to jakoś trzeba te pola rozrzóżniać z poziomu JS.

[Turson]

Opakuj selecty te które są na tym samym poziomie czyli teoretycznie np. marka i model w jednego diva, powiedzmy:

[HTML] pobierz, plaintext 
<div class="container">
<select class="marka"></select>
<select class="model"></select>
</div>
[HTML] pobierz, plaintext 

możesz mieć wtedy selecty z tą samą klasą a wybierając select, do którego załaduje odpowiednie opcje piszesz $(this).parent('.container').find('.model').html('<option>...');

[ghastblood]

hmm, chyba coś robię nie tak.

http://jsfiddle.net/CnAee/

[Turson]

http://jsfiddle.net/CnAee/1/
Generalnie kwestia zmiany this na that. error: function() dałem tylko dla testów

[ghastblood]

hmm, na jsfiddle działa jak zmienie URL na mój kod searchQueue.php kod przestaje działać. W firebugu w skrypt zostaje wywołany status 200 OK więc powinno dodać mi odpowiedzi z kodu js

Ten post edytował ghastblood 16.06.2014, 20:30:43

[Turson]

Przecież na jsfiddle jest

Kod

success: function(){
            $(that).parent('.container').find('.godziny').html("<option>10:00</option>");

czyli nie pobiera żadnej odpowiedzi

powinno

Kod

success: function(msg){
            $(that).parent('.container').find('.godziny').html(msg);

dla testów daj jeszcze np. alert(msg)

Ten post edytował Turson 16.06.2014, 20:36:00

[ghastblood]

poradziłem sobie jakoś dzięki wielki za pomoc jakoś nie mogłem sobie z tym poradzić teraz tylko muszę jakoś zrobić kolorowanie zajętych stanowisk na czerwono i fajnie jak przy wyborze godziny w nawiasie była by liczba wolnych stanowisk.

zapomniałem o bardzo ważnej rzeczy jaką jest sam zapis do bazy danych.


Wpadłem na taki pomysł.

[PHP] pobierz, plaintext 
$(document.body).on('submit', 'form', function() {
    var godzina = $(this).val();
    var that = this;
    $.ajax({
        type: 'POST',
        url: 'searchQueue.php?mode=add',
        data: {
			'zawodnik': $('.zawodnik').val(),
			'pawilon': $('.pawilon').val(),
			'godzina': $('.godziny').val(),
			'stanowisko': $('.stanowiska').val()
		},
		success: function(msg){
             $(".test").html(msg);
        }
    })
    return false;
});
[PHP] pobierz, plaintext 

Problem w tym że data przechwytuje pierwsze wartości z formularza.

[trueblue]

[HTML] pobierz, plaintext 
'zawodnik': $('.zawodnik option:selected').val(),
[HTML] pobierz, plaintext 

[ghastblood]

ajajaj. Sorki że nie wyjaśniłem dokładnie chodzi o to że formularz generuje kilka konterenów z 3 selectami

konkurencja1 | pawilon | godzina | stanowisko
konkurencja2 | pawilon | godzina | stanowisko

i z każdego selecta potrzebuje pobrać wartość

czyli $_POST['konkurencja1'],$_POST['pawilon1'],$_POST['godzina1'],$_POST['stanowisko1'],$_POST['konkurencja2'],$_POST['pawilon2'],$_POST['godzina2'],$_POST['stanowisko2']

w formularzu mam name='konkurencja[]' itd

[trueblue]

Tak?

[HTML] pobierz, plaintext 
'zawodnik1': $('.zawodnik:eq(0) option:selected').val(),
'zawodnik2': $('.zawodnik:eq(1) option:selected').val(),
'zawodnik3': $('.zawodnik:eq(2) option:selected').val(),
'zawodnik4': $('.zawodnik:eq(3) option:selected').val(),
[HTML] pobierz, plaintext