Poprzedni odcinek przyjemnego i praktycznego kursu jQuery pokazał nam, jak zacząć współpracę z elementami formularzy. Dziś pogłębimy nieco temat, doskonaląc skrypt znany z trzeciej części. Pojawi się także nowy, praktyczny i miejmy nadzieje użyteczny przykład, który pokaże, jak dodać i usunąć elementy formularza przy pomocy frameworka.
Standardowo, przypomnijmy sobie, na czym stoimy po lekturze trzeciej części poradnika:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z licznikiem znaków formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
$("#countChars").html($(this).val().length);
});
});
</script>
</head>
<body>
<form name="formularz" action="">
<textarea name="content"></textarea>
</form>
<p id="countChars"></p>
</body>
</html>Wszystkie pięknie, problem polega jednak na tym, że większość naszych użytkowników nie pracuje w Urzędzie Statystycznym i z reguły niepotrzebna jest im informacja, ile znaków zapisali. O wiele lepszym pomysłem jest wprowadzenie limitu znaków, które można wpisać w textarea. Ponadto możemy wyświetlić korzystającym z naszej strony informację, ile znaków pozostało im do wyczerpania limitu, co wydaje się znacznie rozsądniejsze.
Na początku należy ustalić jakikolwiek limit, który będzie zapisany w zmiennej limit na początku skryptu:
<script type="text/javascript">
var limit = 50;Jak widać, uznałem, że 50 znaków to będzie wystarczające maksimum. Oczywiście to od Ciebie zależy, jaką liczbę wpiszesz.
Mamy limit, pora na wykrycie momentu, kiedy użytkownik podczas pisania w textarea przekroczy limit znaków, ustalony przez nas wcześniej. Po chwili zastanowienia stwierdzamy, że limit zostaje przekroczony, jeśli liczba znaków wpisana do formularza jest większa od limitu. Wielu z Was zaświtała już pewnie prosta instrukcja warunkowa:
if (liczba_znakow > limit) { spieprzaj dziadu... }No dobrze, mamy pomysł na to, jak rozpoznać, kiedy trzeba będzie po męsku rozprawić się z użytkownikiem i powiedzieć mu, że przekroczył właśnie podany limit. Pozostaje pytanie, co dalej? Otóż musimy z tego, co zostało wpisane do textarea wyciąć tyle znaków, ile wynosi limit. Jeśli limit to 50, wytniemy 50 pierwszych znaków, bo przecież kłóciłoby się z założeniem limitu. Kiedy to zrobimy, pora wkleić te 50 znaków do formularza, po uprzednim wykasowaniu wszystkich wpisanych znaków.
Jak dowiedzieliśmy się z poprzedniego odcinka, liczbę wpisanych znaków do elementu formularza można uzyskać według poniższego szablonu:
$(selektor do elementu).val().length;Podstawiając to do warunku, który obmyśliliśmy sobie chwilę wcześniej, wyglądałoby to wszystko tak:
if ($(this).val().length; > limit) { spieprzaj dziadu... }Umiejscowijmy to teraz w dokumencie:
<script type="text/javascript">
var limit = 50;
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
if ($(this).val().length; > limit)
{
// tutaj dziad sobie spieprza...
}
$("#countChars").html($(this).val().length);
});
});
</script>Ja, jako że lubię przejrzystość, zapisałbym liczbę wpisanych znaków w postaci klarownie nazwanej zmiennej, np. count_chars:
var count_chars = $(this).val().length;
if (count_chars > limit)
{
// nadal spieprza...
}Przejrzyściej? Oczywiście!
Jak sobie ustaliliśmy, musimy teraz pobrać tyle znaków z elementu textarea, ile wynosi maksimum.
var count_chars = $(this).val().length;
if (count_chars > limit)
{
var new_value = $(this).val().substring(0, limit);
}. W ten sposób, w zmiennej new_value siedzi ciąg wpisanych przez użytkownika znaków, licząc od pierwszego do 50-tego (bo tyle wynosi zmienna limit). Zastosowana tutaj metoda jest bardzo prosta, najpierw pobieramy ciąg wszystkich wpisanych znaków do textarea($(this).val()) – z pomocą przychodzi nam tutaj funkcja val(), która pobiera wartości formularzy w jQuery. Potem, dzięki funkcji JavaScript (substring), obcinamy go z prawej strony.
Czas na wklejenie tych 50 znaków do textarea. Z pomocą przychodzi ponownie funkcja val(), która oprócz tego, że pobiera, to także ustawia wartości elementom formularzy.
var count_chars = $(this).val().length;
if (count_chars > limit)
{
var new_value = $(this).val().substring(0, limit);
$(this).val(new_value);
}Jedyne, co nam zostało do zrobienia, to wyświetlenie liczby pozostałych znaków. Liczba ta równa się różnicy wartości limitu i wpisanych dotychczas znaków. Jeśli limit wynosi 50, a my wpisaliśmy dotychczas 20 znaków, to wyświetlić powinna się liczba 30 – wynik odejmowania 20 od 50.
Przyjmijmy, że informacja ta zapisana będzie w HTML w poniższej postaci:
<p id="countChars">Pozostalo <span>50</span> znaków</p>Jeśli wpiszemy jeden znak, to w <span> widnieć będzie wartość 49 i tak dalej. Należy więc, dzięki jQuery, odnaleźć wszystkie tagi span w akapicie o id=”countChars”, a potem ustawić mu wartość odpowiadającą różnicy limitu i liczby wpisanych znaków.
$("#countChars span")W ten sposób odnosimy się do wszystkich elementów span zawartych w elemencie o identyfikatorze countChars. Zawartość tych elementów, co już przerabialiśmy wcześniej, ustalimy dzięki funkcji html(“jakas wartosc”), co da w prostym przełożeniu $(“#countChars span”).html(“jakas wartosc”) i efekt:
<p id="countChars">Pozostalo <span>jakas wartosc</span> znaków</p>Pozostało nam wstawić wspominaną wcześniej różnicę znaków zamiast “jakas wartosc”:
$("#countChars span").html(limit - $(this).val().length);Całość wygląda teraz tak i jest gotowa do działania:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z licznikiem znaków formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
var limit = 5;
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
var count_chars = $(this).val().length;
if (count_chars > limit)
{
var new_value = $(this).val().substring(0, limit);
$(this).val(new_value)
}
$("#countChars span").html(limit - $(this).val().length);
});
});
</script>
</head>
<body>
<form name="formularz" action="">
<textarea name="content"></textarea>
</form>
<p id="countChars">Pozostalo <span>200</span> znaków</p>
</body>
</html>Testując podany przykład natrafiamy jednak na mały problem – wszystko działa, dopóki nie wykorzystamy limitu znaków. Kiedy zostaje nam dokładnie 0 znaków do wpisania, pojawia się nam informacja, że wykorzystaliśmy <puste miejsce> znaków, zamiast 0 znaków. Dlaczego się tak dzieje?
Otóż jQuery interpretuje wartość 0 jako null, zero, nic. Myśli po prostu w kategoriach, w których zero traktujemy jak wartość logiczną, a nie jako wartość ciągową. Musimy więc dać do zrozumienia funkcji html, że podajemy ciąg znaków, a nie wartość logiczną. Jak wiadomo, ciąg znaków w JS otaczamy apostrofami bądź cudzysłowami. Poprawnym zapisem będzie więc coś takiego:
$("#countChars span").html(""+(limit - $(this).val().length)+"");<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z licznikiem znaków formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
var limit = 5;
$(document).ready(
function()
{
$("form[name=formularz] textarea[name=content]").keyup(
function()
{
var count_chars = $(this).val().length;
if (count_chars > limit)
{
var new_value = $(this).val().substring(0, limit);
$(this).val(new_value)
}
$("#countChars span").html(""+limit - $(this).val().length+"");
});
});
</script>
</head>
<body>
<form name="formularz" action="">
<textarea name="content"></textarea>
</form>
<p id="countChars">Pozostalo <span>200</span> znaków</p>
</body>
</html>Dodawanie i usuwanie elementów formularza
Często chcemy umożliwić automatyczne dodawanie do dokumentów jakichś tagów. Najczęściej chodzi nam o elementy formularzy. Nierzadko, kiedy wypełnimy jakieś pole, ukazuje się nam automatycznie następne, którego obecność jest uzależniona od wpisania czegoś we wcześniejsze. I tak dalej. Zajmijmy się najpierw prostym dodawaniem różnego rodzaju inputów po kliknięciu w link (wraz z możliwością ich usunięcia).
Dokument, na jakim będziemy pracować wygląda następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z dodawaniem i usuwaniem elementów formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
label
{
display: block;
}
label a
{
color: #CC0000;
text-decoration: none;
margin-left: 5px;
}
label a:hover
{
text-decoration: underline;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod JavaScript: -->
<script type="text/javascript">
</script>
</head>
<body>
<a href="#" id="dodaj">Dodaj element formularza</a>
<form name="formularz" action="">
</form>
</body>
</html>Po kliknięciu w Dodaj element formularza formularz powinien mieć taką postać:
<form name="formularz" action="">
<label><input type="text" /><a href="#">usuń</a></label>
</form>Po drugim kliknięciu elementy label będą dwa, po trzecim trzy i tak dalej.
Jak zapewne się domyślasz, należy przechwycić moment kliknięcia w link o id=”dodaj”, potem stworzyć w JS tagi label, input i a, i dodać dwa ostatnie do utworzonego labela. Potem cały, wypełniony innymi tagami element label dodamy do formularza.
Zaczniemy standardowo:
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{Po załadowaniu się drzewa DOM, skrypt znajdzie element o identyfikatorze dodaj i przypisze mu zdarzenie click, które oznacza kliknięcie tego elementu. Pora teraz zdefiniować, co ma wykonać się podczas tego zdarzenia. To natomiast uzgodniliśmy wcześniej – musimy utworzyć stosowne tagi i dodać je w określonej kolejności do odpowiednich, innych tagów.
Jak zapewne pamiętasz, elementy drzewa DOM (czyli właśnie tagi) tworzyliśmy poprzed funkcję document.createElement(). Jeśli chcieliśmy stworzyć div, to pisaliśmy:
var nowy_div = document.createElement("div");W jQuery nie musimy używać aż tak długiej konstrukcji. Przykładowo, tworzenie tagu div wygląda tak:
var nowy_div = $("<div>");Wiedz, że można też użyć:
var nowy_div = $(document.createElement("div"));Utwórzmy więc trzy pożądane elementy:
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
var new_link = $("<a>");Każdy z powyższych elementów zapisany jest w oddzielnych zmiennych, dzięki którym będziemy mieli łatwy doń dostęp.
Pierwsze, co musimy zrobić, to określić, jaki atrybut type ma mieć nasz input. Uznajmy, że będzie to text. Jak więc go ustawić? Pomoże w tym nam funkcja attr(), która podobnie jak val() pobiera i ustawia atrybuty danych tagów. Do roboty:
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");Wyróżnijmy fragment, który poddany został modyfikacjom:
var new_input = $("<input>");
new_input.attr("type", "text");Jak widzisz, mając w zmiennej new_input odnośnik do utworzonego elementu formularza, nadajemy mu, dzięki funkcji attr, atrybut type równy text. Pewnie Cię dziwi brak $(), ale spójrz, co zawiera ta zmienna, a wszystko stanie się prostsze. To tak, jakbyś napisał:
$("<input>").attr("type", "text");My natomiast używamy zmiennych, ponieważ okażą się one bardzo pomocne, kiedy będziemy dodawać poszczególne elementy do innych tagów.
Pora zająć się dodawanym linkiem. Jako że jest on całkowicie goły i wesoły, nadamy mu atrybut href i jakąś zawartość pomiędzy tagami, niech to będzie usuń.
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");
new_link.attr("href", "#");
new_link.html("usuń");Pora teraz sprawić, że link i input zostaną dodane do nowego elementu label (który mieści się w zmiennej new_label), a ten, już nimi uzupełniony, trafi do całego formularza. Pomoże nam w tym funkcja append(), która użyta z jakimś elementem dodaje na jego koniec to, co umieścimy w argumencie. Np.:
$("p#akapit").append("<a>cos</a>");doda do akapitu o id=”akapit” link o treści “cos”. Odnośnik ten trafi na sam koniec drzewa dzieci akapitu.
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");
new_link.attr("href", "#");
new_link.html("usuń");
new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);
});
});
</script>Dodaliśmy to:
new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);Pierwsza linijka dodaje do label nasz nowy input, druga link, a trzecia dodaje do formularza o name=”formularz” element label wraz z jego zawartością.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z dodawaniem i usuwaniem elementów formularza</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
label
{
display: block;
}
label a
{
color: #CC0000;
text-decoration: none;
margin-left: 5px;
}
label a:hover
{
text-decoration: underline;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod JavaScript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");
new_link.attr("href", "#");
new_link.html("usuń");
new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);
});
});
</script>
</head>
<body>
<a href="#" id="dodaj">Dodaj element formularza</a>
<form name="formularz" action="">
</form>
</body>
</html>Otrzymaliśmy coś takiego, jak powyżej. Po raz kolejny można mieć jednak kilka zastrzeżeń, co do działania całości. Po pierwsze, link usuń nie usuwa całego labela, który jest jego rodzicem i zawiera input do wywalenia. Pora to zmienić. Znajdujemy więc linijkę, gdzie tworzymy nowy link. Musimy mu nadać zdarzenie click. Podczas tego zdarzenia, znajdziemy jego rodzica (funkcja parent()), który musi być tagiem typu label. Dzięki funkcji remove() usuniemy go z drzewa DOM.
new_link.click(function()
{
$(this).parent("label").remove();
});Teraz pozostaje tylko dodać na sam koniec skryptu return false; by zablokować ewentualne przechodzenie do adresu linka Dodaj nowy element:
<script type="text/javascript">
$(document).ready(
function()
{
$("#dodaj").click(function()
{
var new_label = $("<label>");
var new_input = $("<input>");
new_input.attr("type", "text");
var new_link = $("<a>");
new_link.attr("href", "#");
new_link.html("usuń");
new_link.click(function()
{
$(this).parent("label").remove();
});
new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);
return false;
});
});
</script>To samo można zrobić, z usuwaniem labela:
new_link.click(function()
{
$(this).parent("label").remove();
return false;
});Wycinek z dokumentacji
W każdym odcinku znajdą się bardzo proste i dużo pokazujące przykłady funkcji z danego odcinka, zaczerpnięte z oficjalnej dokumentacji jQuery. Wielokrotnie, jak znam życie, spojrzysz najpierw tutaj, nim weźmiesz się za tekst całego kursu i jest to dobre podejście. Kod jQuery jest często dość nieczytelny i może wydawać się zagmatwany. Proste, krótkie przykłady to zaś dobry sposób na uzmysłowienie sobie działania funkcji.
parent(filtr)
Funkcja użyta w kontekście danego elementu pobiera jego rodzica, który jest regulowany przez podany filtr w postaci selektora, tagu etc…
Kod:
<p><a href="ferrante.pl" id="link">ferrante blog</a></p>$("#link").parent("p");Zwróci:
<p></p>append(element DOM)
Funkcja użyta w kontekście danego elementu dodaje doń nowy element drzewa DOM.
Kod:
<p><a href="ferrante.pl" id="link">ferrante blog</a></p>$("#link").append("<strong>Tak, to jest blog Ferrante</strong>");Zwróci:
<p><a href="ferrante.pl" id="link">ferrante blog <strong>Tak, to jest blog Ferrante</strong></a></p>attr(nazwa atrybutu, nowa wartość atrybutu)
Funkcja użyta w kontekście danego elementu z pierwszym argumentem – pobiera wartość atrybutu o podanej nazwie, z dwoma – ustala nową wartość atrybutowi o podanej nazwie.
Kod:
<p></p>$("p").attr("id", "akapit");Zwróci:
<p id="akapit"></p>Kod:
<p class="akapit"></p>$("p").attr("class");Zwróci:
akapitremove(filtr)
Funkcja użyta w kontekście danego elementu usuwa go z drzewa elementów DOM.
Kod:
<p><span></span></p>$("p").remove("span");Zwróci:
<p></p>Kod:
<p></p>$("p").remove();Zwróci:
...
Komentarze
> W jQuery nie musimy używać aż tak długiej konstrukcji. Przykładowo, tworzenie tagu div wygląda tak:
Poniżej tego tekstu jest kod, ale chyba źle przedstawiony (wcięło część tekstu) ;-]
Fixed, dzieki :)
jupi! wreszcie kolejny kurs! super ;-)
Hej, dzięki za kolejny odcinek. Mam małe ale, otóż twój przykład z dodawaniem pól do formularza działa na jQuery 1.1.3.1, ja działałem na 1.2 i… nie działa ;) Dopiero to znalazłem, jak wykumam już wszystko to napiszę co i jak.
Jak zwykle swietnie i przejrzyscie opisane :) jedna mala uwaga:
po wywolaniu przykladu z limitem znakow:
http://ferrante.pl/examples/jquery/jQuery_4a.html
i klepnieciu np. javascript:{var limit=500;} podwyzszamy limit do interesujacej nas wartosci de facto omijajac limit:)
Pzdr
No tak, trzeba zedytowac htmla tez :) Zaraz poprawiam.
Witam :)
Dzięki za interesujący kurs :) wprawdzie nie mam problemów z czytaniem anglojęzycznej dokumentacji, ale nie ma to jak przeczytać dobry artykuł w języku polskim. Oczywiście czekam na ciąg dalszy :)
Pozdrawiam
Witam! To prawda, przykład z dodawnanie pól formularza nie działa w nowszej wersji 1.2. Powodem tego jest fakt, iż nie należy tworzyć elementu “input” bez atrybutu “type”, dlatego następujący fragment kodu:
var new_input = $("");
new_input.attr("type", "text");
zamieniamy na:
var new_input = $("");
I juz wszystko śmiga jak trzeba.
Pozdrawiam i gratuluje ciekawego kursu.
ehhh przydałby się podgląd komentarza przed dodaniem albo automatyczna zamiana znaków ‘większości’ / ‘mniejszości’ w przydaktu innych – niedozwolonych tagów na encje. Spróbuję jeszcze raz:
Kod który należy zamienić:
var new_input = $("<input>");
new_input.attr("type", "text");
Kod na który zamieniamy:
var new_input = $("<input type='text' />");
Jeśli znów wcieło kod, to poddaje się, opis w sumie mówi w czym rzecz..
Pozdrawiam!
Jeszcze jedna poprawka. Powyższe rozwiązanie działa w Operze i Firefoxie, ale nie w IE, ponieważ tworząc elementy dzrzewa DOM, “nie domkneliśmy ich”. Zatem zamiast pisać:
var new_label = $("<label>");
var new_link = $("<a>");
Należy użyć konstrukcji:
var new_label = $("<label></label>");
var new_link = $("<a></a>");
Pozdrawiam!
Czekam na V część kursu. Mam nadzieję, że zaczepisz o funkcje Ajax’a :)
Super materiał! Gratulacje! p.s Nowa szata graficzna strony prezentuje się doskonale!
w takim razie:
$("#link").append("Tak, to jest blog Ferrante");dodaje zawartość na końcu w tagu o id=”link” czy jak to jest pokazane w przykładzie, za tag zamykający o tym id??
@Lizard
W przykładzie jest błąd, tekst “Tak, to jest blog Ferrante” znajdzie się wewnątrz tagu o id=”link”.
Aj tak Panowie, dzieki za czujnosc, juz poprawiam!
Dzięki panowie za poprawki artykułu , bez waszej interwencji poległbym na tym przykładzie z dodawaniem nowych tagów bez domknięcia , teraz wiem o co chodzi , podziękowania należą się także (a może przede wszystkim) autorowi strony.
I jeszcze jedna mała uwaga , tym razem nie do treści kursu ale działania tej strony. Czasem gdy próbuje dodać komentarz , po kliknięciu w “dodaj komentarz” przeglądarka próbuje otwierać dokument .rtf.
Hmm kurs świetny, ale nie wiem dlaczego w firefoxie 3 nie chce mi działać podany tutaj sposób:/ Nawet po skopiowaniu całego kodu:(
Mi też właśnie nie działa, ale znalazłem błąd, a mianowicie w kursie użyto starszej wersji jQuery. Może ktoś wie co trzeba zmienić żeby działał skrypt z nową wersją jQuery?
Pozdro for All
Powinno juz dzialac z nowa wersja ;-)
Nie rozumiem tego:
Teraz pozostaje tylko dodać na sam koniec skryptu return false; by zablokować ewentualne przechodzenie do adresu linka Dodaj nowy element:
O co dokładnie chodzi? Proszę o łopatologiczne wytłumaczenie bo dopiero zaczynam uczyć się JSa i jQ. Z tego co czytałem to funkcja return przerywa wykonywanie funkcji…
PS: dziś przetestowałem przykłady z tej lekcji, oczywiście działają bez zarzutu z nową wersją jQ (1.3.2)
Dzięki za jasne wytłumaczenie.
@Apsik
I dobrze przeczytałes, w tym wypadku po wykonania sie funkcji onclick() na linku nie zostanie wykonane już standardowe zachowanie linku (przejście do adresu podanego w href). return false przerywa (kończy) wykonywane zdarzenia po kliknięciu.
skoro nikt tego wcześniej nie zgłosił to pewnie ja coś sknociłem ale kod: if ($(this).val().length; > limit) { spieprzaj dziadu… } mi nie działa. Dopiero po usunięciu średnika ze sprawdzenia warunku wszystko jest ok. Jeszcze raczkuję i nie wiem, czy taka instrukcja w jquery jest dopuszczalna
Niestety, ten pierwszy skrypt (ograniczenie liczby znaków w polu tekstowym) nie działa pod IE7. Jest jakiś sposób aby to naprawić?
Hmm… Tak sobie myślę, że skoro
var count_chars = $(this).val().length;
To można sobie skrócić kod i napisać:
$(“#countChars span”).html(“”+limit – count_chars”");
Chyba krócej, nie? :)
Błąd w komentarzu wyżej, można napisać:
$(“#countChars span”).html(“”+limit – count_chars+””);
{ spieprzaj dziadu… } teraz to się kręci łezka w oku…..
Mam, wrazenie ze osoba ktora tworzyla ten kurs, juz dawno sie to znudzilo. Kurs jest bardzo nie zrozumiały, ciezko wywnioskowac o co chodzi autorowi, bez kopiowania calego gotowego kodu i bardzo wnikliwego spojrzenia na dzialalnosc tych ze linijek kodu, niema sposobu aby ktos to zrozumial, a juz tym bardziej sie stad czegos nauczyl. Przykro mi takie jest”moje” zdanie. Praca zrobiona na szybko bez przemyslenia. Pozdrawiam