Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] Kasowanie DIV
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
oomaster
Witam,

Mam otóż kod który kolejno który pozwala dodawać nowe pozycje wraz z kasowaniem ich (chowaniem za pomocą hide) Z tym ,że nie działa. Błędów nie wywala. Cisza ?!

Czy ktoś może pomóc :-)

[JAVASCRIPT] pobierz, plaintext
  1. $("#sort").change(function(event){
  2. //alert("Click event on Select has occurred!");
  3. $("option:selected", $(this)).each(function(){
  4. var obj = document.getElementById('sort').value;
  5. var dataString = 'id='+obj;
  6. $('#box_cat').append('<div id="'+obj+'">');
  7. $.ajax({
  8. type : "GET",
  9. url : "app/category.php",
  10. dataType: "html",
  11. data : dataString,
  12. cache: false,
  13. success : function(zwrot) {
  14. $('#box_cat').append(zwrot);
  15. },
  16. complete : function(r) {
  17. $('#loading').hide();
  18. },
  19. error: function(err) {
  20. console.log(err)
  21. }
  22. });
  23. $('#box_cat').append('<a href="#" class="link_remove" id="'+obj+'">Usuń '+obj+'</a></div>');
  24.  
  25. var max_allowed = 2;
  26. var checked = $("#box_cat div").size();
  27. if ( checked > max_allowed ) {
  28. alert("Please select a maximum of " + max_allowed + " options.");
  29. $('#opener').hide();
  30. }
  31. $( "#dialog" ).dialog( "close" );
  32. });
  33. });
  34.  
  35. $('a[class^=link_remove]').live('click', function() {
  36. var id = this.getAttribute('id');
  37. $('div[id='+id+']').hide();
  38. });
[JAVASCRIPT] pobierz, plaintext
tolomei
Witaj.

Ciężko ocenić co jest nie tak, że Twój skrypt "nie działa".
W momencie, gdy podajesz kod jesteśmy w stanie tylko ocenić go pod względem składni.
Skoro jednak konsola nie wywala żadnych błędów to składnia musi być ok.

Podaj html do tego przykładu, ewentualnie utwórz przykład na http://jsfiddle.net

Zastosuj zwyczajne debugowanie kodu, wyświetl jedną zmienną za pomocą console.log(), uruchom skrypt. Jeśli wartość jest zgodna z oczekiwaną, wyświetl następną zmienną itd. Sprawdź czy firebug odnotowuje żądanie ajaxowe. Co ono zwraca? Zwyczajnie przetestuj ten kod.

Pozdrawiam.
oomaster
Wklejam kod html i zrobiłem tak jak mówiłeś ale firebug wywala mnóstwo parametrów i nic z grubsza nie widzę...

  1. <div class="box_form width-620" id="box_cat">
  2. <a href="#" id="opener">Wybierz kategorię</a><br/>
  3. <div id="2"><a href="#" class="link_remove" id="2">Usuń 2</a></div>


W kodzie jak widać jeden div jest wstawiony niby z bazy ;-) I on się kasuje.

EDIT: Widzę gdzie jest błąd, otóz przy kasowaniu zwraca mi taki kod:

  1. <div style="display: none;" id="8"></div><a href="#" class="link_remove" id="8">Usuń 8</a><b>Sklepy</b> /Motoryzacyjne</div>



Skąd ten div sam się zamyka ?
!*!
Powinienem dostawać bonusy za wklejanie tego linku.
oomaster
Działa bez pobierania danych z bazy. Ale chodzi przecież o kasowanie.

http://jsfiddle.net/oomaster/8EFCA/
zegarek84
bo dodajesz div'a do #box_cat bez treści i nie widzisz efektu, linka dodajesz nie do tego div'a dlatego Ci się nie chowa a chowa Ci się ten div bez treści... wskazuję tylko błąd logiczny z Twojej strony bo link chyba chciałeś dać do div'a?? wypełniłem tego div'a treścią żebyś widział gdzie błąd i dalej już może sobie poradzisz ;]
http://jsfiddle.net/8EFCA/3/
oomaster
Rozwiązanie:

[JAVASCRIPT] pobierz, plaintext
  1. ...
  2.  
  3. success : function(zwrot) {
  4. $('#box_cat').append('<div id="'+obj+'">'+zwrot+'<a href="#" class="link_remove" id="'+obj+'">Usuń '+obj+'</a></div>');
  5. $('#load_cat').hide();
  6. console.log(zwrot)
  7. },
  8.  
  9. ...
[JAVASCRIPT] pobierz, plaintext


Poprostu skleiłem całego diva w odpowiedzi i dzięki temu działa. Nie wiem jak ale działa ;-)
zegarek84
Cytat(oomaster @ 31.01.2013, 13:55:31 ) *
Nie wiem jak ale działa ;-)

To zdanie sugeruje, jakbyś większość rzeczy robił trochę w ciemno tylko wg wskazówek manuala nie wiedząc za bardzo co się dzieje... akurat po stronie klienta dosyć istotny jest też sam HTML i pojęcie drzewo DOM, gdzie obiekty html'a są umieszczone hierarhicznie - jeśli ukryjesz/usuniesz jakiś obiekt nadrzędny to ukryjesz/usuniesz całą gałąź razem z obiektami znajdującymi się niżej...

sam link nie musiał u Ciebie być w tym div'ie, ale patrząc na przykład, myślałem, że tak chcesz zrobić... jeśli nie byłby on w tym div'ie to musiałbyś go ukrywać osobno...

w konsoli masz też zakładki do przeglądania elementów drzewa DOM, też bardzo przydatna rzecz - możesz sprawdzić właściwości obiektów oraz jak został wygenerowany HTML po wykonanych operacjach przez JS...
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-2025 Invision Power Services, Inc.