Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][PHP][JavaScript] Odświeżanie dynamicznego obrazka
Forum PHP.pl > Forum > Przedszkole
Siper
Witam,

Mam taki o to kod:
Kod
<html>
<head>
<script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
<form action="" id="stat-graf" method="post">
    Kolor poczatkowy: <input class="color" type="text" name="kolor-pocz" /> <br />
    Kolor koncowy: <input class="color" type="text" name="kolor-konc" /> <br />
    <input type="submit" value="POST"><br />
  <?php
  if($_POST){
  echo"<img src=\"status.php?kp=" . $_POST['kolor-pocz'] . "&kk=" . $_POST['kolor-konc'] . "\"  />";
  }
  else
  {
  echo"<img src=\"status.php?kp=FFFFFF&kk=000000\" />";
  }
  ?>
</form>
</body>
</html>



W skrócie: Użytkownik podanie kod HEX, po czym klika button i zostaje to wysłane do innego kodu, który generuje z tych danych obrazek.
Chciałbym, żeby odświeżanie obrazka było bez przeładowania, jak coś takiego wykonać?
ult
Jak rozumiem - formularz przesyłasz ajaksem, więc w odpowiedzi zwracaj adres url do nowego, już gotowego obrazka, następnie podstawiasz javascriptowo ten url pod źródło obrazka (src), ale najlepiej z jakąś solą (np. losowym numerkiem jako argument w urlu), bo niektóre przeglądarki nie załapią zmiany. Tak np. w <img id="zmiana" src="" /> wstawiasz url http://mojobrazek.pl/obrazek.php?__rand=123546

Plik obrazek.php niech nie będzie stroną, a wygenerowanym obrazkiem, zmieniając mu header, np. tak:

Kod
header('content-type: image/gif');
Siper
Nie, właśnie to jest surowy kod bez Javascriptu (poza jednym skryptem, nie mającym tutaj znaczenia). Chcę wiedzieć jak to przerobić, aby dynamicznie zmieniał obrazek, ale nie dopiero na nowej.
ult
W takim razie zapoznaj się np. z jQuery i z jQuery.ajax().

A dalej tak, jak Ci napisałem wyżej - przesyłasz url, podmieniasz w atrybucie src obrazka i gotowe. W jQuery podmiana to będzie mniej więcej tak:

Kod
$(document).ready(function(){
$('#obrazek_id').attr('src', 'www.nowyurl.pl/?__rand=jakas_sol');
});
Siper
Jak by to powiedzieć... W javascriptcie jestem laikiem. Wolałbym dostać lepiej np. jakiś przykład.
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.