j_insert_update – zaawansowane programowanie – ukrywanie i pokazywanie obiektów

Pewne pola na formularzu transakcji j_insert_update.aspx mogą wymagać pokazywania lub ukrywania w zależności od interakcji z użytkownikiem. W ramach wdrożenia może istnieć potrzeba, aby pewne pola były niewidoczne do czasu, aż użytkownik nie dokona określonego wyboru. Artykuł opisuje przykłady jak sterować zdarzeniami ukrywać i pokazywać obiekty na formularzu.

Przykład ukrywanie i pokazywanie obiektu na formularzu

Pole tekstowe (kontrolka INPUT) do wprowadzania danych może my ukrywać i wyświetlać tylko w określonych przez nas warunkach. Przykładowo formularz dopisywania kartoteki kontrahenta może wyglądać tak:

insert_update show hide

Chcemy aby obiekt NIP był domyślnie niewidoczny, ale po wyborze przez użytkownika handlowca z listy rozwijanej (COMBO) pole tekstowe NIP ma się wyświetlić aby można je edytować.

We własnym dołączonym pliku js w funkcji uruchamianej na zdarzenia onload (np. MojaOnLoad) wpisujemy skrypt:

function MojaOnLoad() {
$("#NIP").hide();
 $('#NRIDKNKAR').bind('select', function (event) {
  $("#NIP").show();
 });
}

gdzie obiekt o nawie NIPzostanie ukryty, obiekt listy wyboru handlowca będzie miał podłączoną obsługę zdarzenia wyboru (select), czyli jeżeli użytkownik wybierze handlowca to zostanie wykonane polecenie pokazanie obiektu NIP.

Gotowe, możemy sprawdzić działanie, po uruchomieniu strony zobaczymy formularz bez pola NIP

insert_update hide nip

Po wybraniu handlowca ze skorowidza wyświetli się pole na wpisanie NIPu

insert_update show nip

 

Podobnie możemy ukrywać lub pokazywać inne kontrolki na inne zdarzenia.

 

Przykład ukrywanie i pokazywanie wiersza

Powyższy przykład co prawda realizuje zadanie uniemożliwiające użytkownikowi na wpisanie danych w wybranej kontrolce, ale nie jest przyjazny dla użytkownika ponieważ widzi on pozostawiony opis (caption) ukrywanego obiektu. Dużo lepiej jest ukrywać i pokazywać cały wiersz zawierający zarówno opis jak i sam obiekt.

Każdy wiersze umieszczany na formularzu posiada unikalny identyfikator (unikalny jeżeli osoba konfigurująca zachowa unikalność pól umieszczanych na formularzu). Identyfikator składa się z dwóch członów:

  • słowo row rozpoczynające identyfikator wiersza
  • nazwa kontrolki znajdującej się w danym wierszu

Przykładowo wiersza zawierający województwo będzie miał identyfikator rowWOJEWODZTWO, a wiersz dla pola kraj to identyfikator rowKRAJ.

Zmieniamy więc naszą funkcję w następujący sposób, chcemy aby wiersz z krajem był widoczny, ale jeżeli użytkownik wybierze handlowca to pole ma zostać ukryte:

function MojaOnLoad() {
 $('#NRIDKNKAR').bind('select', function (event) {
   $("#rowKRAJ").hide();
 });
}

sprawdzamy działanie, po uruchomieniu formularz pokazuje wszystkie wiersze:

insert_update row

Po wybraniu handlowca, sytuacja na formularzu się zmieni, wiersz KRAJ zostanie ukryty (zniknie), tak że użytkownik nie będzie mógł zmienić kraju.

insert_update row kraj

 

Przykład zmiany stanu edycji

W podobny sposób możemy zamiast ukrywania obiektów zmieniać ich stan na uniemożliwiający edycję, np. pole NIP ma być nieedytowalne jeżeli użytkownik wybierze handlowca, zmieniamy funkcje:

function MojaOnLoad() {

 $('#NRIDKNKAR').bind('select', function (event) {
 $("#NIP").prop( "disabled", true );
 });
}

 

W efekcie

insert_update object disabled

 

 

 

Podsumowanie

W podany sposób możemy ukrywać lub pokazywać dowolnie obiekty na formularzu użytkownika w zależności od interakcji, ale można równie dobrze pokazywać lub ukrywać obiekty w zależności od aktualnie zapisanych danych w bazie. Obiekty możemy ukrywać, albo zmieniać ich stan na niedostępny (disabled).

Wykorzystujemy do tego odwołania do obiektów lub wierszy i za pomocą prostych poleceń show(), hide() czy zmiany właściwości prop( „disabled”, true ) lub prop( „disabled”, false ); sterujemy dostępnością do określonych pól na formularzu.