[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 (IMG:style_emoticons/default/wink.gif) 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