ajax instant edit1

Pragnę zaprezentować wam dzisiaj bardzo przydatny skrypcik, który poza swoja funkcjonalności z pewnością zwiększy atrakcyjność waszej strony internetowej. Mowa mianowicie o Easy AJAX inline text editor 2.0. Za jego pomocą będziecie mogli w łatwy sposób wprowadzić szybką edycje treści – zwyczajnie w nią klikając. Automatycznie pojawi się pole edycji (input/textarea) gdzie będzie można w szybki sposób nanieść zmiany. Po edycji, by zmiany zostały zachowany należy odkliknąć w inne miejscu na stronie. Demo skryptu zaprezentowane zostało tutaj.

  1. Pobrać skrypt InstantEdit 2.0 JS
  2. Utworzyć plik update.php, który będzie obsługiwał zmiany wprowadzone w treści (np. zapytanie do bazy danych jeśli z takiej korzystamy, aktualizające zmienioną treść). Przykład pliku znajduje się tutaj: update.php
  3. W nagłówku swojej strony należy umieścić kod odwołujący się do skryptu JS:
    [code]<script type="text/javascript" src="instantedit.js"></script>[/code]
  4. Opcjonalnie można ustawić wartości zmiennych, które mają być przekazywane do pliku update.php. Przydaje sie w przypadku chociażby identyfikacji użytkownika po jego nr id.
    [code]<script type="text/javascript">
    setVarsForm("pageID=profileEdit&amp;userID=11"); </script>[/code]
  5. Ostatnim krokiem będzie umieszczenie znaczników span z class – editText (wszystkie treści powinny mieć ten znacznik by skrypt działał) i unikalną nazwą id, w naszym przypadku userName [code]<span id="userName" class="editText">[/code]

I to wszystko co należy zrobić, by w pełni korzystać ze skryptu. Zaimplementowałem we własnym skrypcie, który aktualnie tworze i działa na prawdę wyśmienicie. Najtrudniejszą częścia wydaje się być utworzenie pliku aktualizacyjnego (update.php), natomiast jeśli ktoś chociaż troche dłubał przy PHP i bazach z pewnością sobie poradzi, gdyż nic innego nie trzeba utworzyć jak zapytanie SQL, UPDATE, które zaktualizuje dane. Jeśli byłyby z tym problemy, służę pomocą.

Strona WWW autora skryptu | DEMO


Posłuchaj nas!