Ajax a JS Opcje

[Kasat]

Witam, nie wiem za bardzo jaki dać tytuł dlatego jest jaki jest.. ale problem polega na tym, że mam formularz w którym wybieram kategorie, a następnie na podstawie wyboru kategorii wyświetla mi się kolejne pole list z wyborem subkategorii. Problem jest, że lista jeszcze się wyświetli ale nie można wybrać elementu. O to kody jakie używam:


Kod JS:

[HTML] pobierz, plaintext 
  <script>
function showSubCategorie(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","functions/projects/GetSubCategories.php?q="+str,true);
  xmlhttp.send();
}
</script>
 
[HTML] pobierz, plaintext 

Kod z wyboru kategorii:

[HTML] pobierz, plaintext 
   <div class="field">
    <label>Kategoria</label>
    	<div class="ui selection fluid dropdown">
		<input type="hidden" name="kategoria"  onchange="showSubCategorie(this.value)">
												<div class="default text">Kategoria</div>
												<i class="dropdown icon"></i>
												<div class="menu">
													{kategorie2}
 
												</div>
											</div>
  </div>
[HTML] pobierz, plaintext 

Kod wyboru subkategorii wraz z div gdzie ma się pojawić lista.

[HTML] pobierz, plaintext 
  <div class="field">
    <label>Subkategoria</label>
    	<div class="ui selection fluid dropdown">
		<input type="hidden" name="subkategoria">
 
												<div class="default text">Subkategoria</div>
												<i class="dropdown icon"></i>
												<div class="menu">
 
  <div id="txtHint"></div>
  </div>
  </div>
  </div>
[HTML] pobierz, plaintext 

plik wyświetlający listę subkategorii:

[PHP] pobierz, plaintext 
$q = $_GET['q'];
 
 
 
$query3 = query("SELECT * from {{table}} where `id_categorie` = '".$q."' order by `name` desc;",'subcategories');
while($u3 = mysql_fetch_array($query3)){
echo "<div class='item' data-value='".$u3['id']."'>".$u3['name']."</div>";											
}
[PHP] pobierz, plaintext 

Wszystko działa oprócz tego, że nie mogę wybrać elementu z listy. Jakieś rady?
Jestem słaby w AJAX, więc proszę o wyrozumiałość.





pomocy

[aniolekx]

to jest jakaś masakra ;p czemu nie używasz SELECT + OPTIONS?

wywal <div id="txtHint"></div>

a jego rodzica <div class="menu"> zmień na <div class="menu" id="txtHint"> nie wiem ,może pomoże ;p

[Kasat]

Niby czemu masakra?
Nie słyszałeś o frameworkach do CSS? Jeśli nie to nie mów, że coś jest masakra. Pod takie rozwiązanie mam tak zaprojektowany CSS, że option będzie działać ale będzie wyglądać jak syf.

Z reszta sam skrypt działa, wyświetla listę, ale nie działa wybór z listy. Próbowałem już dawno tego rozwiązania (i nie tylko takiego) i nie pomogło.

[trueblue]

Po odpowiedzi ajaxa, powinieneś wywołać skrypt JS, który buduje select z tej struktury, identyczny z tym, który buduje główne kategorie.

[Kasat]

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="template/scripts/semantic.min.js"></script>
<script src="template/scripts/scripts.js"></script>

dodawałem zaraz za kodem JS, na początku pliku PHP obsługującym wczytywanie kategorii (na końcu tez) ii kurcze nic nie pomaga.. ścieżki są dobre, sprawdzałem

[aniolekx]

albo wrzuć tu ta część tego skryptu który tym elementom nadaje te właściwości (ze można w nie klikać), albo wrzuć to na jakikolwiek serwer to abym mógł to w przeglądarce szybko sprawdzić (sprawdzę to za pomocą Fiebug i HttpFox dodatki do przegladarki Firefox)

np jeżeli używasz jQuery to być może trzeba zmienić Bind na Live

Ten post edytował aniolekx 3.11.2014, 13:47:33

[trueblue]

dodawałem zaraz za kodem JS, na początku pliku PHP obsługującym wczytywanie kategorii (na końcu tez) ii kurcze nic nie pomaga.. ścieżki są dobre, sprawdzałem

Powinieneś po linii 15 pierwszego kodu JS, który podałeś w tym poście, wywołać funkcję, która buduje menu z tej struktury.
http://semantic-ui.com/modules/dropdown.html#/usage

[Kasat]

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js
http://www44.zippyshare.com/v/5001127/file.html

i dwa pozostałe

to są wszystkie jakie używam.

[HTML] pobierz, plaintext 
<div class="field">
    <label>Kategoria</label>
    	<div class="ui selection fluid dropdown">
		<input type="hidden" name="kategoria"  onchange="showSubCategorie(this.value)">
												<div class="default text">Kategoria</div>
												<i class="dropdown icon"></i>
												<div class="menu">
													<div class="item" data-value="2">Fotografia</div>
 
<div class="item" data-value="1">Budowa, Remont</div>
 
 
 
												</div>
											</div>
  </div>
[HTML] pobierz, plaintext 

to kod gdzie jest ta lista. By wywalić AJAX wystarczy usunąć ' onchange="showSubCategorie(this.value)"'




//////////////


Dzięki wielkie Wam za pomoc! trueblue Twoja rada pomogła, działa jak trzeba
Fajnie, że są tacy ludzie co pomogą!

Ten post edytował Kasat 3.11.2014, 13:53:40

[PrinceOfPersia]

[html][/html]

np jeżeli używasz jQuery to być może trzeba zmienić Bind na Live

w obecnych wersjach jQuery nie ma czegoś takiego Live(!!!!). Jest `on` i było to już wałkowane tysiąc razy.

.live( events, handler ) ...... version deprecated: 1.7, removed: 1.9

Poza tym nie ma sensu samemu obsługiwać Ajaxa, kiedy w jQuery robi się to jedną linijką.

edit:
nie ma sensu też wrzucać kodu na zippyshare.com, skoro jest jsFiddle.net i inne podobne strony, na których można odpalić sobie kod.

Ten post edytował PrinceOfPersia 4.11.2014, 10:58:16