🚀 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 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 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>

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/

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.

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/

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="<?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/

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?

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

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.