Tutorial: dashboard web 2.0 dla leniwych…

Zadbajmy o feedback


Odnajdźmy fragment, w którym podpięliśmy okno dialogowe pod linki klasy “display-in-box”. Na początku naszej funkcji “złapmy” element klasy .tab-container (element, w kŧórym są zakładki) w którym został kliknięty link, który otworzył okno dialogowe, a następnie sprawmy, żeby po zamknięciu tegoż okna została odświeżona aktualnie aktywna (wybrana) zakładka w złapanym tab-containerze. Cała funkcja będzie wyglądać tak:

$("a.display-in-box").live(
        "click",
        function(){
           var tabContainer = $(this).parents(".ui-tabs");
           Boxy.load(
                 this.href,
                 {
                    title: (this.title)? this.title: this.href,
                    modal: true,
                    fixed: false,
                    afterHide: function() {
                        tabContainer.tabs(
                           "load",
                           tabContainer.tabs("option", "selected")
                        );
                     }
                 }
           );
           return false;
        }
);

Naprawmy szybko popsute usuwanie. Znajdźmy teraz fragment, w którym podpięliśmy ajaxa pod linki “delete” (czyli te klasy “tab-update”). I rozbudujmy wywołanie ajaxowe, na identycznej zasadzie jak przy okazji ładowania do boxy formularza z błędami walidacji.

Żeby coś z tym zrobić, musimy przy obsłudze linków sortowania i stronicowania w zakładkach trochę pogrzebać . Będziemy korzystać z tzw. low-level-interface. Dzięki niemu mamy większą kontrolę nad tym co się dzieje. Najpierw zrobimy tak, żeby pagination działał, a kliknięcie ‘delete’ nie kasowało zawartości zakładki:

   jQuery('#tabs a[href*=/sort:],#tabs a[href*=/page:],.tab-update').live('click', function(){
	    jQuery.ajax({
	    	url: 	jQuery(this).attr('href'),
	    	success: function(response, status, xhr){
	    	   if(response != ":ajaxRedirect"){
	    		   jQuery('#tabs>div:visible').html(response);
	    	   }
	      }
	    });
       return false;
   });

A teraz po prostu w wypadku otrzymania “:ajaxRedirect:” – odświeżmy zawartość zakładki, zamiast ładować response, dopisując blok else:

jQuery('#tabs a[href*=/sort:],#tabs a[href*=/page:],.tab-update').live('click', function(){
  jQuery.ajax({
    url: 	jQuery(this).attr('href'),
    success: function(response, status, xhr){
      if(response != ":ajaxRedirect:"){
	jQuery('#tabs>div:visible').html(response);
      }else {
	$("#tabs").tabs(
	  "load",
	  $("#tabs").tabs("option", "selected")
	);
      }
    }
  });
  return false;
});

Kolejnymi elementami są flashMessage. Nie działają teraz dobrze – po pierwsze nie dostajemy odpowiedniego feedbacku. Po drugie, po usunięcie elementu i kliknięciu “view” przy innym – w widoku szczegółów widzimy “Thing deleted” – spóźniony feedback jest gorszy niż żaden, bo wprowadza zamieszanie. Najprosztszym sposobem, aby to poprawić jest skopiowanie layoutu ajax:
/cake/libs/views/layouts/ajax.ctp do /app/views/layouts/ajax.ctp i dodanie kodu odpowiadającego za wyświetlenie wiadomości:

<?php echo $this->Session->flash(); ?>
<?php echo $content_for_layout; ?>

Jako wisienkę na torcie można dodać ficzer, żeby flash zniknął po chwili – zachęcam do własnych ekpserymentów, dzielenia się tym na swoich blogach linkując do tego tutoriala, oraz do komentarzy.

dzięki za czytanie!

dzięki za czytanie!


Jeśli uważasz, że autor tego wpisu odwalił niezłą robotę i czegoś Cię nauczył, albo jeśli uważasz zawartość tego bloga za interesującą nie wahaj się subskrybowac kanał rss, dodać jego adres w sygnaturkach swoich profili, dodać link do niego na własnym blogu i napisać co nieco od siebie w komentarzach pod postem.

Share Button

6 thoughts on “Tutorial: dashboard web 2.0 dla leniwych…

  1. I’m sure You do ;) I want to make It in English, thanks to You I have little more motivation to do so. So please stay tuned ;)

  2. Podzieliłem tutorial na strony dla Waszej wygody. Pozdrawiam.

  3. Ciekawy wpis, wydaje się być przejrzysty… pod koniec pewne rzeczy się komplikują, co znaczy że można się czegoś nowego nauczyć :)! ogólnie bardzo ciekawy tutorial, ale… już nie mogę się doczekać bardziej efektownych dodatków, które nie tylko są praktyczne ale i cieszą oko efektami :)

  4. Ja ogólnie rzecz biorąc pałam mniejszym uczuciem do fajerwerków – interesują mnie narzędzia usprawniające pracę. Ale napisz o czym chciałbym poczytać i zobaczymy co da się zrobić :)

  5. Ja również nie uważam, że strona bez “fajerwerków” to żadna strona, ale wiesz… czym ludzi nęcą w Sylwestra?
    Odpowiednio skonstruowany skrypt zachowuje swoją funkcjonalność a przy okazji nacieszy oko co zwiększa zainteresowanie :)

Leave a Reply

Your email address will not be published. Required fields are marked *