W niniejszym poradniku wykorzystamy uproszczony przykład tabeli z danymi, które będzie można edytować poprzez dynamiczne tworzenie pola formularza w wybranej komórce. Tabela zawiera 3 kolumny: osoba, stanowisko, oraz uwagi. Po kliknięciu w wybraną komórkę pojawi się odpowiednie pole formularza (text, select lub textarea) umożliwiające edycję. Przykładowy wynik opisanych poniżej działań można zobaczyć tutaj.

Potrzebną bibliotekę można pobrać ze strony projektu Jeditable. Kod tabeli może wyglądać następująco:

  <table>
    <tr>
      <th>Lp.</th>
      <th>Osoba</th>
      <th>Stanowisko</th>
      <th>Uwagi</th>
    </tr>
    <tr>
      <td>1</td>
      <td class="edit text" id="person_1">Jan Kowlaski</td>
      <td class="edit select" id="occupation_1">Informatyk</td>
      <td class="edit textarea" id="info_1">Na urlopie do 2 stycznia</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="edit text" id="person_2">Tomasz Nowak</td>
      <td class="edit select" id="occupation_2">Handlowiec</td>
      <td class="edit textarea" id="info_2"></td>
    </tr>
    <tr>
      <td>3</td>
      <td class="edit text" id="person_3">Anna Dąbrowska</td>
      <td class="edit select" id="occupation_3">Księgowy/a</td>
      <td class="edit textarea" id="info_3">Idzie na szkolenie 5-6 luty</td>
    </tr>
    <tr>
      <td>4</td>
      <td class="edit text" id="person_4">Marcin Wiśniewski</td>
      <td class="edit select" id="occupation_4">Spec. ds. marketingu</td>
      <td class="edit textarea" id="info_4"></td>
    </tr>
  </table>

Będziemy potrzebowali teraz określić, które pola będą edytowane i w jaki sposób. Dla poszczególnych komórek zmiany będą dokonywane przy pomocy różnych typów formularza. Rozróżnienia dokonamy po nazwach klas poszczególnych komórek tabeli, co widać na powyższym kodzie HTML.

Edycja zawartości pola „Osoba” będzie się odbywała przez zwykłe pole tekstowe, które tworzymy w następujący sposób:

  $('.text').editable('save.php', { 
    type      : 'text',
    cancel    : 'Anuluj',
    submit    : 'Zapisz',
    indicator : '<img src="img/indicator.gif" alt="" />',
    width     : '100px'
  });

Stworzenie formularza w Jeditable polega na użyciu metody editable, odwołującej się do określonego obiektu (w tym wypadku klasy HTML text). Wymaga ona dwóch parametrów. Pierwszym jest plik, jaki zostanie wywołany przy akceptacji formularza i do którego zostanie przesłana wartość z pola. Drugim parametrem jest tablica zawierająca zmienne konfiguracyjne. W tym przypadku posiadają one następujące znaczenie:

• type – typ pola formularza, możliwe wartości to text, select lub textarea
• submit – napis na przycisku akceptującego formularz
• cancel – napis na przycisku anulowania edycji, jeśli nie jest podany przycisk nie wyświetli się (wyjście z trybu edycji jest możliwe poprzez kliknięcie poza formularzem)
• indicator – tekst jaki pojawi się w momencie zapisywania danych, może to być także kod HTML wyświetlający animację postępu poprzez znacznik img
• width – długość pola formularza, domyślnie automatycznanie dobierana

Kolejnym polem w formularzu będzie „Stanowisko”. Będzie on wybierany z listy rozwijanej, posłużymy się więc następującą definicją:

  $('.select').editable('save.php', { 
    type      : 'select',
    data      : "{'1':'Informatyk','2':'Księgowy/a',
'3':'Spec. ds. marketingu', '4':'Handlowiec', 'selected':'1'}",
    submit    : 'Zapisz',
    cancel    : 'Anuluj',
    indicator : '<img src="img/indicator.gif" alt="" />',
    width     : '100px',
    submitdata: {field: 'select'}
  }); 

Pojawią się tu dodatkowe zmienne:

• submitdata – dodatkowe wartości, jakie można przesłać do pliku wynikowego (w tym przypadku rodzaj pola, który przyda się przy zapisie danych)
• data – zawiera ona tablicę zawodów w układzie klucz:wartość. Jej ostatnim elementem jest oznaczenie wybranej wartości, czego dokonujemy poprzez ‘selected’:’klucz’

Innym sposobem na załadowanie wartości do pola select oraz innych typów, jest skorzystanie z parametru loadurl zawierającego nazwę pliku

loadurl  : 'load.php'

Plik ten Powinien zwrócić dane w formacie json o następującej strukturze:

<?php
$data = array(
        1 => ‘Informatyk’,
        2 => ‘Księgowy/a’,
        3 => ‘Spec. ds. marketingu’,
        4 => ‘Handlowiec’,
'selected' => 1
);
echo json_encode($data);
?>

Dzięki temu możemy wczytać odpowiednie wartości z bazy danych lub dodatkowo je zmodyfikować. Możemy z takiego rozwiązania skorzystać także w przypadku pól text lub textarea. Domyślnie ładowana jest do nich wartość z edytowanego obiektu, jednak możemy to zmienić przy pomocy loadurl.

Na koniec pozostały nam „Uwagi”, które będziemy edytowali poprzez pole typu textarea:

  $('.textarea').editable('save.php', { 
    type      : 'textarea',
    cancel    : 'Anuluj',
    submit    : 'Zapisz',
    indicator : '<img src="img/indicator.gif" alt="" />',
    rows	    : '4',
    cols      : '20',
    placeholder: ''
  }); 

W tym przypadku dochodzą kolejne nowe zmienne:

• rows – liczba wierszy w textarea
• cols – liczba kolumn w textarea
• placeholder – tekst, jaki pojawi się w przypadku pustej wartości. W tym przypadku pusty, gdyż nie będzie on potrzebny (domyślnie „Click to edit”).

Po zatwierdzeniu pola formularza możemy dokonać zapisu danych w wywoływanym pliku save.php. Wartość oraz dodatkowe parametry będą dostępne w zmiennej POST. Można to zmienić poprzez parametr metod, o czym będzie mowa później. Domyślnie wartość będzie dostępna pod zmienną value, a identyfikator pola (o ile został zdefiniowany) pod zmienną id.

Wynikiem przedstawionego wywołania powinna być wartość zmienionego pola (odpowiedni klucz w przypadku select). Plik save.php powinien zwracać wartość pola po zmianie. Dzięki temu po zapisie w tabeli pojawi się zaktualizowana wartość.

Przykładowy plik save.php może w uproszczeniu wyglądać następująco:

<?php
// pod zmienna POST[id] znajduje sie id pola formularza
// np. id="person_1", czyli nazwa pola z bazy i id rekordu 
list($field, $id) = explode("_", $_POST["id"]);

// uwaga na bezpieczenstwo zmiennych!
$dbh = mysql_connect(...);

$sql = "update table
set {$_POST["field"]} = $value
where id=$id";

mysql_query($sql);

// pod zmienna POST[value] znajduje sie wartsc z formularza 
// dla pola select trzeba zwrocic tekstm pod value jest ide rekordu!
if($_POST['field'] == 'select'){
  // te dane nalezy wczytac z bazy
  $occupation = array(
    1 => "Informatyk",
    2 => "Księgowy/a",
    3 => "Spec. ds. marketingu",
    4 => "Handlowiec"
  );
  $value = $occupation[$_POST['value']];
}
else{
  $value = $_POST['value'];
}

// dzięki temu w tabeli pojawi się zmieniona wartość
echo $value;
?>

Tworząc pole formularza możemy skorzystać z dość dużej liczby dodatkowych parametrów. Warto się z nimi zapoznać:

method – sposób przekazywania danych do pliku wynikowego: POST (domyślnie) lub PUT (kompatybilnie z Rails)

callback – funkcja która zostanie wywołana po zatwierdzeniu formularza. Używa dwóch parametrów: wartości z pola oraz ustawień wtyczki. Wewnątrz funkcji można się odwoływać do poszczególnych elementów poprzez this.

$('.editable').editable('save.php', {
   type     : 'textarea',
   submit   : 'OK',
   callback : function(value, settings) {
       console.log(this);
       console.log(value);
       console.log(settings);
   }
});

name – nazwa zmiennej, zawierająca wartość wpisaną w formularzu, domyślnie value

id – nazwa zmiennej, która przechowuje id edytowanego elementu, domyślnie id

height – wysokość pola formularza w pikselach, domyślnie auto

loadtype – typ żądania używany przez loadurl: GET lub POST. Domyślnie jest wykorzystywany pierwszy z nich.

data – dane z formularza przesłane jako parametr. Może być stringiem lub funkcją zwracającą string. Przydatny, gdy chcemy dokonać zmian w tekście przed edycją w formularzu. Przykładowo, możemy w ten sposób zmienić HTMLowe znaczniki „br” na końce linii widoczne w polu edycji:

$(".editable").editable("save.php";, {
  data: function(value, settings) {
    var retval = value.replace(/<br[\s\/]?>/gi, '\n');
    return retval;
  }
});

Na zakończenie niniejszego poradnika otrzymamy efekt, który można zobaczyć w całości tutaj. Będzie to formularz umożliwiający dodanie nowej osoby do przykładowego systemu. Znajdzie się na nim kilka pól, w tym lista rozwijana z nazwami zawodów a obok niej przycisk „Dodaj nowy”. Po jego kliknięciu pojawi się odpowiednie okno z formularzem dodania rekordu. Pomijam tu fakt, że pola będą generowane na podstawie danych z bazy, oraz uproszczam wygląd samego formularza (osoba a nie imię, nazwisko, itd).

Na początek stwórzmy więc formularz, który będzie widoczny od samego początku na ekranie.

<form action="" method="post">
  <div class="field">
    <label for="person">Osoba</label>
    <input type="text" name="person" id="person" value=""/>
  </div>
  <div id="add-new-subform">
  <label for="new-occupation">Nowy zawód</label>
  <input type="text" value="" name="new-occupation" id="new-occupation" />
  <input type="button" value="Dodaj" id="add-new-save" />
  <input type="button" value="Anuluj" id="add-new-cancel" />
  </div>
  <div class="field">
    <label for="occupation">Zawód</label>
    <select name="occupation" id="occupation">
      <option value="1">Opcja 1</option>
      <option value="2">Opcja 2</option>
      <option value="3">Opcja 3</option>
      <option value="4">Opcja 4</option>
    </select>
    <input type="button" value="+" id="add-new-show" />
  </div>
  <div class="field">
    <label for="information">Uwagi</label>
    <textarea name="information" id="information" rows="5" cols="10"></textarea>
  </div>
  <div>
    <input type="submit" value="Zapisz" />
  </div>
</form>

W powyższym formularzu zostały umieszczone trzy pola: tekstowe, select oraz textarea. W divie „add-new-subform” znajdzie się podformularz z polem tekstowym, który pojawi się w momencie dodawania nowego rekordu. Nie będę tu prezentował całego pliku CSS, można go zobaczyć w zaprezentowanym wcześniej przykładzie.

Ważne są dwie definicje. Po pierwsze, należy ukryć podformularz i przygotować go do wyświetlenia na pierwszym planie (wyskoki z-index):

div#add-new-subform {position: absolute; display: none; z-index: 100;
 background-color: #fff; border: solid 1px #000; padding: 15px;}

Dodatkowo zdefiniujemy obiekt, który „ściemni” całość widocznej strony. Ważne, aby znalazł się on na obecnie widocznym obszarze, ale pod nowym oknem formularza. Dlatego musi mieć odpowiednią wartość z-index i na początku pozostać niewidoczny. Definicje przeźroczystości zostały przedstawione w sposób, dzięki któremu powinny się wyświetlać poprawnie we wszystkich popularnych przeglądarkach:

div#cover {position: fixed; width: 100%; height: 100%;
z-index: 99; background-color: #000000; -moz-opacity: 0.7; 
opacity: 0.7; filter: alpha(opacity=70);}

Teraz pozostaje oprogramowanie funkcjonalności w jQuery (dokładny opis poniżej):

$(document).ready(function(){
    $('#add-new-show').click(function(){
	// dodanie ciemnego tła
	$('body').prepend('<div id="cover">&nbsp;</div>');
	// wyświetlenie podformularza
	$("#add-new-subform").css({'display': 'block'});
      
	$("#add-new-save").click(function(){
	  var new_occupation = $("#new-occupation").val();
	  if(typeof new_occupation !== "undefined" && new_occupation){
	    // dodanie nowego rekordu do bazy oraz wpisu w polu select 
	    addNewOccupation(new_occupation);
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	  };
	});
	
	$("#add-new-cancel").click(function(){
	    // usunięcie ciemnego tła i ukrycie podformularza
	    $('#cover').remove();
	    $("#add-new-subform").css({'display': 'none'});
	});
    });
});      

function addNewOccupation(new_occupation){
  // tutaj za pomoca AJAX mozna dodać do bazy nowy rekord
  // zapytanie powinno zwrócić id nowego zawodu
  var id = 100;	// id nowego zawodu dodanego do bazy
  $("#occupation").append(new Option(new_occupation,id));
  $("#occupation").val(id);
}

Na początek ustalamy działanie dla akcji kliknięcia w przycisk „+” (#add-new-show). Kolejno: dodajemy nową warstwę do dokumentu, która przykryje całą obecnie wyświetlaną stronę (patrz definicja styli dla #cover) oraz wyświetlamy podformularz.

Następnie definiujemy odpowiednie działania dla klikniętego przycisku zapisania nowego zawodu (#add-new-save). Gdy został on wpisany w pojawiającym się polu tekstowym, wywołujemy funkcję addNewOccupation(), po czym usuwamy ciemne tło i ukrywamy podformularz. Funkcja dodania nowego zawodu powinna zawierać wywołanie AJAX, zapisujące dane do bazy po uprzednim sprawdzeniu ich poprawności. Wynikiem powinno być id dodanego rekordu, dzięki czemu będziemy mogli parę id oraz nazwa zawodu dopisać do pola select na formularzu głównym, a następnie zaznaczyć ją jako wybraną. W zaprezentowanym przykładzie nie przedstawiono samego zapisu do bazy, a do zmiennej id przypisana została przykładowa wartość.

Powyższy przykład został zaprezentowany w bardzo uproszczony sposób, może stanowić podstawę do własnej implementacji ciekawego wywołania okna dialogowego. Dostosowanie do własnych potrzeb nie powinno stanowić większego problemu.