TinyMCE i AJAX

Napisany przez Szymon Sawicki dnia 28 kwietnia 2008, godzina 18:30  Rss do tej wiadomości

Tagi: AJAX + JavaScript + TinyMCE

Kwestia zostanie przedstawiona na przykładzie systemy e-commerce LogiShop nad którym aktualnie pracuje firma Logisoft.

O co chodzi? W sklepie mamy różne asortymenty produktów. Asortyment oznacza w tym przypadku jakąś linię produktów stworzoną przez jakąś firmę, np. perfumy Hugo Boss z linii Soul. Do każdego asortymenty należą różne produkty. W tym przypadku na pewno by ich się trochę uzbierało.

Kiedy tworzymy nowy produkt chcielibyśmy błyskawicznie skopiować treść opisu asortymentu do opisu produktu, gdyż np. jest zbieżna lub zwyczajnie nie chce nam się pisać kolejnego opisu. Przy pomocy opisywanego rozwiązania jesteśmy to w stanie zrobić błyskawicznie przy pomocy jednego kliknięcia. Służy do tego następująca funkcja JavaScript (lekko zmodyfikowana na potrzeby przykładu):

 function updateAssortmentData(url, editor_id, target_area, type) { 
   new Ajax.Request(
      url,
      {
          asynchronous:true,
          evalScripts:true,
          onComplete:function(request, json)
          {
               try {
                   tinyMCE.execInstanceCommand(editor_id, 'mceSetContent', false, request.responseText);
                   Logishop.hideIndicator();
                   new Effect.Highlight(target_area, {});
              }
              catch(e)
              {
                   alert(e);
              }
           },
           onLoading:function(request, json)
           {
               Logishop.showIndicator('Pobieranie opisu z asortymentu ...');
           },
           parameters:'assortment_id=' + $('product_assortment_id').value + '&type='+type
      }
   );
 }   

Jak widać na pierwszy rzut oka w funkcji jest wykorzystana popularna metoda Request biblioteki Ajaksowej Prototype, przy pomocy której dane są przesyłane i wstawiane jako treść danej instancji edytora. Parametr target_area w powyższym przykładzie określa element XHTML, który ma zostać podświetlony w celu zasygnalizowania wykonanej akcji pobrania danych. Parametr type natomiast służy do określania pola z bazy danych które chcemy pobrać.