Ajax - edycja treści po kliknięciu w tekst | DailyWeb.pl

Ajax - edycja treści po kliknięciu w tekst

Opublikowano 7 lat temu - 3


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.

Dużym atutem skryptu jest jego banalny sposób integracji z naszą witryną internetową. Wystarczy:

  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:
    <script type="text/javascript" src="instantedit.js"></script>
  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.
    <script type="text/javascript">
    setVarsForm("pageID=profileEdit&amp;userID=11"); </script>
  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
    <span id="userName" class="editText">

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