Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ajax a JS
Forum PHP.pl > Forum > XML, AJAX > AJAX
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:
  1. function showSubCategorie(str) {
  2. if (str=="") {
  3. document.getElementById("txtHint").innerHTML="";
  4. return;
  5. }
  6. if (window.XMLHttpRequest) {
  7. // code for IE7+, Firefox, Chrome, Opera, Safari
  8. xmlhttp=new XMLHttpRequest();
  9. } else { // code for IE6, IE5
  10. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  11. }
  12. xmlhttp.onreadystatechange=function() {
  13. if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  14. document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  15. }
  16. }
  17. xmlhttp.open("GET","functions/projects/GetSubCategories.php?q="+str,true);
  18. xmlhttp.send();
  19. }
  20.  


Kod z wyboru kategorii:

  1. <div class="field">
  2. <label>Kategoria</label>
  3. <div class="ui selection fluid dropdown">
  4. <input type="hidden" name="kategoria" onchange="showSubCategorie(this.value)">
  5. <div class="default text">Kategoria</div>
  6. <i class="dropdown icon"></i>
  7. <div class="menu">
  8. {kategorie2}
  9.  
  10. </div>
  11. </div>
  12. </div>


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

  1. <div class="field">
  2. <label>Subkategoria</label>
  3. <div class="ui selection fluid dropdown">
  4. <input type="hidden" name="subkategoria">
  5.  
  6. <div class="default text">Subkategoria</div>
  7. <i class="dropdown icon"></i>
  8. <div class="menu">
  9.  
  10. <div id="txtHint"></div>
  11. </div>
  12. </div>
  13. </div>


plik wyświetlający listę subkategorii:

  1. $q = $_GET['q'];
  2.  
  3.  
  4.  
  5. $query3 = query("SELECT * from {{table}} where `id_categorie` = '".$q."' order by `name` desc;",'subcategories');
  6. while($u3 = mysql_fetch_array($query3)){
  7. echo "<div class='item' data-value='".$u3['id']."'>".$u3['name']."</div>";
  8. }



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
Cytat
<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
trueblue
Cytat(Kasat @ 3.11.2014, 13:31:11 ) *
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.

  1. <div class="field">
  2. <label>Kategoria</label>
  3. <div class="ui selection fluid dropdown">
  4. <input type="hidden" name="kategoria" onchange="showSubCategorie(this.value)">
  5. <div class="default text">Kategoria</div>
  6. <i class="dropdown icon"></i>
  7. <div class="menu">
  8. <div class="item" data-value="2">Fotografia</div>
  9.  
  10. <div class="item" data-value="1">Budowa, Remont</div>
  11.  
  12.  
  13.  
  14. </div>
  15. </div>
  16. </div>


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 smile.gif
Fajnie, że są tacy ludzie co pomogą! smile.gif
PrinceOfPersia
[html][/html]
Cytat(aniolekx @ 3.11.2014, 13:44:01 ) *
np jeżeli używasz jQuery to być może trzeba zmienić Bind na Live

w obecnych wersjach jQuery nie ma czegoś takiego Live(exclamation.gif!!!!). Jest `on` i było to już wałkowane tysiąc razy.
Cytat
.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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.