Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> jQuery - AJAX - HTML - Aktualizacja atrybutu i odczyt atrybutu bez odświeżania strony
Hazes
post 1.08.2016, 10:30:37
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 9.03.2016

Ostrzeżenie: (0%)
-----


Witam,

Chcę stworzyć stronę, która będzie się aktualizowała bez potrzeby odświeżania przez użytkownika. Jeden z obiektów, po najechaniu na niego - ma pokazywać w okienku dokładną liczbę HP pobieraną z atrybutu data-hp. Kolejna funkcja to timer, który jest uruchamiany powiedzmy raz na minutę i sprawdza w bazie ilość HP i różnicę czasu przed ostatnim sprawdzeniem a aktualnym. Jeśli różnica to więcej niż minuta, w atrybucie data-hp ma się pojawić takie równanie:

HP = HP + (minuty * 2).

Czyli na każdą minutę dostajemy 2 HP.

Na początku przedstawię kod, powiedzmy że mamy na stronie taki element:

  1. <div id="hp"><div id="hp_amount" data-hp="120" data-maxhp="500" style="width: 22%"></div></div>


Jest to pasek HP (ilości życia). Kiedy atrybut data-hp zostanie zaktualizowany przez funkcję z timerem (AJAX), przychodzi kolejne zadanie. Atrybut data-hp musi zostać odczytany i wyświetlony w innym obiekcie. Kod:

  1. function update_stats(){
  2. var HP = $("#hp_amount").attr("hp");
  3. var maxHP = $("#hp_amount").attr("maxhp");
  4.  
  5. $.ajax({
  6. url: '../game/data/stats_update.php',
  7. type: 'post',
  8. data : {
  9. ID : '<?php echo $USER['ID']; ?>'
  10. },
  11. dataType: 'html',
  12. success: function(response)
  13. {
  14. $('#hp_amount').attr("data-hp", response);
  15. }
  16. });
  17.  
  18. setTimeout(update_stats, 2000);
  19. }
  20. setTimeout(update_stats, 2000);


Jak widzicie kiedy AJAX sukcesywnie wykona swoją robotę do obiektu hp_amount zostaje dodany/zmieniony atrybut data-hp. Z tym nie ma problemu, kod źródłowy na stronie się aktualizuje.
Problemem jest natomiast odczytanie ZAKTUALIZOWANEGO obiektu hp_amount przez kolejną funkcję jQuery. Wygląda ona tak:

  1. $('#hp').on('mousemove', function(e){
  2. var maxHP = $("#hp_amount").data("maxhp");
  3. var HP = $("#hp_amount").data("hp");
  4.  
  5. var MouseX = e.pageX+45;
  6. var MouseY = e.pageY-20;
  7. $('#hud_info').text(HP+' / '+maxHP);
  8. $('#hud_info').fadeIn(100).css({
  9. left: MouseX,
  10. top: MouseY
  11. });
  12. });


Czyli po najechaniu na pasek życia w okienku (hud_info) ma się wyświetlać jego ILOŚĆ / ILOŚĆ CAŁKOWITĄ. Problem tkwi w tym, że pobierany jest stary atrybut, ten który został ustawiony podczas załadowania wstępnego strony a nie ten aktualny.
Czy mógłby ktoś mnie uświadomić gdzie jest błąd?

Pozdrawiam,
Hazes.
Go to the top of the page
+Quote Post
rad11
post 1.08.2016, 10:54:13
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Spróbuj:

  1. $('body').on('mousemove','#hp', function(e){
Go to the top of the page
+Quote Post
Hazes
post 1.08.2016, 15:49:17
Post #3





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 9.03.2016

Ostrzeżenie: (0%)
-----


Cytat(rad11 @ 1.08.2016, 11:54:13 ) *
Spróbuj:

  1. $('body').on('mousemove','#hp', function(e){


Dzięki, takie rozwiązanie działa, będę pamiętał na przyszłość. Jednak postanowiłem zmienić sposób przechowywania danych na localStorage, bo jest o wiele bardziej dynamiczne.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 00:33