Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX]problem z addClass
Forum PHP.pl > Forum > Przedszkole
kamilo818
Witam,
mam następujący problem:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. //Strona ladowana jako pierwsza:
  4. $('#box').html("<center><img src='495.GIF'></center>");
  5. $('#box').load('glowna.php');
  6.  
  7.  
  8. //Ladowanie pozostalych podstron:
  9. $('#navigation a').click(function(e) {
  10.  
  11. var content=$("#box");
  12.  
  13.  
  14.  
  15. $.ajax({
  16. url: $(this).attr('href'),
  17.  
  18. error : function(){
  19. content.html("<p>Przepraszamy, ale strona jest chwilowo niedostępna</p>");
  20.  
  21. },
  22. beforeSend: function(){
  23. content.empty();
  24. content.html("<center><img src='495.GIF'></center>");
  25.  
  26. },
  27. success: function(obj){
  28. $(this).addClass("currentpage");
  29.  
  30. content.html(obj);
  31. },
  32.  
  33. complete: function(){
  34.  
  35. }
  36. });
  37. e.preventDefault();
  38. });
  39. });
  40. </script>
  41.  
  42.  
  43. <div id="navigation" >
  44. <ul>
  45. <li>
  46. <a href="glowna.php" >główna</a>
  47. </li>
  48. <li>
  49. <a href="admin.php">admin</a>
  50. </ul>
  51. </div>
  52.  
  53.  


css:
  1. a.currentpage {
  2. background: #fff;
  3. color: #EBADE7;
  4. }


lub testowałem

  1. #currentpage {
  2. background: #fff;
  3. color: #EBADE7;
  4. }


Nie działa nadanie klasy po kliknięciue w link. Co może być nie tak?
nospor
$(this) w success nie odnosi sie do linka. Mogles to szybko sprawdzic wyswietlajac sobie zawartosc tego w konsoli.
kamilo818
Patrze patrze i nie widze gdzie to w konsoli widać ;/

Jesli $(this) nie odnosi sie do linka to zmieniłem na:
  1. $('#navigation a').addClass("currentpage");

Ale też nie śmiga, troche po omacku robie.
Jakaś dodatkowa podpowiedź?
nospor
Cytat
Patrze patrze i nie widze gdzie to w konsoli widać ;/
W php dopoki nie zrobisz ECHO to tez sie zmiennej nie wyswietlają... to samo tu, jak nie wyswietlisz, to nie bedzie widac, logiczne.
console.log(jakaszmienna); - to sluzy do wyswietlania

zas ten kod
$('#navigation a').addClass("currentpage");
powinien dzialac.
Moze inne style ci nadpisuje twoje z klasy, a moze tym
content.html(obj);
nadpisujesz swoje linki..... czort wie, szklanej kuli nie mam a z twojego koduy nic nie wynika

ps: poprawnym css jest a.currentpage a nie #currentpage wiec zakladam tez, ze teraz aktualnie masz wersje popprawną a.currentpage
kamilo818
Ok powoli coś działa.
Zmieniłem style na
  1. #navigation a.currentpage {
  2. background: #fff;
  3. color: #EBADE7;
  4. }

i po kliknięciu w link zmienia sie kolor, tak jak chciałem, ale na obydwóch linkach ;/ a nie na tym co jest klikany.
Można jakoś wskazać na ten konkretny klikany?
nospor
zaraz po click robisz:
$('#navigation a').click(function(e) {
var self = $(this);

a potem w success:
self.addClass("currentpage");
kamilo818
Piękne dzięki.
Osiągnąłem ofekt zamierzony, ale wydaje mi się że sposób nie jest dobry

  1. $('#navigation a').click(function(e) {
  2. var self = $(this);
  3. var content=$("#box");
  4. $('#navigation a').removeClass("currentpage");
  5.  
  6.  
  7. $.ajax({
  8. url: $(this).attr('href'),
  9.  
  10. error : function(){
  11. content.html("<p>Przepraszamy, ale strona jest chwilowo niedostępna</p>");
  12.  
  13. },
  14. beforeSend: function(){
  15.  
  16. content.empty();
  17. content.html("<center><img src='495.GIF'></center>");
  18. self.addClass("currentpage");
  19.  
  20. },
  21. success: function(obj){
  22. content.html(obj);
  23.  
  24. },
  25.  
  26. });
  27. e.preventDefault();
  28. });

Jest jakiś bardziej poprawny sposób na zrobienie tego? Chodzi o to żeby od poprzedniego klikniętego linka usunąć klase.
Ja usuwam od wszystkich na dzień dobry, co się sprawdza, ale nie jest, wydaje mi się poprawne.
nospor
Cytat
Ja usuwam od wszystkich na dzień dobry, co się sprawdza, ale nie jest, wydaje mi się poprawne.
Jest ok
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.