How to get checkbox state ? about n2o HOT 17 CLOSED

The checkbox attribute value defines what will be submitted when checked,
but you will never submit the form because nothing is intended to be used within the forms.

The button sources is the list of element ids whose values will be collected when postback is triggered. The values collected by val(), by html() if the element is has data-html attributes or joined list of values if the elements has data-list attribute. Because you never change the value of the checkbox the val() will always return off in this case.

So you should define the postback for the #checkbox{} element and do something on value change.
Or change the value of the checkbox element manually prior to handle the button postback.
Something like this:

wf:wire(wf:f("$('#~s').on('click', function(e){ $(this).attr('value', 'new value'); })", [CheckboxId]));

should work (however I did not test it :) )

from n2o.

Ok, перехожу на русский (потом сотрете или переведете), что бы точно быть понятым и понять ответ. :)
Как идеологически верно с точки зрения фреймворка обрабатывать формы, включая checkbox,radiobox,select и т.д ?
Можно пример? Ни в skyline, ни еще где я пока такого не нашел.

from n2o.

Please update your checkbox_element and n2o.js and you will be able to get the checkbox state through the button source. Only checked checkboxed will have the values

from n2o.

Ok, thank you.
But still waiting for answer on my russian question about ideology of frameworks work with forms and data.

from n2o.

We are not using forms, we collecting data by javascript. So in some simple cases .val was enough, however to include all set of controls we need to include them into n2o collecting function (first function in n2o.js) or do it ourselves by wiring javascript. My point is that framework should care the simple cases, Andrew's point is that we should keep n2o.js as much clean as possible.

from n2o.

Thank you, Maxim, for quick response. I know what to do right now.
Please, do not throw your work.

from n2o.

You can use your forms with no additional support from the framework. All the parameters you submit to some server side module can be collected through the wf:qs().

from n2o.

Already checked it. :)

from n2o.

Dear doxtop@,

Your advice is not working. With wf:q(checkbox) I got declared value always.

from n2o.

We've tested and it should work, it was committed from working sample. Please clarify the problem.

For query string parameters you should use wf:qs(<<"parameter">>) binary parameters.
However this is old way of passing data to the server through HTTP.
You should use manual wiring for collecting data from custom controls to pass them through WebSockets.

Here is working sample with updated n2o.js:

   #checkbox{id=islatin, name=islatin, class=["checkbox"],
        checked=false, value=off, body= <<" Aaa">>},
        #button{class=["btn btn-primary"], id=btn_send_one, body= <<"Send">>, 
             postback=send_one, source=[islatin]}.

   event(send_one)-> error_logger:info_msg("Latin value: ~p", [wf:q(islatin)]);

from n2o.

Hmm. Strange. Ok.
Declare checkbox:
#checkbox{id=islatin, name=islatin, class=["checkbox"], checked=false, value=off, body= <<" ">>},
...
wf:q(islatin) always returns a value="off".

n2o_scripts, n2o was updated. I saw changes in n2o.js + checkbox_element.erl.
I can see if(this.attr('data-toggle')=='checkbox') { if ($(this).is(':checked')) return this.val(); else return 'undefined'; ...
So, I think that it must be working.
Also I inspected checkbox element in rendered page and saw:

It must be working, but...
Chrome, MacOS X.

from n2o.

Please, add some console.log in that place of JS to be sure that this code was executed in browser.

from n2o.

vim deps/n2o_scripts/n2o/n2o.js :

} else if(this.attr('data-toggle')=='checkbox') {
    console.log('my checkbox checking...');
    if ($(this).is(':checked')) {
            console.log("it's checked");
            return this.val();
    }
    else {
            console.log("it's not checked");
            return 'undefined';
    }

$ javascript.sh
$ rebar compile; ./stop.sh; ./release.sh; ./start.sh

console log in browser is empty. What I forgot to do ?

from n2o.

$ release_sync.sh

from n2o.

my checkbox checking... all.min.js:1
it's not checked all.min.js:1
my checkbox checking... all.min.js:1
it's not checked all.min.js:1
my checkbox checking... all.min.js:1
it's not checked all.min.js:1

Always. When checked or not. My form has three checkboxes. I checked one, two . But always selector does not work.

from n2o.

Found! (this.is(':checked')) , not $(this).is(':checked').

my checkbox checking... all.min.js:1
it's not checked all.min.js:1
my checkbox checking... all.min.js:1
it's checked all.min.js:1
my checkbox checking... all.min.js:1
it's not checked

attach:
Submit send one message: [], [], [], "undefined", "off", "undefined", []

from n2o.

Great! Thanks for contribution.

from n2o.