🚀 go-pugleaf

W dniu sobota, 21 listopada 2015 16:42:53 UTC+1 użytkownik jivan...@poczta.onet.pl napisał:
> Uczę się JavaScriptu. Na razie jestem kiepski. Mam na formularzu (nazwanym formName) pole textarea (nazwane 'Opis:') i chciałbym żeby użytkownik miał informację ile znaków może jeszcze wprowadzić. Robię to tak (używam jQuery na stronie bo jest mi potrzebne do innych rzeczy):
> 
> $('form#' + formName + ' textarea#message').keyup(function () { return onKeyUpAtTextArea('contact', 'message'); });
> ...
> function maxLengthOfArea(textarea, counter) {
>     if (textarea.getAttribute('maxlength') >= textarea.value.length) {
>         counter.innerHTML = textarea.getAttribute('maxlength') - textarea.value.length;
>         return true;
>     }
>     return false;
> }
> ...
> function onKeyUpAtTextArea(controller, elemId) {
>     'use strict';
>     var formName = getCurrentFormName(controller);
>     var currentForm = getCurrentForm(controller);
>     var textarea = getFormElement(currentForm, elemId);
>     var counter = $('form#' + formName + ' span#' + elemId + '_left')[0];
>     return maxLengthOfArea(textarea, counter);
> }
> 
> Problem w tym, że funkcja onKeyUpAtTextArea nie jest wołana przy naciskaniu klawisza w polu textarea. Debuggując JavaScript zauważyłem, że przy wykonywaniu kodu jQuery:
> 
> 	// Handle event binding
> 	jQuery.fn[ name ] = function( data, fn ) {
> 		return arguments.length > 0 ?
> 			this.on( name, null, data, fn ) :
> 			this.trigger( name );
> 	};
> 
> mam:
> 
> fn == /\r?\n/g
> data == "ReferenceError: data is not defined"
> name == ""
> jQuery.fn.name == undefined
> 
> Czy to może być przyczyną tego że onKeyUpAtTextArea nie jest wywoływana?
> Rozwiązanie mi działało, ale po przerobieniu strony na responsywną przestało działać.
> Jak rozwiązać problem?

Ala nakomplikowane, aż mi się nie chce czytać :) 
Raczej nie onkeyUp tylko onChange kontrolki. I po co to całe JQuery?

Paweł

W dniu niedziela, 22 listopada 2015 14:03:09 UTC+1 użytkownik zpksoft napisał:
> W dniu sobota, 21 listopada 2015 16:42:53 UTC+1 użytkownik jivan...@poczta.onet.pl napisał:
> > Uczę się JavaScriptu. Na razie jestem kiepski. Mam na formularzu (nazwanym formName) pole textarea (nazwane 'Opis:') i chciałbym żeby użytkownik miał informację ile znaków może jeszcze wprowadzić. Robię to tak (używam jQuery na stronie bo jest mi potrzebne do innych rzeczy):
> > 
> > $('form#' + formName + ' textarea#message').keyup(function () { return onKeyUpAtTextArea('contact', 'message'); });
> > ...
> > function maxLengthOfArea(textarea, counter) {
> >     if (textarea.getAttribute('maxlength') >= textarea.value.length) {
> >         counter.innerHTML = textarea.getAttribute('maxlength') - textarea.value.length;
> >         return true;
> >     }
> >     return false;
> > }
> > ...
> > function onKeyUpAtTextArea(controller, elemId) {
> >     'use strict';
> >     var formName = getCurrentFormName(controller);
> >     var currentForm = getCurrentForm(controller);
> >     var textarea = getFormElement(currentForm, elemId);
> >     var counter = $('form#' + formName + ' span#' + elemId + '_left')[0];
> >     return maxLengthOfArea(textarea, counter);
> > }
> > 
> > Problem w tym, że funkcja onKeyUpAtTextArea nie jest wołana przy naciskaniu klawisza w polu textarea. Debuggując JavaScript zauważyłem, że przy wykonywaniu kodu jQuery:
> > 
> > 	// Handle event binding
> > 	jQuery.fn[ name ] = function( data, fn ) {
> > 		return arguments.length > 0 ?
> > 			this.on( name, null, data, fn ) :
> > 			this.trigger( name );
> > 	};
> > 
> > mam:
> > 
> > fn == /\r?\n/g
> > data == "ReferenceError: data is not defined"
> > name == ""
> > jQuery.fn.name == undefined
> > 
> > Czy to może być przyczyną tego że onKeyUpAtTextArea nie jest wywoływana?
> > Rozwiązanie mi działało, ale po przerobieniu strony na responsywną przestało działać.
> > Jak rozwiązać problem?
> 
> Ala nakomplikowane, aż mi się nie chce czytać :) 
> Raczej nie onkeyUp tylko onChange kontrolki. I po co to całe JQuery?
> 
> Paweł

No właśnie. Przecież nawet jak pytający korzysta z JQuery
to nic nie stoi na przeszkodzie aby używać czystego JS.

Andrzej.

W dniu 11/21/2015 o 4:42 PM, jivanmukta@poczta.onet.pl pisze:
> Uczę się JavaScriptu. Na razie jestem kiepski. Mam na formularzu
> (nazwanym formName) pole textarea (nazwane 'Opis:') i chciałbym żeby
> użytkownik miał informację ile znaków może jeszcze wprowadzić. Robię
> to tak (używam jQuery na stronie bo jest mi potrzebne do innych
> rzeczy):
>
> $('form#' + formName + ' textarea#message').keyup(function () {
> return onKeyUpAtTextArea('contact', 'message'); }); ... function
> maxLengthOfArea(textarea, counter) { if
> (textarea.getAttribute('maxlength') >= textarea.value.length) {
> counter.innerHTML = textarea.getAttribute('maxlength') -
> textarea.value.length; return true; } return false; } ... function
> onKeyUpAtTextArea(controller, elemId) { 'use strict'; var formName =
> getCurrentFormName(controller); var currentForm =
> getCurrentForm(controller); var textarea =
> getFormElement(currentForm, elemId); var counter = $('form#' +
> formName + ' span#' + elemId + '_left')[0]; return
> maxLengthOfArea(textarea, counter); }
>
> Problem w tym, że funkcja onKeyUpAtTextArea nie jest wołana przy
> naciskaniu klawisza w polu textarea. Debuggując JavaScript
> zauważyłem, że przy wykonywaniu kodu jQuery:
>
> // Handle event binding jQuery.fn[ name ] = function( data, fn ) {
> return arguments.length > 0 ? this.on( name, null, data, fn ) :
> this.trigger( name ); };
>
> mam:
>
> fn == /\r?\n/g data == "ReferenceError: data is not defined" name ==
> "" jQuery.fn.name == undefined
>
> Czy to może być przyczyną tego że onKeyUpAtTextArea nie jest
> wywoływana? Rozwiązanie mi działało, ale po przerobieniu strony na
> responsywną przestało działać. Jak rozwiązać problem?

Najlepiej by było, gdybyś wyizolował ten przykład na 
http://jsfiddle.net/ i sprawdził czy tam zadziała. To pierwszy krok.

A co do mieszania czystego JavaScriptu z jQuery - da się, ale czasem dla 
zachowania spójności kodu brnie się tylko w jQuery :-(

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

W dniu 23.11.2015 o 11:22, Cezary Tomczyk pisze:
> Najlepiej by było, gdybyś wyizolował ten przykład na
> http://jsfiddle.net/ i sprawdził czy tam zadziała. To pierwszy krok.

http://jsfiddle.net/z3qrnx8t/

Nie woła się onChangeAtTextArea.

W dniu 11/23/2015 o 3:18 PM, jivanmukta@poczta.onet.pl pisze:
> W dniu 23.11.2015 o 11:22, Cezary Tomczyk pisze:
>> Najlepiej by było, gdybyś wyizolował ten przykład na
>> http://jsfiddle.net/ i sprawdził czy tam zadziała. To pierwszy krok.
>
> http://jsfiddle.net/z3qrnx8t/
>
> Nie woła się onChangeAtTextArea.


http://jsfiddle.net/z3qrnx8t/2/
ReferenceError: getCurrentStyle is not defined

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

W dniu poniedziałek, 23 listopada 2015 18:11:12 UTC+1 użytkownik Cezary Tomczyk napisał:
> W dniu 11/23/2015 o 3:18 PM, jivanmukta@poczta.onet.pl pisze:
> > W dniu 23.11.2015 o 11:22, Cezary Tomczyk pisze:
> >> Najlepiej by było, gdybyś wyizolował ten przykład na
> >> http://jsfiddle.net/ i sprawdził czy tam zadziała. To pierwszy krok.
> >
> > http://jsfiddle.net/z3qrnx8t/
> >
> > Nie woła się onChangeAtTextArea.
> 
> 
> http://jsfiddle.net/z3qrnx8t/2/
> ReferenceError: getCurrentStyle is not defined
> 
> -- 
> Cezary Tomczyk
> http://www.ctomczyk.pl/

W dniu 23.11.2015 o 18:11, Cezary Tomczyk pisze:
> http://jsfiddle.net/z3qrnx8t/2/
> ReferenceError: getCurrentStyle is not defined

http://jsfiddle.net/z3qrnx8t/3/

Nie wiem o co chodzi, ale na localhoście onChangeAtTextArea czasem zatrzymuje się na breakpoincie a czasem nie.
Problem jest w tym, że getFormElement(currentForm, 'message_left') == null, bo nie ma tego w form.elements. Nie wiem jak dobrać sie do <span id="message_left">. Nie mogę napisać document.getElementById('message_left') bo mam na stronie dwa razy message_left (mam dwa formularze: contact360 i contact768):

<div id="width360">
<?php
echo form_open_multipart('contact/send', array('id' => 'contact360', 'name' => 'contact360'));
?>
...
<span id='message_left>
...
</div>
<div id="width768">
<?php
echo form_open_multipart('contact/send', array('id' => 'contact768', 'name' => 'contact768'));
?>
...
<span id='message_left>
...
</div>

Wróciłem dop kodu jQuery i mi teraz działa.
var counter = $('form#' + formName + ' span#' + elemId + '_left')[0];.
W tym wypadku użycie jQuery wydaje mi się uzasadnione.

Mój Firefox 42.0 po Ubuntu 14.04 LTS zachowuje się bardzo dziwnie:
1. otwieram FF i stronę i mi NIE działa onKeyUpAtTextArea
2. wchodzę do debugera JavaScript i ustawiam pułapkę w onKeyUpAtTextArea
3. pod debugerem onKeyUpAtTextArea działa poprawnie
4. zamykam debuger i wracam do stronki
5. wszystko działa poprawnie
Inaczej mówiąc problem występuje ale tylko do czasu aż uruchomię debugger.
Nie umiem tego wytłumaczyć.

http://jsfiddle.net/z3qrnx8t/4/

Nie wiem czy to może mieć znaczenie dla opisanego problemu, jakiś związek, ale mam jeszcze taki problem: przestał mi prawidłowo działać kalendarz jQuery, tzn. nie kopiuje się do inputa data wybrana z kontrolki kalendarza (zamiast tego dopisuje się sam # do URL).
Dodam, że używam następujących bibliotek jQuery:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="<?php rs('jQuery.MultiFile.min.js'); ?>" type="text/javascript"></script>
    <script src="<?php rs('jquery.ui.datepicker-pl.js'); ?>" type="text/javascript"></script>

Kalendarz mi działał, ale po przerobieniu strony na responsywną pojawił się ten problem. Zrobienie responsywności polegało na wykonaniu dwóch wersji dużego formularza i ustawianiu właściwości CSS display na block/none dla formularzy w zależności od szerokości ekranu - przy pomocy media query.

W dniu 2015-11-23 o 20:03, jivanmukta@poczta.onet.pl pisze:
>
> Nie wiem o co chodzi, ale na localhoście onChangeAtTextArea czasem zatrzymuje się na breakpoincie a czasem nie.
> Problem jest w tym, że getFormElement(currentForm, 'message_left') == null, bo nie ma tego w form.elements. Nie wiem jak dobrać sie do <span id="message_left">. Nie mogę napisać document.getElementById('message_left') bo mam na stronie dwa razy message_left (mam dwa formularze: contact360 i contact768):
>
> ...
> <span id='message_left>

Brakujący apostrof na końcu.

> ...
> </div>
> <div id="width768">

Czemu raz " a innym razem '?
Ale to drobiazg.

  ...
> <span id='message_left>

Napisałeś: "bo mam na stronie dwa razy message_left"

Poczytaj o atrybucie "id".
"The id attribute specifies a unique id for an HTML element (the value 
must be unique within the HTML document)"

Nie wiem czy akurat to (tylko to) jest przyczyną Twoich problemów, bo 
nie analizowałem całości, ale od tego zacznij.

Pozdrawiam
Piotr

W dniu 11/25/2015 o 5:10 PM, Kviat pisze:
[...]
> Poczytaj o atrybucie "id".
> "The id attribute specifies a unique id for an HTML element (the value
> must be unique within the HTML document)"
>
> Nie wiem czy akurat to (tylko to) jest przyczyną Twoich problemów, bo
> nie analizowałem całości, ale od tego zacznij.

Dodam, że warto skorzystać z narzędzi weryfikujących kod JavaScript, np. 
http://eslint.org/. Niemniej jednak to odrębna sprawa ;-)

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

Dnia Tue, 24 Nov 2015 07:29:53 -0800 (PST), jivanmukta@poczta.onet.pl
napisał(a):

> Kalendarz mi działał, ale po przerobieniu strony na responsywną pojawił
> się ten problem. Zrobienie responsywności polegało na wykonaniu dwóch
> wersji dużego formularza i ustawianiu właściwości CSS display na
> block/none dla formularzy w zależności od szerokości ekranu - przy
> pomocy media query.

Ty to dopiero sobie potrafisz pierwszorzednie życie komplikować. I jak
obsługujesz takie dwa formularze? Przewidziałeś to, że ktoś może zechcieć
tablet obrócić, przełączy breakpoint i mu zawartość formularza wyparuje?

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

W dniu czwartek, 26 listopada 2015 00:10:10 UTC+1 użytkownik Borys Pogoreło napisał:
> Ty to dopiero sobie potrafisz pierwszorzednie życie komplikować. I jak
> obsługujesz takie dwa formularze? Przewidziałeś to, że ktoś może zechcieć
> tablet obrócić, przełączy breakpoint i mu zawartość formularza wyparuje?

W dniu 26.11.2015 o 00:10, Borys Pogoreło pisze:
> Ty to dopiero sobie potrafisz pierwszorzednie życie komplikować. I jak
> obsługujesz takie dwa formularze? Przewidziałeś to, że ktoś może zechcieć
> tablet obrócić, przełączy breakpoint i mu zawartość formularza wyparuje?

W takim razie zrobię jeden formularz a jego zawartość będę wypisywał przy pomocy document.write(). W przypadku szerokiego ekranu będę wypisywał <tr><td>...</td><td>...</td><td>...</td></tr> a w przypadku wąskiego ...<br>...<br>...<br>. Tylko nie wiem czy da się tak zrobić, żeby formularz był wypisywany po zmianie szerokości ekranu. Co o tym sądzisz?

Nie, tak się chyba nie da. A jakby zamiast <tr><td>...</td><td>...</td><td>...</td></tr> robić <div>...</div><div>...</div><div>...</div> i ustawiać float w media query?

Dnia Thu, 26 Nov 2015 00:07:14 -0800 (PST), jivanmukta@poczta.onet.pl
napisał(a):

>> Ty to dopiero sobie potrafisz pierwszorzednie życie komplikować. I jak
>> obsługujesz takie dwa formularze? Przewidziałeś to, że ktoś może zechcieć
>> tablet obrócić, przełączy breakpoint i mu zawartość formularza wyparuje?
> 
> W takim razie zrobię jeden formularz a jego zawartość będę wypisywał przy
> pomocy document.write(). W przypadku szerokiego ekranu będę wypisywał
> <tr><td>...</td><td>...</td><td>...</td></tr> a w przypadku wąskiego
> ...<br>...<br>...<br>. 

Dalej niepotrzebnie kombinujesz. Jeśli już musisz mieć układ w tabeli, to
możesz dla małych ekranów ostylować elementy tabeli tak, żeby wyglądały i
zachowywały się jak zwykłe blokowe.

A najprościej i najsensowniej jest po prostu zaprojektować formularz z
dużymi i wygodnymi polami, gdzie etykiety są nad nimi. To jest zarówno
przyjazne w obsłudze, jak i w projektowaniu, generuje też minimalną liczbę
znaczników w kodzie.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

Zrobię tak:

http://jsfiddle.net/rto26uvz/1/

Jest dobrze i dla wąskiego i dla szerokiego ekranu.

Dnia Sat, 28 Nov 2015 16:59:18 +0100, Jivanmukta napisał(a):

> Zrobię tak:
> 
> http://jsfiddle.net/rto26uvz/1/
> 
> Jest dobrze i dla wąskiego i dla szerokiego ekranu.

Wygląda OK, ale można jeszcze prościej i trochę semantyczniej:

<label>Etykieta:
<input type="text" name="name">
<span class="error">Komunikat błędu</span>
</label>

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

Mam jeszcze problemik z jQuery. Potrzebuję na stronce włączać/wyłączać wiersze formularza, w zależności od wyboru na liście <select>. Nie działa mi funkcja setBRTags() która włącza/wyłącza tagi <br clear="both"> (żeby nie tworzyła się pusta przestrzeń na formularzu). Oto ta funkcja:

function setBRTags() {
    setCurrentStyle($('div[class="tip" style|="display: block"] + br[clear="both"]')[0], 'display', "");
    setCurrentStyle($('div[class="tip" style|="display: none"] + br[clear="both"]')[0], 'display', "none");
}

Problem w tym, że oba wywołania $(...)[0] zwracają undefined, nie wiem co jest źle (jestem kiepski w jQuery). Wiersz formularza zawiera zawsze <div class="tip">...</div><br clear="both">. Chcę wyłączyć wszystkie br dla odpowiednich wierszy.
Wszystko jest na http://jsfiddle.net/rto26uvz/3/ ale nie umiem włączyć jQuery na jsfiddle. Jak by ktoś mi mógł pomóc...

W dniu środa, 2 grudnia 2015 15:41:44 UTC+1 użytkownik jivan...@poczta.onet.pl napisał:
> Mam jeszcze problemik z jQuery. Potrzebuję na stronce włączać/wyłączać wiersze formularza, w zależności od wyboru na liście <select>. Nie działa mi funkcja setBRTags() która włącza/wyłącza tagi <br clear="both"> (żeby nie tworzyła się pusta przestrzeń na formularzu). Oto ta funkcja:
> 
> function setBRTags() {
>     setCurrentStyle($('div[class="tip" style|="display: block"] + br[clear="both"]')[0], 'display', "");
>     setCurrentStyle($('div[class="tip" style|="display: none"] + br[clear="both"]')[0], 'display', "none");
> }
> 
> Problem w tym, że oba wywołania $(...)[0] zwracają undefined, nie wiem co jest źle (jestem kiepski w jQuery). Wiersz formularza zawiera zawsze <div class="tip">...</div><br clear="both">. Chcę wyłączyć wszystkie br dla odpowiednich wierszy.
> Wszystko jest na http://jsfiddle.net/rto26uvz/3/ ale nie umiem włączyć jQuery na jsfiddle. Jak by ktoś mi mógł pomóc...

Nie pomogę Ci ale sory, nie mogę się powstrzymać. 
Uczepiłeś się tej biblioteki jak ...

Dlaczego po prostu nie napiszesz: 

document.getElementById('xx').style.display='none';

Generalnie w programowaniu wszelkie biblioteki są po to, żeby duże standardowe kody hermetyzować w postaci zwięzłych funkcji. 
Jeżeli kod standardowy jest bardziej zwięzły niż ten z biblioteki to coś jest nie tak z myśleniem :)

Paweł

Paweł

> document.getElementById('xx').style.display='none';

Masz rację. Tak zrobiłem. Działa. Problem zamknięty. Dzięki za pomoc.

Dnia Wed, 2 Dec 2015 06:41:43 -0800 (PST), jivanmukta@poczta.onet.pl
napisał(a):

> Mam jeszcze problemik z jQuery. Potrzebuję na stronce włączać/wyłączać
> wiersze formularza, w zależności od wyboru na liście <select>. Nie
> działa mi funkcja setBRTags() która włącza/wyłącza tagi <br
> clear="both"> (żeby nie tworzyła się pusta przestrzeń na formularzu).

Jeśli do osiągnięcia tego efektu musisz włączać/wyłączać tagi <br/>, to z
tym formularzem (jego strukturą) coś jest mocno nie tak...

> function setBRTags() {
>     setCurrentStyle($('div[class="tip" style|="display: block"] + br[clear="both"]')[0], 'display', "");
>     setCurrentStyle($('div[class="tip" style|="display: none"] + br[clear="both"]')[0], 'display', "none");

Strasznie dziwny ten selektor i ogólnie bez sensu, bo wystarczy napisać
$('div.tip:visible + br').hide() / $('div.tip:hidden + br').show() ("+"
zwróci nie więcej niż jeden kolejny element, więc nie wiem po co autor to
dodatkowo filtruje). Kompletnie nie rozumiem też idei zapisu
br[clear="both"], to nie miał być przypadkiem styl "clear: both" albo klasa
"clear"? Selektory atrybutów powinny być też rozdzielone, ale może jQuery
akurat to potrafi jakoś przetworzyć, nie testowałem.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

Borys Pogoreło wrote:
> Jeśli do osiągnięcia tego efektu musisz włączać/wyłączać tagi <br/>, 
to z
> tym formularzem (jego strukturą) coś jest mocno nie tak...

Masz rację; poprawiłem błąd projektowy i uprościł mi się kod 
HTML/CSS/JavaScript a znaczniki <br> stały się niepotrzebne.