[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]

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