j_cecha – programowanie – weryfikacja wypełnienia pól

W transakcji cecha.aspx możemy za pomocą podłączonego własnego skryptu wpływać na sposób działania i wyświetlania kontrolek na ekranie. Niniejszy artykuł poświęcony zostanie opisowi w jaki sposób za pomocą skryptu możemy zmienić sposób działania polecenia ZAPISZ cechy.

Zadanie do zrobienia

Transakcja cechy zawiera zestaw dowolnych kontrolek w naszym przykładzie są to kontrolki typu checkbox oraz pola opisowe. Chcemy zastąpić domyślny przycisk polecenia ZAPISZ i jego miejsce podstawimy własny, który przed zapisaniem cech zweryfikuje czy kontrolki z opisem powiązane z danych checkboxem są wypełnione. Jeżeli pola z opisem nie będą wypełnione to program nie zapisze zmian, wyświetli komunikat dla użytkownika z informacją, że dane pole jest wymagane.

Realizacja

Konfiguracja formularza cech

Ustawiamy formularz w następujący sposób:

W efekcie użytkownik na ekranie zobaczy:

Proszę zwrócić uwagę na konfigurację kolumny parametry, dla kontrolki typu checkbox dodajemy parametr o nazwie ssready, która posłuży do identyfikacji kontrolek powiązanych (pola opisowe, które będą weryfikowane, czy zostały wypełnione). Przykład takiego parametru to ssready=4A, gdzie wartość 4A to dowolny identyfikator.

Kontrolki których wartości mają być weryfikowane oznaczone zostaną parametrem ssready i wartością kontrolki nadzorującej np, 4A (przykładowy zapis: 4A=”1″)

W efekcie pierwsza kontrolka checkbox ma za zadanie weryfikować oba pola opisowe znajdujące się pod nią oznaczone parametrami 4A.

Skrypt

Uruchamiając transakcję podłączamy plik ze skryptem, który zawierać będzie funkcje uruchamianą zaraz po załadowaniu strony. Przykładowo funkcja MojaOnready()

 
 function MojaOnReady() {
 var myButtons = "Zapisz";
 myButtons += "Anuluj";
 $("#rowButtons").html(myButtons);

$("#ButtonZapisz").click(function () {
 // KONTROLA
 var bKontrol = 0;
 $('[ssready]').each(function (index) {
 if ($(this).jqxCheckBox('val') == true) {
 if (bKontrol == 0) {
 var cname = "[" + $(this).attr("ssready") + "]";
 $(cname).each(function (index) {
 if (bKontrol == 0) {
 var cwartosc = $(this).val();
 if (cwartosc == "") {
 var id = $(this).attr("id");
 JqxPokazError(id, "Uzupełnij informacje !!!");
 bKontrol = 1;
 }
 }
 });
 }
 }
 })
 if (bKontrol == 0) {
 $('#Container').hide();
 SendForm('1');
 }
 });

$("#ButtonAnuluj").click(function () {
 AnulujZapis('ctl00_ContentPlaceHolder1_return_page');
 });

}

Podmiana przycisków

Chcemy zastąpić domyślne przyciski ZAPISZ i ANULUJ własną wersją, dlatego wykonujemy następujący kod.

var myButtons = "<span id='ButtonZapisz' class='art-button art-buttonGreen' ><img src='/images_m/16x16/floppy_disk.png' />Zapisz</span>";
myButtons += "<span id='ButtonAnuluj' class='art-button art-buttonRed' ><img src='/images_m/16x16/delete.png' />Anuluj</span>";
$("#rowButtons").html(myButtons);

następnie definiujemy co się ma wydarzyć, gdy użytkownik kliknie myszką w przycisk ZAPISZ

$("#ButtonZapisz").click(function () {

oraz w przycisk ANULUJ

$("#ButtonAnuluj").click(function () {

Funkcja ZAPISZ

Chcemy w pętli sprawdzić wszystkie znajdujące się na formularzu cech kontrolki i jeżeli wszystko jest wprowadzone poprawnie zapisać dane za pomocą standardowej funkcji SendForm(’1′);

Wskaźnikiem który wykorzystujemy, aby wiedzieć jaki jest wynik testu jest zmienna var bKontrol = 0;

Jeżeli jej wartość jest równa zero to znaczy, że formularz jest poprawnie wypełniony, zostanie zapisany i okno zamknięte.

Pierwsza pętla

Zadaniem pierwszej pętli jest pobranie wszystkich kontrolek oznaczonych parametrem ssready (a więc kontrolek checkbox posiadających taki parametr)

$('[ssready]').each(function (index) {

Sprawdzamy czy każda taka kontrolka ma wartość TRUE (użytkownik oznaczył pole jako aktywne = 1)

if ($(this).jqxCheckBox('val') == true) {

Jeżeli tak, to odczytujemy wartość parametru ssready i zapamiętujemy za pomocą zmiennej cname np. A4

var cname = "[" + $(this).attr("ssready") + "]";

Druga pętla

Druga pętla wykonywana jest dla wszystkich obiektów na formularzu oznaczonych parametrem odczytanym jako cname

$(cname).each(function (index) {

Ustawiamy zmienną cwartosc ktora odczyta nam wartość kontrolki (tekst wpisany przez użytkownika programu)

var cwartosc = $(this).val();

następnie sprawdzamy czy wartość ta jest pusta

if (cwartosc == "") {

i jeżlei tak to podstawiamy pod zmienną id identyfikator kontrolki

var id = $(this).attr("id");

, który przekazujemy do funkcji pokazującej błąd kontrolki

JqxPokazError(id, "Uzupełnij informacje !!!");

na koniec ustawiamy wartość zmiennej na inną niż 0, np. 1
bKontrol = 1;

Efekt działania

W efekcie próba zapisania formularza zakończy się komunikatem błędu, jeżeli wymagane pole nie zostanie wypełnione.

System YMS