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.

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.