[PHP][CSS][JavaScript]Problem z Jquery i checkboxami. Opcje

[Kużdo]

Witam,

Przygotowuję dla użytkowników grafik na stronie i mam kilka problemów. Jednym z nich jest sposób zapisu danych. Opcji jest 49 + "Nie wybrano żadnej opcji". Na początku myślałem o zapisie w postaci dwójkowej, coś co opisywał nospor, ale przy takiej liczbie opcji jest to dosyć uciążliwe, dlatego postanowiłem zapisywać wybór w postaci ciągu liczb rozdzielonych przecinkiem. I tak opcja 1 = 1, opcja 2 = 2, opcja 5 = 5 aż do opcji 49-tej, która ma wartość 49. Dlaczego tak? Ponieważ grafik jest tabelą podzieloną na 8 kolumn i 8 wierszy. 7 kolumn definiuje każdy dzień tygodnia, a 7 wierszy kilka przedziałów czasowych do wyboru. Więc użytkownik ma do wyboru 49 opcji do zaznaczenia (czy chce coś robić w tym przedziale czasowym danego dnia, czy nie). Pola są typu input checkbox, więc jeżeli się go nie zaznaczy, to wartość nie jest wysyłana. Nie mógłbym więc zapisywać do bazy wartości w postaci "0,1,1,1,0,0,0," itd. bo tych zer nie byłoby. Dlatego postanowiłem zapisywać to w takiej postaci jaką przedstawiłem. I tu jest pierwsze pytanie - może ktoś zna lepszy sposób zapisu takich opcji?

Kolejna rzecz wiąże się już z samym CSSem i JSem. Chciałem zmodyfikować wygląd checkboxów, bo te standardowe to jakoś nie tak wyglądają w całej tej tabeli. No więc z pomocą przyszedmi (teoretycznie) jQuery UI i jego widget "button" (http://jqueryui.com/demos/button/#checkbox). Problem w tym, że ja na JS znam się naprawdę minimalnie, a po drugie, można tutaj definiować buttony tylko na podstawie id. Co za tym idzie, musiałbym zrobić 49 inputów z różnymi ID (to nie jest problem) i 49 wpisów typu:

Kod

$( "#check1" ).button();
$( "#check2" ).button();
$( "#check3" ).button();

itd.

Więc byłoby bardzo miło gdyby ktoś pomógł zrobić to w jakiś ładny i dobry sposób, bo przy ew. zmianie, będzie dużo do zmieniania, a takich sytuacji powinno się unikać.
Dodam, że użycie buttonset() nic nie da, bo ustala on jeden przycisk z umieszczonych w jednym miejscu inputów. A tutaj niestety mam tabelę 8x8, więc to nie przejdzie.

Z góry dziękuję za odpowiedzi.

Pozdrawiam.

Ten post edytował Kużdo 22.09.2011, 14:17:43

[!*!]

Czyli że o co Ci się rozchodzi? Pokaż kod.

Co do JQ to nie musisz nic powielać, wystarczy że zrobisz $('input').button(); czyli określisz typ pola. I zostanie on przypisany dla wszystkich.

Ten post edytował !*! 22.09.2011, 12:34:29

[Kużdo]

Czytanie ze zrozumieniem?
Mam tabelę, 8 kolumn i 8 wierszy. 7 kolumn i 7 wierszy wypełnione jest inputami typu checkbox. Żeby zadziałało jQuery UI button musiałbym każdemu z nich nadać id i w części head dać:

Kod

<script type="text/javascript">
$(function() {
    $( "#id1" ).button();
    $( "#id2" ).button();
    $( "#id3" ).button();
    (...)
    $( "#id47" ).button();
    $( "#id48" ).button();
    $( "#id49" ).button();
});
</script>

Co jest uciążliwe jeśli będzie trzeba później coś zmieniać. Chciałbym aby zamienianie checkboxów na customowe odbywało się bardziej dynamicznie => Jeśli jest 10 inputów, to mają się zamienić; dodam kolejne 4 >> zamieniają się w customowe. Bez modyfikacji części head itp.

Dla osób, które jednak muszą to przeczytać w wersji HTML: http://jsfiddle.net/bGbSJ/2/

//Komentarz do edycji postu wyżej:
OK, zadziała to na standardowe inputy na stronie, ale nie zadziała na inputy w tabeli. Dlaczego? Tego nie wiem. Możliwe, że przeszkadza tu ta sama nazwa dla każdego inputa "zaznaczone[]". Tak czy siak, jeśli już zrobię coś takiego w sposób globalny, to zazwyczaj dochodzi do erroru przeglądarki "Skrypt wykonywał się za długo, czy przerwać go, ble ble"... A tego raczej nie chcemy.

Ten post edytował Kużdo 22.09.2011, 13:16:12

[!*!]

Czytanie ze zrozumieniem?

A o poprawnym zadaniu pytania i opisie słyszał?

Nie mógłbym więc zapisywać do bazy wartości w postaci "0,1,1,1,0,0,0," itd. bo tych zer nie byłoby.

Niby dlaczego?

Odwołania w jQ są takie same jak w css $(table input).cos(); Link

Ten post edytował !*! 22.09.2011, 13:48:52

[Kużdo]

Przeczytaj ze zrozumieniem mój pierwszy post to może zrozumiesz. Tak i to jest odpowiedź na Twoje pierwsze pytanie.

Co do drugiego pytania. W jaki sposób chcesz zapisać wartość 0, skoro w tablicy POST nie będzie zmiennej, która nie została zaznaczona? Zaznaczam, że wszystkie pola mają tę samą nazwę => "zaznaczone[]" Identyfikacja pól po nazwie odpada, więc w jaki sposób chciałbyś sprawdzić które pole jest zaznaczone, a które nie, jeśli każde pole zawierałoby wartość "1" dla zaznaczonego? Jeśli użytkownik nie zaznaczy checkboxa, to ten nie jest dodawany do POSTa. Więc w ostateczności dostajesz wynik:

Kod

zaznaczone[1] = 1;
zaznaczone[2] = 1;
zaznaczone[3] = 1;

Więc nie masz zielonego pojęcia, którą wartość zaznaczył użytkownik. Chyba, że znasz inny jeszcze sposób.

Co do "jQuery UI button", to działa on w dziwny sposób. Dla każdego inputa potrzebuje dodatkowo etykietę, ale przypisaną do ID pola. Nie może być to <label><input></label>, bo nie zadziała. Jeśli chcesz buttonem zrobić coś innego niż inputa np. całą tabelę, to nie potrzebuje on żadnych dodatkowych parametrów. Z tabeli robi button i jako napis na nim znajduje się zawartość tabeli. Przygotowałem kod do testów więc proszę bardzo:
Z wyłączonym JS: http://jsfiddle.net/jnGSZ/
Z włączonym JS po klasach i identyfikatorach: http://jsfiddle.net/jnGSZ/1/
Z włączonym JS po typie pola: http://jsfiddle.net/jnGSZ/2/
Z włączonym JS po identyfikatorze tabeli: http://jsfiddle.net/jnGSZ/3/

Widget działa tylko w przypadku inputa o id="id2", więc widać, że etykieta musi być dołączona przez ID do elementu. Pisałem też o tym w pierwszym poście, że buttony można zdefiniować tylko poprzez ID. Prawdopodobnie da się zmienić coś w JS, żeby działało to lepiej, ale ja w JS jestem zero, więc sam sobie rady nie dam.

Pozdrawiam.

Ten post edytował Kużdo 22.09.2011, 18:14:34

[!*!]

Przeczytałem, nawet 3 razy i nadal twierdzę że nie potrafisz poprawnie tego ująć i że jest to dość chaotyczne.

http://jsfiddle.net/jnGSZ/5/

z Jq UI faktycznie coś jest nie tak... te przyciski nawet nie działają poprawnie pod operą... tak czy inaczej, musisz dla każdego pola przypisać ID, tak aby label też go widział... inaczej nie da rady.

[Kużdo]

No i tak chyba będę musiał zrobić jednak odstrasza te 49 wpisów w JS... Myślałem o jakiejś pętli w JS do obsługiwania kolejnego id inputa, ale że nie znam się na JS to nie mam pojęcia jak to rozwiązać.

[kpt_lucek]

Problem zdaje się być rozwiązany poprzez rozmowę poza forum.

Testowo oraz dość chaotycznie popełniłem taki skrypt. Działa mniej więcej tak jak miało by to wyglądać:
Mniej więcej finalny skrypt

Tłumaczę zasadę działania,
Widzimy tabelkę 7x7, w każdym polu znajduje się obrazek odpowiednio PLUS bądź MINUS. Zasada działania jest taka iż po kliknięciu na dany obrazek zmienia się on na jego przeciwieństwo a co za tym idzie dostarcza parametr do kodu bądź nie. Po kliknięciu "Wyślij" ciąg jest zapisywany w bazie, tak aby podczas ponownego go otwarcia widoczny był ostatni zapis.

Funkcjonalność mam nadzieję finalna (oczywiście po rozmowie z autorem owego topicu). Mam nadzieję że pomogło, w razie potrzeb dla potomnych kod mam cały czas na dysku.

Pozdrawiam

Ten post edytował kpt_lucek 23.09.2011, 04:39:09

[Kużdo]

Wielkie dzięki za wczorajszą pomoc ;) Co prawda pierwotnie chciałem robić to bez ajaxa, ale przy założeniu że będzie trzeba zrobić np. 49 wpisów w JS zmieniających checkboxy na ładne buttony, to rozwiązanie jest po prostu idealne (przynajmniej obecnie ;D)

luckowi należy się flacha za robotę, bo testował dość dużo rozwiązań z dużą ilością JSa, którego ja nie znam więc sam nigdy nie zrobiłbym czegoś takiego ;D