Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][AJAX] Efekt pojawiającego się tekstu
Forum PHP.pl > Forum > Przedszkole
lukasamd
23.06.2009, 15:53:47
Witam,
mam chyba dosyć śmieszny problem - w efekcie kliknięcia na link, poprzez użycie ajaxa wykonywane jest zapytanie do bazy zaś zamiast linku pojawia się napis "Operacja została wykonana".

Taka zamiana po 1-2 sekundach wygląda jednak niezbyt ciekawie, najlepiej gdyby napis zmienił się z np. efektem przenikania.
Jak to osiągnąć w HTML?
kielich
23.06.2009, 15:56:30
zapodaj kod: smile.gif
lukasamd
23.06.2009, 16:04:10
Strona z linkiem (fragment):
[PHP] pobierz, plaintext 
  1. <?php
  2. echo '<div id="info"><a href="'.$_SERVER['REQUEST_URI'].'#" onclick="sendRequest('.$userdata['user_id'].' , '.$data['gra_id'].')">Dodaj grę do ulubionych</a></div>';
  3. ?>
[PHP] pobierz, plaintext




JS:
Kod
var xHRObject = false;
if (window.XMLHttpRequest)
{
  xHRObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
  xHRObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function sendRequest(user , gra)
{
  xHRObject.open("GET", "kod.php?user_id=" + user + "&gra_id=" + gra, true);
  xHRObject.onreadystatechange = getData;
  xHRObject.send(null);
}

function getData()
{
  if (xHRObject.readyState == 4 && xHRObject.status == 200)
  {
    var serverText = xHRObject.responseText;
    if(serverText.indexOf('|' != -1))
    {
      element = serverText.split('|');
      document.getElementById(element[0]).innerHTML = element[1];
    }
  }
}



Strona obrabiająca:

[PHP] pobierz, plaintext 
  1. <?php
  2. $user_id = $_REQUEST['user_id'];
  3. $gra_id = $_REQUEST['gra_id'];
  4. $czas = time();
  5.  
  6. mysql_query("INSERT INTO ".DB_ULUBIONE." VALUES ('".$user_id."', '".$gra_id."', '".$czas."')");
  7. echo 'info|Operacja została wykonana!';
  8. ?>
[PHP] pobierz, plaintext
erix
23.06.2009, 16:14:06
Cytat
Taka zamiana po 1-2 sekundach wygląda jednak niezbyt ciekawie, najlepiej gdyby napis zmienił się z np. efektem przenikania.
Jak to osiągnąć w HTML?

Ściągnij sobie jakiegoś frameworka, bo każda przeglądarka robi inaczej (właściwie, to tylko IE) i się zajedziesz wynajdując koło na nowo.

A np. w jQuery:
Kod
$('#id_warstwy').fadeOut();

i tyle [;
slightyboy
23.06.2009, 16:15:55
Skorzystaj z jakiegoś frameworka JS/AJAX, np. jQuery, mooTools, czy mintAjax (polska biblioteka - więc najpierw zajrzyj tam). Co do samej implementacji sposobu: możesz umieścić warstwę na warstwie (potem fadeować tą górną) albo użyć tylko jednej warstwy i najpierw ją ukryć (fade'm), podmienić zawartość i przy użyciu setTimeout() ponownie pokazać (fade'm). smile.gif
lukasamd
23.06.2009, 19:42:43
No dobra, ale jak tego konkretnie używać? biggrin.gif Jak załączyć to wiem, gorzej z innymi rzeczami.
Np chciałbym aby po kliknięciu na napis zniknął. Dałem więc coś takiego:

[HTML] pobierz, plaintext 
  1. <p onclick='fadeOut("slow")'>To ma zniknąć</p>
[HTML] pobierz, plaintext


No i niestety wg. moich przewidywań nie działa (na 100% źle to dałem, no ale naprawdę nie wiem jak ma być).
jQuery załączone.
erix
23.06.2009, 20:03:18
Bo nie ma prawa działać. [;

jak już, to:
Kod
<p onclick='$(costutrzebawpisac).fadeOut("slow")'>To ma zniknąć</p>

A co trzeba wpisać? Zobacz w dokumentacji, co to jest magiczna funkcja "pieniężna". [;
Maxik
23.06.2009, 20:25:49
@erix: A zwykłe this nie wystarcza?
erix
23.06.2009, 20:45:59
Nie mogłeś cicho siedzieć? tongue.gif
Maxik
23.06.2009, 22:48:19
W sumie mogłem, ale po co? winksmiley.jpg

Reasumując:
[HTML] pobierz, plaintext 
  1. <p onclick='this.fadeOut("slow")'>To ma zniknąć</p>
[HTML] pobierz, plaintext
erix
23.06.2009, 22:49:22
To też jest źle. tongue.gif Gdybyś działał na Prototype i gdyby miał taką funkcję, to by przeszło, ale jQ działa na nieco innej zasadzie.

Ale nie będę mówił, co - podałem wskazówki wcześniej. [;
lukasamd
24.06.2009, 13:06:27
Już jarzę biggrin.gif Jak dam $(this) to odwoła się do tego elementu z którego jest wykonywane, jak chcę cos innego to po znaczniku i klasie np.

[HTML] pobierz, plaintext 
  1. <p onclick='$("p.znikanie").fadeOut("slow")'>ZNIKNIE CZY NIE?</p>
  2. <p class="znikanie">To ma zniknąc</p>
[HTML] pobierz, plaintext


Czyli jak rozumiem, mogę ten i inne efekty z jQuery wrzucać sobie do HTML'a bez znajomości samego mechanizmu (no podawane argumenty to wiadomo)?
erix
24.06.2009, 13:48:53
No jednak załapałeś. [;

Możesz też zamiast selektora podawać this, xpath, inne rzeczy, wszyskto jest opisane i właściwie, to chyba nie ma takiej zmiennej, której nie można "spieniężyć". [;
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.