Witaj, Gościu O nas | Kontakt | Mapa
Wortal Forum PHPEdia.pl Planeta Kubek IRC Przetestuj się!
Kategorie

Kategorie

Kategoria wyżej
O autorze

O autorze

Tomasz (TomASS) Łosek
Reklama

Reklama

AJAX - I robi się kolorowo

Bardzo często przy moich projektach spotykam się z prośbą klienta o możliwość 'kolorowania' poszczególnych wierszy w tabeli (rekordów). Fajna sprawa - klient zaznacza jakieś ważna dla drugiej strony rekordy na czerwono i już jest wiadomo, że chodzi np. o szczególną uwagę. Jednak jest (był) mały problem - po każdorazowym pokolorowaniu wiersza tabeli trzeba było odświeżyć stronę. Na szczęście z pomocą mi przyszedł Nam AJAX. Oto co wykombinowałem:

Na początku potrzebujemy oczywiście advAJAX.

Przyda się także struktura bazy danych:

CREATE TABLE `kolory` (
  `ID` int(10) NOT NULL auto_increment,
  `Kolor` varchar(7) default NULL,
  `ID_rekord` int(10) default NULL,UNIQUE KEY `ID` (`ID`)
);

Teraz, gdy mamy odpowiednią tabelę dla naszych rekordów, a w niej pole `Kolor` możemy zabrać się za wyświetlenie tychże rekordów. Plik proba.php wygląda następująco:

<html>
<head>
</head>
<script>
function $(id) {
    return document.getElementById(id);
}

function okienko(strona) {
    window.open(strona, '', ' menubar=yes,toolbar=yes,location=yes,directories=yes,status=yes,scrollbars=yes,resizable=yes,fullscreen=no,channelmode=no,width=200,height=300,left=150,top=100');
}
</script>
<body>
<table border="1">

<?php
$dbhost = 'localhost';
$dblogin = 'root';
$dbhaslo = '';
$db = 'test';
mysql_connect($dbhost, $dblogin, $dbhaslo) or die("Nie masz uprawnien");
mysql_select_db($db);
for ($i=1; $i<10; $i++) {
    $query = "SELECT Kolor FROM kolory WHERE ID_rekord=$i LIMIT 1";
    $result = mysql_query($query);
    $row = mysql_fetch_array($result);
    $kolor = $row['Kolor'] ? $row['Kolor'] : '#723F42';
    echo "<tr id=\"tr$i\" style='background: $kolor'>";
    echo '<td>'.$i.'</td>';
    echo '<td>'.($i*2).'</td>';
    echo '<td>'.($i*3).'</td>';
    echo "<td><button onclick=\"okienko('paleta.php?id=".$i."');\"></button></td>";
    echo '</tr>';
}
?>
</table>
</body>
</html>

Chyba nic nadzwyczajnego, proste wyświetlanie rekordów w pętli for - idziemy dalej....plik paleta.php, który odpowiedzialny jest za pobranie koloru z palety:

<table width="50px;">
  <tr>
    <td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;">&nbsp;</td>
  </tr>
</table>

za 'dynamiczne' pokolowanie tabelki:

opener.$('tr<?echo $_GET['id'];>').style.background=kolor;

oraz zapisanie do bazy danych:

advAJAX.post({
          url : "zapisz_kolor.php",
          parameters:{
               kolor: kolor,
               id: '<?echo $_GET['id'];?>'
  },
  onSuccess : function(obj) {
  }
});

Cały plik wygląda następująco:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="advajax.js"></script>
<script>
function wybierz_kolor(kolor) {
    opener.$('tr<?echo $_GET['id'];?>').style.background=kolor;
    advAJAX.post({
            url : "zapisz_kolor.php",
            parameters: {
                kolor: kolor,
                id: '<?echo $_GET['id'];?>'
            },
            onSuccess : function(obj) {
            }
   })
;}
</script>
<table width="50px;">
  <tr>
    <td bgcolor='#5478A4' onclick="wybierz_kolor('#5478A4');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#A534EF' onclick="wybierz_kolor('#A534EF');" style="curosr: hand;">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor='#84D6E2' onclick="wybierz_kolor('#84D6E2');" style="curosr: hand;">&nbsp;</td>
    <td bgcolor='#19D2A5' onclick="wybierz_kolor('#19D2A5');" style="curosr: hand;">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Oczywiście możemy użyć dowolnej innej palety kolorów.

Pozostaje już tylko plik zapisujący dane do bazy. zapisz_kolor.php:

$dbhost = 'localhost';
$dblogin = root;
$dbhaslo = '';
$db = 'test';
mysql_connect($dbhost, $dblogin, $dbhaslo) or die("Nie masz uprawnien");
mysql_select_db($db);
$kolor = mysql_escape_string($_POST['kolor']);
$rekord = (int)$_POST['id'];
$query = "SELECT * FROM kolory WHERE ID_rekord=$rekord LIMIT 1;";
$result = mysql_query($query);
if (mysql_affected_rows()>0) {
    $query = "UPDATE kolory SET Kolor='$kolor' WHERE ID_rekord=$rekord;";
} else {
    $query = "INSERT INTO kolory (Kolor, ID_rekord) VALUES ('$kolor',$rekord);";
}
$result = mysql_query($query);
mysql_close();

Jestem pewien, że przerobienie tego dla własnych potrzeb będzie tylko formalnością.

Informacje na podobny temat:
Wasze opinie
Wszystkie opinie użytkowników: (3)
Własnie własnie trochę bez sensu...
Środa 23 Sierpień 2006 4:01:52 pm - kermitx <kermitx_at_gmail.com>

Trochę to bez sensu i na siłę. Jeżeli już stosujemy JavaScript to do końca a nie połowicznie. Nie twierdzę, że stosowanie "technologii" AJAX jest czymś złym, jednakowoż musi mieć sens. Nawet w przykładzie. Jednym z powodów dla jakich stosuję się AJAX jest przyśpieszenie działania aplikacji poprzez wykonwyanie wszystkiego (wszystkiego co się da) po stronie klienta.
Moim zdaniem kolory do wyboru powinny być juz w tabeli ew. popup ale w JavaScript a nie z odwołaniem do jakiegoś dokumentu po stronie serwera. Nie to, żebym się czepiał i wiem, że to tylko przykład ale ktoś kto pierwszy raz ma do czynienia z AJAXEM i zobaczy ten przykład to niestety ujrzy bezsens stosowania tej technologii zamiast jej zalet i mozliwości.
Ja u siebie od paru lat stosuje takie rozwiązanie.
Najpierw wszystko ma działać bez JS. Potem dołączam skrypty w JS (walidacja formularzy, potwierdzenie usunięcia rekordu itp). Jezeli przegladarka obsługuje JS działa JS jeżeli nie (lub ma wyłączoną obsługe JS) działa tylko PHP. Swoją drogą to ładnych parę lat juz stosuje takie rozwiązanie czy to już AJAX czy jeszcze nie ? hyhy :)

przykład bezsensowny
Wtorek 09 Maj 2006 2:54:19 pm - hombrerro

ja nie uważam, żebyś się czepiał bo jeżeli przykład jest w takiej formie jak jest to oprócz działania technologii ajax pokazuje również bezmyślność osób stosujących to rozwiązanie na siłę.

Ajax do niczego tu nie jest potrzebny. Skoro otwierasz i zamykasz okienko to masz dwa requesty do serwera w których możesz sobie przekazać dowolne dane do zapisu a kolor w tabeli zmienic za pomoca js. Tutaj jest dokladne 3 rządanie. Nic na siłę.

fajne fajne
Czwartek 27 Kwiecień 2006 2:55:38 pm - palik

ale funkcjonalność byłaby lepsza gdyby zrobić tak - 1. wybieramy kolor z palety (najlepiej dostępnej obok/nad/pod tabelą, bez popupa, 2. klikając w wiersz 'kolorujemy go' wybranym kolorem... ew. odwracając sytuację - zaznaczamy checkboxami kilka wierszy i dopiero wtedy wybieramy kolor :)

może się czepiam ale tak już mam :P

Mentax.pl    NQ.pl- serwery z dodatkiem świętego spokoju...   
O nas | Kontakt | Mapa serwisu
Copyright (c) 2003-2017 php.pl    Wszystkie prawa zastrzeżone    Powered by eZ publish Content Management System eZ publish Content Management System