[PHP][AJAX] Ładowanie kategorii do selecta Opcje

[d.stp]

Próbuje zrobić wybór kategorii zależny od wyboru poprzedniego selecta. Mam formularz:

[HTML] pobierz, plaintext 
<select name="cats">
<option value="1">test</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
</select>
[HTML] pobierz, plaintext 

i ajax:

[HTML] pobierz, plaintext 
function showCats(str) {
		if (str == "") {
			document.getElementById("txtHint").innerHTML = "";
			return;
		} else { 
			if (window.XMLHttpRequest) {
				// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp = new XMLHttpRequest();
			} else {
				// code for IE6, IE5
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("cats_join").innerHTML = xmlhttp.responseText;
				}
			}
			xmlhttp.open("GET","select.php?cat_id="+str,true);
			xmlhttp.send();
		}
 
	}
[HTML] pobierz, plaintext 

takie coś ładuje mi ładnie podkategorie zależne od wyboru kategorii głównej. Problem w tym, że te podkategorie mają jeszcze swoje podkategorie i wtedy jak pojawi mi się drugi select to już nie ładuje dalej po wyborze jakiejś opcji :/ tak samo drugi select (ten który się pojawił) nie reaguje już naawet na:

[HTML] pobierz, plaintext 
//kategorie
		$('.cats').on('change', function(){
			alert(1);
			var cat_id = $(this).val();
			showCats(cat_id);
 
		});
[HTML] pobierz, plaintext 

W select.php tworzę sobie ten select a opcje do niego pobieram z bazy...

[freewalker]

miałem podobny problem, przy dynamicznym ładowaniu treści, że zdarzenia w nowych polach formularza nie działają.

Sposobem na to jest przypisanie zdarzenia (w twoim przypadku .on ) po załadowaniu pola formularza, należy jednak pamiętać, że podwójne bindowanie zdarzenia spowoduje efekt tzw. podwójnego kliknięcia, później potrójnego itp Aż w końcu skrypt się wysypie. Więc najpierw zawsze wywołajmy unbind(). Ja zrobiłbym tak:

[HTML] pobierz, plaintext 
function binder_catschange()
 {
 
$('.cats').unbind().bind('change', function(){
			alert(1);
			var cat_id = $(this).val();
			showCats(cat_id);
                      });
 }
[HTML] pobierz, plaintext 

następnie w twoim kodzie w miejscu:

[HTML] pobierz, plaintext 
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("cats_join").innerHTML = xmlhttp.responseText;
 
                                        binder_catschange(); // wywolanie funkcji bindowania
				}
[HTML] pobierz, plaintext 

mam nadzieję, że to pomoże : )

Ten post edytował freewalker 17.02.2015, 22:07:20

[rad11]

Nie rozumiem do eventu change uzywasz jquery a do ajaxu uzywasz sposobu ktorego juz sie nie uzywa(po co sobie komplikowac).

Ten post edytował rad11 17.02.2015, 22:18:39

[d.stp]

@rad11, to jest akurat najmniej ważne. Najważniejsze że działa, później i tak to zmienię

sprytne, działa

z tym, że dopiero po drugim kliknięciu załapuje, później już normalnie. O co biega

[HTML] pobierz, plaintext 
function binder_catschange() {
		$('.cats').unbind().bind('change', function(){
			var cat_id = $(this).val();
			alert(cat_id);
			showCats(cat_id);
		 });
	}
 
	$(document).ready(function() {
 
		//kategorie
		$('.cats').on('change', function(){
			binder_catschange();
		});
[HTML] pobierz, plaintext 

Ten post edytował d.stp 17.02.2015, 22:27:23

[freewalker]

nie działa bo binduje zdarzenie dopiero po pierwszej zmianie pola, załaduj to na samym starcie a resztę usuń, jak w poniższym przykładzie : )

[HTML] pobierz, plaintext 
	$(document).ready(function() {
 
		//kategorie
               binder_catschange(); //wywolaj tylko to, ponizsze juz nie jest potrzebne
		/*
               $('.cats').on('change', function(){
			binder_catschange();
		});
               */
 
       } //end of $document.ready.function
[HTML] pobierz, plaintext 

[d.stp]

Ogarnąłem już wcześniej, ale i tak dzięki.

Teraz dopiero mam zagadkę...

Zrobiłem tak, że po wybraniu kategorii głównej pokazuje się kolejny select z opcjami gdzie kategoria_glowna == opcja_wybrana, działa. Problem w tym że ten skrypt co mam teraz działa na takiej zasadzie że w miejscu selecta, który pojawił się po wybraniu selecta głównego pokazuje się inny select, a stary znika. Zmieniłem więc kod:

document.getElementById("cats_join").innerHTML = xmlhttp.responseText;

Na:

$('#cats_join').append(xmlhttp.responseText);

i efekt osiągnięty, ale jak wybiorę sobie np. kategorie główną, później jej podkategorie, a następnie jeszcze jedną podkategorie tej wcześniejszej i dalej zmienie np. podkategorie to zamiast chciałbym żeby znikały mi wszystkie selecty które są > kategorii klikniętej, bo teraz za każdym wybraniem kategorii pojawia się kolejny select i tak w kółko..



@rad11, wiem o tym, ale to jest tylko żeby działałol później i tak to będę zmieniał

Jakiś pomysł?

[freewalker]

no tak, przez appenda dopisujesz ciągle nową treść, w takim przypadku rozwiązałbym to numerowaniem poziomu kategorii w selectach, np:

kategoria główna = lvl 1
podkategoria = lvl 2
podkategoria podkategorii = lvl 3


Zaczynając od założenia zmiennej globalnej w kodzie JS:
var max_levels=1; // 1 jak tylko główna kategoria jest zaladowana, każde rozwinięcie spowoduje inkrementację o +1

wymaga też to zmodyfikowania trochę HTMLa dla znacznika select, dodaj atrybut lvl z najnizszym poziomem (w naszym przypadku 1)

[HTML] pobierz, plaintext 
<select class='cats' name='moj_select' lvl='1'>
[HTML] pobierz, plaintext 

kazdy kolejny select generowany przez skrypt powinien miec zwiekszany atrybut lvl o 1 (az do poziomu maksymalnego danej kategorii), czyli wstawiamy selecta appendem, odnajdujemy ostatnio dodanego w tym divie i zmieniamy jego atrybut lvl uprzednio zwiększając zmienną max_levels o 1;
u ciebie w kodzie będzie to chyba w tym miejscu:

[HTML] pobierz, plaintext 
xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					$('#cats_join').append(xmlhttp.responseText);
 
                                        max_levels+=1;
                                        $("#cats_join").find("select.cats:last").attr("lvl",max_levels);
 
                                        binder_catschange(); // wywolanie funkcji bindowania
				}
[HTML] pobierz, plaintext 

modyfikujemy też odpowiednio funkcję binder i dodajemy funkcję usuwającą niepotrzebne podkategorie

[HTML] pobierz, plaintext 
function binder_catschange() {
		$('.cats').unbind().bind('change', function(){
			var cat_id = $(this).val();
                        category_lvl=$(this).attr('lvl');
 
                        if(category_lvl < max_levels) remove_unwanted_cats(category_lvl);
 
			alert(cat_id);
			showCats(cat_id);
		 });
	}
 
function remove_unwanted_cats(actual_lvl)
 {
        start_removing=actual_lvl+1;
         end_removing=max_levels+1;
 
         for(i=start_removing;i<end_removing;i++)
         {
          $("#cats_join").find("select.cats[lvl="+i+"]").remove();
         }
 
      max_levels=actual_lvl;
 }
[HTML] pobierz, plaintext 

mam nadzieję, że działa bo tak na sucho ciężko się pisze i nie wiadomo czy gdzieś byka nie postawiłem : ) ale chyba najważniejsze, żebyś załapał logikę a na pewno sobie poradzisz

Ten post edytował freewalker 17.02.2015, 23:52:34